如何将类数组转化为数组？

什么是类数组？

一个含有length属性的对象，就是类数组。

常见的类数组：

• DOM中查找元素的API返回的就是类数组：document.querySelectorAll等
• funciton中的arguments

如何将类数组转化为数组的？

ES6+

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

// ... 拓展运算符（不过它只能用于可迭代对象 => 意味着可以使用for...of循环来迭代）
[...document.querySelectorAll('div')]

ES5：利用Array API通过call/apply改变this或arguments来完成转化

const arrayLike = {
  0: 3,
  1: 4,
  2: 5,
  length: 3
}
// 借用this
Array.prototype.slice.call(arrlike);
Array.prototype.map.call(arrayLike, x=> x);
Array.prototype.filter.call(arrayLike, x=> x);
// 借用arguments
Array.apply(null,arrayLike);
Array.prototype.concat.apply([], arrayLike);

稀疏数组：内部并未含有真是元素，节省空间，在控制台上以empty显示。

先看一个例子：下面的代码输出什么？

Array(100).map(x => 1); // [empty × 100]

综上总结：Array(n)以及[,,,]都会返回稀松数组。

总结

最靠谱方法：

Array.from(arrayLike)
Array.apply(null, arrayLike)
Array.prototype.concat.apply([], arrayLike)

以下几种方法需要考虑稀疏数组的转化

Array.prototype.filter.call(divs, x => 1)
Array.prototype.map.call(arrayLike, x => x)
Array.prototype.filter.call(arrayLike, x => 1)

以下方法要注意是否是 iterable object

[...arrayLike]

参考链接

https://juejin.im/post/5e1d06...