类数组对象是具有length属性和数值键的非数组对象,如arguments、NodeList;Array.from通过读取length及索引值将其转为真数组,并支持可迭代对象与映射函数,常用于DOM操作或参数处理。

Array.from 方法可以将类数组对象(array-like object)转换为真正的数组,主要通过读取对象的 length 属性,并根据索引从 0 到 length - 1 依次提取属性值,构造出一个新数组。
什么是类数组对象?
类数组对象是指具有 length 属性且属性名是数值型索引的对象,但不具备数组的内置方法如 push、pop 等。常见的例子包括函数内的 arguments 对象、DOM 的 NodeList、HTMLCollection 等。例如:
const arrayLike = {
0: 'a',
1: 'b',
2: 'c',
length: 3
};
Array.from 是如何工作的?
当调用 Array.from(arrayLike) 时,JavaScript 引擎会执行以下步骤:- 读取对象的 length 属性,确定新数组的长度
- 从索引 0 开始,逐个读取对象中对应数字键的值
- 将这些值按顺序放入一个新的数组实例中
- 返回这个真实数组
示例:
const arrayLike = { 0: 'x', 1: 'y', length: 2 };
const arr = Array.from(arrayLike);
console.log(arr); // ['x', 'y']
console.log(Array.isArray(arr)); // true
支持可迭代对象和映射操作
Array.from 不仅适用于类数组对象,也适用于所有可迭代对象(如 Set、Map、字符串等)。它还可以接受第二个参数——映射函数,用于在转换过程中处理每个元素。带映射函数的例子:
立即学习“Java免费学习笔记(深入)”;
const arrayLike = { 0: 2, 1: 4, 2: 6, length: 3 };
const doubled = Array.from(arrayLike, x => x * 2);
console.log(doubled); // [4, 8, 12]
这相当于先生成数组 [2, 4, 6],然后对每个元素执行 x => x * 2。
实际应用场景
在实际开发中,常用于处理 DOM 查询结果或函数参数:-
转换 NodeList:
Array.from(document.querySelectorAll('div')) -
转换 arguments: 在非箭头函数中,
Array.from(arguments)可替代Array.prototype.slice.call(arguments) -
字符串转字符数组:
Array.from('hello')得到 ['h', 'e', 'l', 'l', 'o']
基本上就这些。Array.from 提供了一种简洁、标准的方式,把看起来像数组的东西变成真正的数组,方便使用 map、filter 等方法。









