类数组转换为数组的方法

Category（分类）: JavaScript Status: 已核对原文并更新（2025）

原文：骁M_M，华为云社区博客，https://bbs.huaweicloud.com/blogs/265922 ，2021 年 5 月发布。本文保留原文内容与图片（原图床 bbs-img.huaweicloud.com 已停止解析，图片改存本地），修正了原文的几处笔误与不严谨表述，并补充「现代补充」一节。原始授权归作者所有，转载请遵循原文出处声明（需标注来源、链接与作者）。

什么是类数组

类数组是可以当作数组来使用的对象，实际应用中，常见的类似数组的对象是 DOM 操作返回的 NodeList 集合，以及函数内部的 arguments 对象。

1、属性要为索引(数字)属性，利用属性名（相当于数组下标）模拟数组的特性

2、必须有 length 属性（严格来说，类数组的判定条件就只有「有 length 属性」这一点；普通对象上的 length 不会像数组那样随增删自动维护，需要手动保持同步）

3、最好加上 push 方法，根据 length 属性值的位置进行属性的扩充

4、还可以加上数组的其他方法，如 splice、pop、shift…（不加则不能调用）

let obj = {
    '0': 'aaa',
    '1': 'bbb',
    '2': 'cccc',
    'length': 3,   // 原文写作 '3'（字符串），借用数组方法时会被隐式转换成数字，但推荐直接写数字
    'push': Array.prototype.push,
    'name': 'yin',
    'splice': Array.prototype.splice
}

（注：原图截图自 2021 年浏览器控制台，展示的是上述对象在控制台中的显示；下同。）

类数组的优势

具有对象和数组的特性，既可以当作对象来用，也可以当作数组来用（并不是所有的数组方法都能使用，可以自己手动添加）可以使用 for…in 遍历类数组对象；

for…in 主要用于遍历对象的可枚举属性。包括自有属性、继承自原型的属性

（注意：对这个自定义类数组用 for…in 遍历时，length、name 以及借用的 push、splice 方法也会被一并列出——for…in 不区分「索引属性」和普通属性，这也是把类数组转成真数组的理由之一。）

Object.keys()：返回对象自身的所有可枚举的属性（原文笔误「Object.key()」，已更正；它返回的是属性名数组，不包含继承属性）

我们有一种需求就是把类数组对象转化为数组对象，下面我们看一下这些方法。

1.创建新数组，把类数组的元素添加到新数组中;

如果目标数组只是为了得到对象的 key 的集合或者 value 的集合还是相对容易的

let obj = {'未完成': 5, '已完成': 8, '待确认': 4, '已取消': 6};
var arr = []
for (let i in obj) {
    arr.push(obj[i]); // 收集值：[5, 8, 4, 6]
    // arr.push(i);   // 收集键：['未完成', '已完成', '待确认', '已取消']
}
console.log(arr);

（原文两行注释都写成 arr.push(obj[i])，其中标注「属性」的一行应为收集键的 arr.push(i)，已更正。）

如果想将对象转换成数组

var arr = []
for (let i in obj) {
    let o = {};
    o[i] = obj[i];
    arr.push(o)
}
console.log(arr);

（顺带一提，这两个需求如今分别有现成的 API：Object.values(obj) / Object.keys(obj) / Object.entries(obj)（ES2017）。）

2.通过 Array.prototype.slice.call() 将类数组对象传入即可

Array.prototype.slice.call(arrayLike)

这种方法是借用了数组原型中的 slice 方法，返回一个数组。slice 方法的内部实现（示意）：

// 教学示意：借用 call 后 this 指向了类数组对象
var result = new Array();
start = start || 0;
end = end || this.length;
for (var i = start; i < end; i++) {
    result.push(this[i]);
}
return result;

原理是数组的 slice() 方法可以从已有数组中返回一个新数组，它可以接受两个参数 arr.slice(start, end)，第一个参数规定从何处开始选取，第二个参数表示从何处选取结束，如果不传参将返回原数组的一个副本，但该方法不会修改原数组，而是返回截取的新数组，根据这个就可以将类数组转化成数组对象啦！

slice() 方法可从已有的数组中返回选定的元素。

arrayObject.slice(start, end)，返回一个新的数组，包含从 start 到 end（不包括该元素）的 arrayObject 中的元素。

3.ES6 中的新方法 Array.from()

Array.from() 是 ES6 中新增的方法，可以将两类对象转为真正的数组：类数组对象和可遍历（iterable）对象（包括 ES6 新增的数据结构 Set 和 Map）。

var arrayLike = {
    '0': 'a',
    '1': 'b',
    '2': 'c',
    length: 3
}

var arr = Array.from(arrayLike); // ['a', 'b', 'c']

把 NodeList 对象转换为数组

let ps = document.querySelectorAll('p');
Array.from(ps).filter(p => {
    return p.textContent.length > 100;
});

转换 arguments 对象为数组

function foo() {
    var args = Array.from(arguments);
}

只要是部署了 Iterator 接口的数据结构，Array.from 都能将其转换为数组

Array.from('hello'); // ['h', 'e', 'l', 'l', 'o']
let namesSet = new Set(['a', 'b'])
Array.from(namesSet) // ['a', 'b']

