推荐使用 Array.from(),它是最通用的现代方法,支持任意可迭代对象和类数组对象,并可一步映射;展开运算符简洁但有兼容性限制;slice.call() 适用于老环境;手动遍历为极端情况备用方案。

JavaScript 中将类数组对象(如 arguments、NodeList、HTMLCollection)转为真实数组,核心是让其具备数组方法(如 map、filter、forEach)。现代写法简洁高效,兼容性方案也明确。
使用 Array.from()(推荐,最通用)
这是 ES6 引入的标准方法,支持任意可迭代对象和类数组对象,还能配合映射函数做一步处理:
-
Array.from(document.querySelectorAll('div'))→ 真实数组,可直接调用.map() -
Array.from(arguments, x => x * 2)→ 转换同时映射 - 对空值安全:传入
null或undefined会报错,使用前建议判断
展开运算符 ...(简洁,但有局限)
适用于**真正可迭代**的类数组(如 NodeList 在现代浏览器中是可迭代的),但 arguments 和旧版 HTMLCollection 可能不支持:
-
[...document.getElementsByTagName('p')]→ 多数情况可用 -
[...arguments]→ 在严格模式或箭头函数中不可用(因无arguments绑定) - 不支持非可迭代类数组(如某些 DOM 集合在 IE 或旧环境)
Array.prototype.slice.call()(兼容老环境)
ES5 常用方式,利用数组原型方法借用机制,兼容 IE9+:
立即学习“Java免费学习笔记(深入)”;
Array.prototype.slice.call(arguments)Array.prototype.slice.call(document.childNodes)- 注意:不能用于没有
length属性或索引属性不连续的对象
手动遍历构建(极端兼容或特殊结构)
当对象只有数字索引和 length,但其他方法都失效时(如某些自定义类数组),可手动复制:
function toArray(arrayLike) { const arr = []; for (let i = 0; i- 适合调试、教学或极老运行时(如 IE8-)
- 性能略低,一般无需手写
日常开发优先用 Array.from();写库需兼容旧环境时,可降级到 slice.call()。展开运算符看着干净,但要注意目标对象是否真正可迭代。


















