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

在JavaScript中，我们经常会遇到一些“看起来像数组，但又不是真数组”的对象，比如函数的arguments对象、DOM操作返回的NodeList或HTMLCollection。它们通常具有length属性，可以通过索引访问元素，但缺乏数组的push、map等方法。将这些类数组转换为真正的数组，是调用数组方法进行便捷操作的必要步骤。

使用Array.from方法

Array.from()是ES6引入的专门用于将类数组或可迭代对象转换为数组的方法。它是最现代、语义最清晰的方案。

function example() {
  const argsArray = Array.from(arguments);
  console.log(Array.isArray(argsArray)); // true
}
example(1, 2, 3);

const nodeList = document.querySelectorAll('div');
const divArray = Array.from(nodeList);

Array.from()接受一个类数组或可迭代对象作为第一个参数，并返回一个新的数组实例。它还可以接收一个可选的映射函数，对每个元素进行处理后再放入数组，功能强大。

使用扩展运算符…

扩展运算符...同样可以将可迭代的类数组对象展开，放入数组字面量中，从而完成转换。它的写法更为简洁。

function example(...args) {
  const argsArray = [...arguments];
  console.log(Array.isArray(argsArray));
}
example(1, 2, 3);

const divArray = [...document.querySelectorAll('div')];

注意，扩展运算符要求对象必须是可迭代的（即实现了[Symbol.iterator]方法）。现代的NodeList和arguments（在部分环境下）是可迭代的，但一些旧的类数组对象可能不行。

使用Array.prototype.slice.call

在ES6之前，最经典的转换方法是利用数组的slice方法。slice方法在不传递参数时，会返回一个原数组的浅拷贝新数组。我们通过call或apply改变其执行上下文，让它在类数组对象上执行。

function example() {
  const argsArray = Array.prototype.slice.call(arguments);
  console.log(Array.isArray(argsArray)); // true
}
example(1, 2, 3);

const oldNodeList = document.getElementsByTagName('div');
const oldDivArray = Array.prototype.slice.call(oldNodeList);

这种方法适用于任何具有length属性的对象，是旧环境下的通用解决方案。它的原理是slice方法内部会按照索引0到length-1去遍历this指向的对象，并将遍历到的元素放入新数组返回。

性能考虑与实际选择

对于现代项目，优先使用Array.from()或扩展运算符，它们的意图明确，代码可读性高。Array.from()在功能上更强大，例如可以处理具有length但不可迭代的纯类数组对象。扩展运算符则在处理可迭代对象时语法最简洁。

在极少数需要支持非常古老环境的情况下，Array.prototype.slice.call()是可靠的备选。将类数组转换为数组后，你就可以自由地使用map、filter、reduce等数组方法，这对于数据处理和函数式编程至关重要。