前端 js 编程如何将类数组转为数组

将类数组转为数组，可以采用多种方法，包括：使用Array.from()方法、利用扩展运算符(…)、通过Array.prototype.slice.call()、依靠Array.prototype.concat.apply()等。具体如何操作，下面将进行详细的展开描述。

以使用Array.from()方法为例，这是将类数组对象转化为真实数组的最直接、现代和推荐的方法。它创建一个新的、具有类数组对象的长度的数组实例，然后将类数组对象中的元素复制到新数组中。这种方法还可以接受一个可选的映射函数参数，允许你在转换的同时执行映射操作，无需额外调用数组的map方法。

一、使用Array.from()方法

Array.from()方法可以直接把类数组对象，还有可遍历的对象（如Set和Map结构），转换成真正的数组。这是ES6标准新增的方法，使用起来非常简单和方便。

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

let arr = Array.from(arrayLike);

上述代码片段即将一个具有length属性的对象arrayLike成功地转换成了一个具有相同元素的数组arr。

二、利用扩展运算符(…)

扩展运算符是ES6中新添加的一个语法特性，它同样可以用于将某些类数组对象转换为数组。这种方法的一个限制是，它只适用于那些拥有迭代器的对象。传统的类数组如函数的arguments，就需要其他方法进行转换。

function myFunction() {

  let arr = [...arguments];
  return arr;
}

在这个例子中，函数内部的arguments对象是一个类数组对象，我们可以直接使用扩展运算符转换为真正的数组。

三、通过Array.prototype.slice.call()

使用Array的slice方法是一个传统的把类数组转换为数组的做法。虽然slice是用于截取数组的，但当它被call或者apply应用在类数组上时，它们可以返回一个包含所有类数组元素的新数组。

function myFunction() {

  let arr = Array.prototype.slice.call(arguments);
  return arr;
}

这个方法依然在很多遗留代码和各种库函数的实现中使用，它对ES5及更早版本是兼容的。

四、依靠Array.prototype.concat.apply()

另一个老式但有效的方法是利用concat函数的能力。concat是用来合并数组的，但可以借助apply方法将类数组对象作为参数传递，达到将类数组转换为数组的目的。

function myFunction() {

  let arr = Array.prototype.concat.apply([], arguments);
  return arr;
}

这段代码中，空数组[]作为concat函数的的初始值，然后把arguments对象合并到这个空数组中，从而得到一个新的数组。

总之，将类数组转为数组有多种方式，具体采用哪一个，可以根据代码环境的不同，如目标浏览器的兼容性需求、语法简洁性的偏好，以及是否需要额外映射处理等因素进行选择。随着JavaScript语言的不断发展，推荐使用更现代、简洁、功能更强的Array.from()方法和扩展运算符(…)。

相关问答FAQs：

Q1: JavaScript中，如何将类数组转为数组？

A1: 类数组对象指的是拥有类似数组结构（例如有索引和length属性）的非数组对象。在JavaScript中，我们可以使用以下方法将类数组转为数组：

1. Array.from()方法：这个方法可以将可迭代的对象（包括类数组对象）转为数组。例如，我们可以使用Array.from()将类数组对象转为数组：

   const arrayLike = { 0: 'hello', 1: 'world', length: 2 };
   const array = Array.from(arrayLike);
   console.log(array); // ['hello', 'world']
   

2. Array.prototype.slice.call()方法：这个方法使用数组原型对象的slice()方法，将类数组对象转为数组。例如：

   const arrayLike = { 0: 'hello', 1: 'world', length: 2 };
   const array = Array.prototype.slice.call(arrayLike);
   console.log(array); // ['hello', 'world']
   

3. 扩展运算符(…)：扩展运算符用于展开数组或可迭代对象。我们可以使用扩展运算符将类数组转为数组。例如：

   const arrayLike = { 0: 'hello', 1: 'world', length: 2 };
   const array = [...arrayLike];
   console.log(array); // ['hello', 'world']
   

总结一下，我们可以使用Array.from()、Array.prototype.slice.call()或扩展运算符将类数组对象转为数组。

Q2: 在JavaScript中，如何将一个类数组对象转为数组？

A2: 如果你有一个类数组对象，想要将其转为数组，可以尝试以下方法：

1. 使用Array.from()方法：Array.from()方法可以将可迭代的对象（包括类数组对象）转为数组。使用该方法传入类数组对象即可将其转为数组。

2. 使用Array.prototype.slice.call()方法：可以利用slice()方法的call()函数来将类数组对象转为数组。这个方法会返回一个新的数组，其中包含类数组对象的元素。

3. 使用扩展运算符(…)：JavaScript的扩展运算符可以用于展开数组或可迭代对象。通过在数组字面量或函数调用中使用扩展运算符，可以将类数组对象转为数组。

以上这些方法都可以将类数组对象转为数组，选择适合你的需求的方法即可。

Q3: 有没有方法可以在JavaScript中将类数组对象转为真正的数组？

A3: 是的，JavaScript提供了几种方法可以将类数组对象转为真正的数组：

1. 可以使用Array.from()方法：Array.from()方法可以将可迭代的对象（包括类数组对象）转为数组。只需将类数组对象传递给Array.from()即可将其转为真正的数组。

2. 也可以使用Array.prototype.slice.call()方法：通过调用slice()方法并使用call()函数，可以将类数组对象转为数组。这种方法将创建一个新的数组，其中包含类数组对象的元素。

3. 还可以使用扩展运算符(…)：JavaScript的扩展运算符可以将数组或可迭代对象展开。通过在数组字面量或函数调用中使用扩展运算符，可以将类数组对象转为数组。

这些方法都可以将类数组对象转为真正的数组，选择适合自己需求的方法即可。