array.from 是 es6 提供的静态方法,用于将类数组对象或可迭代对象转换为真正数组,支持映射函数和 this 绑定;类数组对象需有 length 属性和数字索引,如 arguments、nodelist、字符串;可处理 set/map,但不兼容 null/undefined。
array.from 是 es6 提供的静态方法,专门用于将类数组对象(array-like objects)或可迭代对象(iterables)转换为真正的数组。它比 array.prototype.slice.call() 或扩展运算符 [...] 更灵活,支持映射函数和 this 绑定。
什么是类数组对象?
类数组对象指拥有 length 属性、按数字索引存储元素,但不具备数组原型方法(如 map、filter)的对象。常见例子包括:
– arguments 对象(函数内部)
– DOM 节点列表(如 document.querySelectorAll() 返回的 NodeList)
– 字符串(虽是可迭代对象,但也常被当作类数组处理)
基本用法:直接转换
只需传入类数组对象作为第一个参数:
-
转换 arguments:
function demo() { return Array.from(arguments); }<br>demo('a', 'b', 'c'); // ['a', 'b', 'c'] -
转换 NodeList:
const divs = document.querySelectorAll('div');<br>const divArray = Array.from(divs); // 真正的数组,可调用 forEach/map -
转换字符串:
Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
进阶用法:映射与 this 绑定
Array.from 的第二个参数是一个映射函数(类似 map),第三个参数可指定该函数的 this 值:
-
转换并处理每个元素:
Array.from('123', x => Number(x)); // [1, 2, 3] -
配合 this 使用(较少见但有效):
const helper = { scale: 10 };<br>Array.from([1, 2, 3], function(x) { return x * this.scale; }, helper); // [10, 20, 30]
注意事项与替代方案对比
– 类数组对象必须有合法的 length 和数字键(如 0、1),否则可能生成空项或报错。
– 对于纯可迭代对象(如 Set、Map),Array.from 同样适用:Array.from(new Set([1,2,2])) → [1,2]。
– 若目标环境支持扩展运算符,[...arrayLike] 更简洁;但 Array.from 在需要映射或兼容旧环境时更可靠。
– 不要对 null/undefined 或无 length 属性的对象使用,会抛出 TypeError。











