ES6如何将类数组对象转数组

在JavaScript中，类数组对象（Array-like Object）是一种常见的对象类型，它们具有类似于数组的结构，但并不是真正的数组。类数组对象通常具有length属性，并且可以通过索引访问元素，但它们缺少数组的原型方法，如push、pop、map等。常见的类数组对象包括arguments对象、DOM元素集合（如NodeList）以及通过某些API返回的对象。

在ES6（ECMAScript 2015）之前，将类数组对象转换为真正的数组通常需要使用一些技巧，如Array.prototype.slice.call()。然而，ES6引入了更简洁、更直观的方法来实现这一转换。本文将详细介绍如何使用ES6的新特性将类数组对象转换为数组。

1. 类数组对象的定义与特点

类数组对象是指那些具有length属性，并且可以通过索引访问元素的对象。它们与数组的主要区别在于，类数组对象没有数组的原型方法，如push、pop、map等。常见的类数组对象包括：

• arguments对象：在函数内部自动创建的类数组对象，包含传递给函数的所有参数。
• NodeList对象：通过document.querySelectorAll等方法返回的DOM元素集合。
• HTMLCollection对象：通过document.getElementsByTagName等方法返回的DOM元素集合。

类数组对象的结构通常如下：

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

2. ES6之前的转换方法

在ES6之前，将类数组对象转换为数组的常见方法是使用Array.prototype.slice.call()。slice方法可以截取数组的一部分，并返回一个新的数组。通过将slice方法应用于类数组对象，可以将其转换为真正的数组。

function toArray(arrayLike) {
  return Array.prototype.slice.call(arrayLike);
}

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

const arr = toArray(arrayLike);
console.log(arr); // ['a', 'b', 'c']

这种方法虽然有效，但语法较为冗长，且不够直观。

3. ES6中的转换方法

ES6引入了Array.from方法和扩展运算符（...），使得将类数组对象转换为数组变得更加简洁和直观。

3.1 使用Array.from方法

Array.from是ES6中新增的静态方法，用于将类数组对象或可迭代对象转换为数组。它的语法如下：

Array.from(arrayLike[, mapFn[, thisArg]])

• arrayLike：要转换为数组的类数组对象或可迭代对象。
• mapFn（可选）：映射函数，用于对每个元素进行处理。
• thisArg（可选）：执行映射函数时的this值。

使用Array.from方法将类数组对象转换为数组的示例如下：

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

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

Array.from方法不仅可以处理类数组对象，还可以处理可迭代对象（如Set、Map等）。此外，它还可以接受一个映射函数，用于对每个元素进行处理：

const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

const arr = Array.from(arrayLike, x => x * 2);
console.log(arr); // [2, 4, 6]

3.2 使用扩展运算符（...）

扩展运算符（...）是ES6中引入的另一个强大特性，它可以将可迭代对象展开为单独的元素。由于类数组对象通常是可迭代的，因此可以使用扩展运算符将其转换为数组。

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

const arr = [...arrayLike];
console.log(arr); // ['a', 'b', 'c']

需要注意的是，扩展运算符只能用于可迭代对象。如果类数组对象不可迭代，使用扩展运算符会抛出错误。例如，以下代码会抛出TypeError：

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

const arr = [...arrayLike]; // TypeError: arrayLike is not iterable

为了避免这种情况，可以使用Array.from方法，因为它可以处理不可迭代的类数组对象。

4. 实际应用场景

4.1 处理arguments对象

在ES5中，arguments对象是一个常见的类数组对象。在函数内部，arguments对象包含了传递给函数的所有参数。由于arguments对象不是真正的数组，因此无法直接使用数组的方法。在ES6之前，通常需要使用Array.prototype.slice.call()将其转换为数组：

function sum() {
  const args = Array.prototype.slice.call(arguments);
  return args.reduce((acc, val) => acc + val, 0);
}

console.log(sum(1, 2, 3)); // 6

在ES6中，可以使用Array.from方法或扩展运算符来简化这一过程：

function sum() {
  const args = Array.from(arguments);
  return args.reduce((acc, val) => acc + val, 0);
}

console.log(sum(1, 2, 3)); // 6

或者使用扩展运算符：

function sum(...args) {
  return args.reduce((acc, val) => acc + val, 0);
}

console.log(sum(1, 2, 3)); // 6

4.2 处理DOM元素集合

在Web开发中，NodeList和HTMLCollection是常见的类数组对象。例如，通过document.querySelectorAll方法返回的NodeList对象：

const nodeList = document.querySelectorAll('div');

在ES6之前，将NodeList转换为数组需要使用Array.prototype.slice.call()：

const nodeArray = Array.prototype.slice.call(nodeList);

在ES6中，可以使用Array.from方法或扩展运算符：

const nodeArray = Array.from(nodeList);

或者使用扩展运算符：

const nodeArray = [...nodeList];

4.3 处理自定义类数组对象

有时，我们可能会遇到自定义的类数组对象。例如，以下是一个自定义的类数组对象：

const customArrayLike = {
  0: 'apple',
  1: 'banana',
  2: 'cherry',
  length: 3
};

在ES6中，可以使用Array.from方法将其转换为数组：

const arr = Array.from(customArrayLike);
console.log(arr); // ['apple', 'banana', 'cherry']

如果类数组对象不可迭代，使用扩展运算符会抛出错误。因此，在这种情况下，Array.from是更安全的选择。

5. 总结

ES6引入了Array.from方法和扩展运算符，使得将类数组对象转换为数组变得更加简洁和直观。Array.from方法不仅可以处理类数组对象，还可以处理可迭代对象，并且支持映射函数。扩展运算符则适用于可迭代对象，但在处理不可迭代的类数组对象时会抛出错误。

在实际开发中，根据具体需求选择合适的方法。如果类数组对象是可迭代的，可以使用扩展运算符；如果不可迭代，或者需要对元素进行处理，可以使用Array.from方法。通过这些方法，我们可以更方便地处理类数组对象，充分利用数组的原型方法，提高代码的可读性和可维护性。