Array.from()是ES6将类数组或可迭代对象转为真数组的方法,需满足有非负整数length属性和数字索引键;支持映射回调、浅拷贝,不支持null/undefined。

Array.from() 是 ES6 提供的专门用于将类数组对象或可迭代对象转为真数组的方法,语法简洁、语义明确,比传统 Array.prototype.slice.call() 更直观可靠。
类数组对象必须满足两个基本条件
不是所有带属性的对象都能被正确转换。要让 Array.from() 成功生成有意义的数组,类数组对象需同时满足:
- 必须有
length属性,且值为非负整数(决定结果数组长度) - 索引属性名必须是数字或可转为数字的字符串(如
"0"、"1"、2),其他键名(如"name"、"age")会被忽略
例如:
✅ 正确结构(能转出有效数组):const obj = {0: "a", 1: "b", 2: "c", length: 3};Array.from(obj); // ["a", "b", "c"]
❌ 缺少 length(返回空数组):const obj = {0: "a", 1: "b"};Array.from(obj); // []
⚠️ 有 length 但索引不匹配(填充 undefined):const obj = {2: "c", length: 4};Array.from(obj); // [undefined, undefined, "c", undefined]
常见真实场景中的使用方式
开发中最常遇到的类数组对象来自 DOM 操作和函数参数,Array.from() 可直接处理:
-
DOM 节点集合:如
document.querySelectorAll()或getElementsByTagName()返回的NodeList -
函数内部的 arguments:在非箭头函数中,
arguments是典型的类数组对象
示例:
用于 inference.sh 的 JavaScript/TypeScript SDK,可运行 AI 应用、构建代理、集成 150+ 模型。包名:@inferencesh/sdk(npm install),完整 TypeScript 支持。
const buttons = document.querySelectorAll("button");Array.from(buttons).forEach(btn => btn.addEventListener("click", handler));
function sum() { return Array.from(arguments).reduce((a, b) => a + b, 0);}sum(1, 2, 3); // 6
支持映射处理,一步到位
第二个参数可传入回调函数,类似 map(),在转换过程中对每个元素加工,避免后续再调用 .map():
- 适用于需要提取属性、类型转换或条件处理的场景
- 回调接收两个参数:
item(当前值)、index(当前索引)
示例:
// 获取所有按钮的文本内容并转为大写const texts = Array.from(document.querySelectorAll("button"), btn => btn.textContent.toUpperCase());
// 将类数组对象 {0: "1", 1: "2", length: 2} 转为数字数组const nums = Array.from({0: "1", 1: "2", length: 2}, Number); // [1, 2]
注意浅拷贝与边界情况
Array.from() 创建的是新数组,但属于浅拷贝 —— 若原对象元素是引用类型(如对象、数组),新旧数组中对应项仍指向同一内存地址。
还需留意:
- 普通纯对象(无
length,无索引键)会转为空数组:Array.from({a: 1, b: 2}) // [] - Set / Map / 字符串等可迭代对象也能用,但它们不属于“类数组”,而是靠
Symbol.iterator接口支持 - 不支持
null或undefined作为第一个参数,会报错

















