js 类数组怎么转数组

类数组对象转换为数组的方法有多种，包括 Array.from()、扩展运算符（…）、Array.prototype.slice.call() 等。其中，Array.from() 方法最为简洁且广泛使用。下面详细介绍 Array.from() 方法。

Array.from() 方法：这是将类数组对象（如 NodeList 或 arguments 对象）转换为数组最常用且简便的方法。它不仅能将类数组对象转换为数组，还支持对元素进行映射。

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

let array = Array.from(arrayLike);
console.log(array); // ["a", "b", "c"]

接下来，我们将详细探讨如何将类数组对象转换为数组，并讨论其他相关方法。

一、了解类数组对象

类数组对象是指具有 length 属性和索引元素的对象，但它们不具备数组的方法。例如，DOM 方法 document.querySelectorAll() 返回的结果就是一个类数组对象。

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

console.log(nodeList); // NodeList(3) [div, div, div]

尽管 nodeList 看起来像数组，但它并不具备数组的方法，如 push() 或 map()。

二、使用 Array.from() 方法

Array.from() 是将类数组对象转换为数组的最简便方法。它不仅能将类数组对象转换为数组，还支持对元素进行映射。

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

let array = Array.from(arrayLike);
console.log(array); // ["a", "b", "c"]

此外，可以传递一个映射函数作为第二个参数：

let array = Array.from(arrayLike, x => x.toUpperCase());

console.log(array); // ["A", "B", "C"]

三、使用扩展运算符（…）

扩展运算符是 ES6 中引入的一个功能强大的运算符，也可以用于将类数组对象转换为数组。

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

let array = [...nodeList];
console.log(array); // [div, div, div]

四、使用 Array.prototype.slice.call()

在 ES6 之前，使用 Array.prototype.slice.call() 是一种常见的将类数组对象转换为数组的方法。

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

let array = Array.prototype.slice.call(arrayLike);
console.log(array); // ["a", "b", "c"]

这种方法虽然有些冗长，但在 ES6 出现之前非常常见。

五、使用 Array.prototype.concat.apply()

这是另一种将类数组对象转换为数组的方法，通过使用 Array.prototype.concat.apply()。

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

let array = Array.prototype.concat.apply([], arrayLike);
console.log(array); // ["a", "b", "c"]

六、使用手动遍历

如果类数组对象非常简单，可以使用手动遍历来转换为数组。

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

let array = [];
for (let i = 0; i < arrayLike.length; i++) {
    array.push(arrayLike[i]);
}
console.log(array); // ["a", "b", "c"]

七、类数组对象的常见使用场景

了解类数组对象的常见使用场景有助于更好地理解如何处理它们。

1、DOM 方法返回的结果

许多 DOM 方法返回类数组对象，例如 getElementsByClassName、getElementsByTagName 和 querySelectorAll。

let divs = document.getElementsByClassName('my-class');

let array = Array.from(divs);
console.log(array); // [div, div, div]

2、arguments 对象

在函数中，arguments 对象是一个类数组对象，包含了传递给函数的所有参数。

function example() {

    let args = Array.from(arguments);
    console.log(args); // [1, 2, 3]
}
example(1, 2, 3);

八、选择合适的方法

根据具体情况选择合适的方法将类数组对象转换为数组。

1、使用场景

如果需要对类数组对象进行复杂的操作，建议使用 Array.from() 方法，因为它不仅简洁，还支持映射。

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

let array = Array.from(arrayLike, x => x.toUpperCase());
console.log(array); // ["A", "B", "C"]

2、兼容性

在需要兼容 ES6 之前的环境中，可以使用 Array.prototype.slice.call() 方法。

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

let array = Array.prototype.slice.call(arrayLike);
console.log(array); // ["a", "b", "c"]

九、优化性能

在处理大型类数组对象时，性能可能成为一个问题。可以通过优化代码来提高性能。

1、使用扩展运算符

扩展运算符通常比 Array.from() 更快，但缺乏映射功能。

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

let array = [...nodeList];
console.log(array); // [div, div, div]

2、手动遍历

对于非常简单的类数组对象，手动遍历可能是最优的选择。

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

let array = [];
for (let i = 0; i < arrayLike.length; i++) {
    array.push(arrayLike[i]);
}
console.log(array); // ["a", "b", "c"]

十、总结

将类数组对象转换为数组的方法有多种，每种方法都有其优点和适用场景。Array.from() 是最简洁和功能强大的方法，适用于大多数情况；扩展运算符和 Array.prototype.slice.call() 是其他常见的替代方法。根据具体需求和环境选择合适的方法可以提高代码的可读性和性能。

相关问答FAQs：

1. 如何将JavaScript类数组转换为数组？

类数组是指类似数组的对象，它们具有数字索引和length属性，但没有数组的方法。你可以使用以下方法将类数组转换为数组：

使用Array.from()方法：使用Array.from()方法可以将类数组对象转换为真正的数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = Array.from(arrayLike);
console.log(newArray); // Output: ['apple', 'banana', 'orange']

使用Array.prototype.slice.call()方法：你还可以使用Array.prototype.slice.call()方法将类数组转换为数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = Array.prototype.slice.call(arrayLike);
console.log(newArray); // Output: ['apple', 'banana', 'orange']

使用展开运算符（Spread Operator）：展开运算符也可以用于将类数组转换为数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = [...arrayLike];
console.log(newArray); // Output: ['apple', 'banana', 'orange']

2. 我如何在JavaScript中将一个类数组对象转换为数组？

如果你有一个类数组对象，想将其转换为数组，可以使用以下方法：

使用Array.from()方法：Array.from()方法可以将类数组对象转换为真正的数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = Array.from(arrayLike);
console.log(newArray); // 输出：['apple', 'banana', 'orange']

使用Array.prototype.slice.call()方法：你还可以使用Array.prototype.slice.call()方法将类数组转换为数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = Array.prototype.slice.call(arrayLike);
console.log(newArray); // 输出：['apple', 'banana', 'orange']

使用展开运算符（Spread Operator）：展开运算符也可以用于将类数组转换为数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = [...arrayLike];
console.log(newArray); // 输出：['apple', 'banana', 'orange']

3. JavaScript中如何将类数组对象转换为数组？

在JavaScript中，如果你有一个类数组对象，想将其转换为数组，有以下几种方法：

使用Array.from()方法：Array.from()方法可以将类数组对象转换为真正的数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = Array.from(arrayLike);
console.log(newArray); // 输出：['apple', 'banana', 'orange']

使用Array.prototype.slice.call()方法：你还可以使用Array.prototype.slice.call()方法将类数组转换为数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = Array.prototype.slice.call(arrayLike);
console.log(newArray); // 输出：['apple', 'banana', 'orange']

使用展开运算符（Spread Operator）：展开运算符也可以用于将类数组转换为数组。例如：

const arrayLike = { 0: 'apple', 1: 'banana', 2: 'orange', length: 3 };
const newArray = [...arrayLike];
console.log(newArray); // 输出：['apple', 'banana', 'orange']