Array.from()是ES6将类数组或可迭代对象转为真数组的静态方法,支持映射函数,要求对象有length属性和可枚举的数字索引,现代环境广泛兼容。

Array.from() 是 ES6 提供的静态方法,专为将类数组对象(如 arguments、NodeList)或可迭代对象(如 Set、Map、字符串)转换为真正的 Array 实例而设计。它比传统的 [].slice.call() 或 Array.prototype.slice.call() 更简洁、语义更清晰,且天然支持映射操作。
直接转换类数组对象
只要对象具备 length 属性,并拥有以数字为键的元素(即“索引属性”),Array.from() 就能识别为类数组并正确展开:
- 在函数内部处理
arguments:
function sum() {
const args = Array.from(arguments); // ✅ 转为真数组
return args.reduce((a, b) => a + b, 0);
}
sum(1, 2, 3); // → 6- 获取 DOM 元素列表(如
querySelectorAll返回的NodeList):
const buttons = document.querySelectorAll('button');
const buttonArray = Array.from(buttons); // ✅ 真数组,可直接调用 .map() .filter() 等
buttonArray.forEach(btn => btn.addEventListener('click', handler));利用第二个参数做一步映射(省去 .map())
Array.from() 接收可选的第二个参数——一个映射函数,会在每个元素被加入新数组前执行,等价于先转数组再调用 .map(),但更高效:
- 提取所有按钮的文本内容:
const texts = Array.from(
document.querySelectorAll('button'),
el => el.textContent.trim()
); // → ['提交', '取消', '重置']- 对
arguments中每个值平方:
function squareArgs() {
return Array.from(arguments, x => x * x);
}
squareArgs(1, 2, 3); // → [1, 4, 9]注意:不是所有“像数组”的对象都适用
需确保对象满足基本条件:
根据 package.json 中的 engines 字段自动检测 Node.js 版本需求,未安装 nvm 时自动安装并切换至对应版本。支持 Windows、macOS、Linux。适用于 Node.js 项目开发、版本切换和环境配置。
- 必须有
length属性(数值型,决定新数组长度); - 必须存在从
0开始、连续递增的索引属性(如0、1、2…); - 若
length = 3,但只有0和2有值,则索引1对应undefined,不会跳过。
❌ 反例:普通对象 {0: 'a', 1: 'b', length: 2} —— 表面上符合,但若该对象不可枚举其数字键(如通过 Object.defineProperty 设置为 enumerable: false),Array.from() 仍可能无法读取(实际取决于引擎实现,但一般要求属性可枚举)。
兼容性与替代方案
现代浏览器和 Node.js(≥ v4)均支持 Array.from()。若需兼容旧环境(如 IE),可用以下安全回退:
- 通用写法(推荐):
const toArray = (likeArray) => Array.isArray(likeArray) ? likeArray : Array.from(likeArray); <p>// 或手动模拟(仅当 Array.from 不可用时) const toArrayLegacy = (likeArray) => [].slice.call(likeArray);
不复杂但容易忽略:使用 Array.from() 前,建议先确认目标对象结构是否真正满足类数组定义,避免静默生成空数组或意外 undefined 元素。

