字符串和 Set 结构都具有 Iterator 接口，因此可以被 Array.from 转为真正的数组。

如果参数是一个真正的数组，Array.from 会返回一个一模一样的新数组。

Array.from([1, 2, 3])
// [1, 2, 3]

4.扩展运算符（…）

同样是 ES6 中新增的内容，扩展运算符（…）也可以将某些数据结构转为数组

arguments 对象的转换

function foo() {
    var args = [...arguments];
}

NodeList 对象的转换

[...document.querySelectorAll('p')]

扩展运算符实际上调用的是遍历器接口，如果一个对象没有部署此接口就无法完成转换

Array.from 与扩展运算符的区别

Array.from 方法还支持类似数组的对象。所谓类似数组的对象，本质特征只有一点，即必须有 length 属性。因此，任何有 length 属性的对象，都可以通过 Array.from 方法转为数组，而此时扩展运算符就无法转换。

Array.from({ length: 3 });
// [ undefined, undefined, undefined ]

上面代码中，Array.from 返回了一个具有三个成员的数组，每个位置的值都是 undefined。扩展运算符转换不了这个对象。

Array.from

Array.from 还可以接受第二个参数，作用类似于数组的 map 方法，用来对每个元素进行处理，将处理后的值放入返回的数组。

Array.from(arrayLike, x => x * x);
// 等同于
Array.from(arrayLike).map(x => x * x);

Array.from([1, 2, 3], (x) => x * x)
// [1, 4, 9]

下面的例子是取出一组 DOM 节点的文本内容。

let spans = document.querySelectorAll('span.name');

// map()
let names1 = Array.prototype.map.call(spans, s => s.textContent);

// Array.from()
let names2 = Array.from(spans, s => s.textContent)

下面的例子将数组中布尔值为 false 的成员转为 0。

Array.from([1, , 2, , 3], (n) => n || 0)
// [1, 0, 2, 0, 3]

另一个例子是返回各种数据的类型。

function typesOf () {
  return Array.from(arguments, value => typeof value)
}
typesOf(null, [], NaN)
// ['object', 'object', 'number']

如果 map 函数里面用到了 this 关键字，还可以传入 Array.from 的第三个参数，用来绑定 this。

Array.from() 可以将各种值转为真正的数组，并且还提供 map 功能。这实际上意味着，只要有一个原始的数据结构，你就可以先对它的值进行处理，然后转成规范的数组结构，进而就可以使用数量众多的数组方法。

Array.from({ length: 2 }, () => 'jack')
// ['jack', 'jack']

上面代码中，Array.from 的第一个参数指定了第二个参数运行的次数。这种特性可以让该方法的用法变得非常灵活。

Array.from() 的另一个应用是，将字符串转为数组，然后返回字符串的长度。因为它能正确处理各种 Unicode 字符，可以避免 JavaScript 将大于 \uFFFF 的 Unicode 字符，算作两个字符的 bug。

function countSymbols(string) {
  return Array.from(string).length;
}

现代补充（2025）

原文的四种方法到今天依然是完整的答案清单，但使用优先级和一些细节值得更新：

首选 Array.from() 和扩展运算符。 两者在所有现代浏览器和 Node 中可用，语义清晰。两者分工依旧：Array.from 兼容「只有 length 的类数组」，扩展运算符只认 Iterator 接口。Array.prototype.slice.call(x) 属于 ES5 时代的写法，如今主要出现在旧代码和面试题里。

很多场景已经不需要「转数组」了：

• NodeList 早已原生支持 forEach（Chrome 51+/2016 年起），日常的 document.querySelectorAll(...).forEach(...) 不再报错；但它没有 map/filter，要链式操作仍需转换。
• arguments 可以被剩余参数直接替代：function foo(...args) { /* args 就是真数组 */ }。剩余参数是 ES6 标准做法，箭头函数中没有 arguments，新代码不应再依赖它。
• for...of 可以直接迭代任何可迭代对象（含 NodeList、Map、Set），不转数组也能遍历。

slice.call 的两个坑（面试常追问）：

• 如果类数组的 length 是非数字或极大值，slice 可能产生意外结果甚至 RangeError: Invalid array length（例如 length: '3' 会被当 3 处理，而 length: 2**32 会直接抛错）；Array.from 内部用 ToLength 语义处理，行为更可预期。
• 对字符串以外的「有索引属性对象」，两种方式都会按 length 截取，超出 length 的多余索引属性会被丢弃。

用扩展运算符对象字面量的混淆提醒：{...arrayLike}（对象展开）得到的是「属性拷贝」的普通对象（含 length 属性），不是数组；只有 [...arrayLike]（数组展开/迭代消费）才会转数组，且要求目标可迭代。

其他细节：

• Array.from 的第三个参数绑定 this 的用法在箭头函数普及后已很少用到（箭头函数没有自己的 this）。
• Unicode 长度问题除了 Array.from(string).length，也可以用 [...string].length，两者等价；而 string.length 返回的是 UTF-16 码元数。
• 稀疏数组示例中的 [1, , 2, , 3]（含空槽）配合 Array.from 会把空槽转为 undefined 再交给 map 函数，这是 Array.from 与原生 map（跳过空槽）的行为差异之一。