js 怎样用from将类数组对象转为真数组

array.from() 可将类数组或可迭代对象转换为真数组，1. 它通过识别对象的 length 属性和索引或 symbol.iterator 接口实现转换；2. 常用于处理 nodelist、arguments 或自定义类数组对象；3. 支持第二个参数映射函数，实现转换时同步处理元素；4. 与 […spread] 相比能处理不可迭代的类数组，与 slice.call 相比语法更清晰且支持映射；5. 可生成指定长度数组、转换 set/map、结合 thisarg 使用；6. 注意仅适用于类数组或可迭代对象，对普通对象返回空数组，且为浅拷贝，需警惕引用共享问题，同时不可与 array.of() 混淆，后者用于创建新数组而非转换结构。

Array.from()

是 JavaScript 中一个非常实用的方法，它能将类数组对象或可迭代对象（Iterable）高效地转换成一个真正的数组实例。简单来说，当你拿到一个看起来像数组但又不能直接调用数组方法（比如

map

、

filter

）的对象时，

Array.from()

就是你的救星，它会创建一个全新的、浅拷贝的数组。

解决方案

要用

Array.from()

将类数组对象转为真数组，核心在于理解它如何识别“类数组”或“可迭代”对象。一个对象只要具备

length

属性和可访问的索引（比如

obj[0]

,

obj[1]

），或者它是一个可迭代对象（实现了

Symbol.iterator

接口），

Array.from()

就能对其进行操作。

最常见的场景就是处理 DOM

NodeList

、函数内部的

arguments

对象，或者你自己构造的带有

length

属性的对象。

基本用法示例：

1. 转换

   NodeList

   (DOM元素集合): 当你通过

   document.querySelectorAll()

   获取到一组元素时，得到的是一个

   NodeList

   ，它不是一个真正的数组。

   const divs = document.querySelectorAll('div'); // 这是一个NodeList const divArray = Array.from(divs); // 现在divArray就是一个真数组了  // 可以在divArray上使用所有数组方法 divArray.forEach(div => console.log(div.textContent));

2. 转换

   arguments

   对象: 在函数内部，

   arguments

   是一个类数组对象，包含了函数调用时传入的所有参数。

   function sumAll() {     // arguments是一个类数组对象     const argsArray = Array.from(arguments);     return argsArray.reduce((acc, val) => acc + val, 0); }  console.log(sumAll(1, 2, 3, 4)); // 输出 10

3. 转换自定义的类数组对象: 只要你的对象有

   length

   属性和索引元素，

   Array.from()

   就能处理。

   const myCollection = {     0: 'apple',     1: 'banana',     2: 'orange',     length: 3 };  const fruits = Array.from(myCollection); // ['apple', 'banana', 'orange'] console.log(fruits instanceof Array); // true

4. 结合映射函数进行转换和处理：

   Array.from()

   的第二个参数是一个映射函数（

   mapFn

   ），这让它在转换的同时还能对每个元素进行处理。这功能非常强大，省去了先转换再

   map

   的步骤。

   const numbers = Array.from({ length: 5 }, (_, i) => i * 2); // 生成 [0, 2, 4, 6, 8] // 第一个参数是 { length: 5 }，一个简单的类数组对象 // 第二个参数是映射函数，_ 表示当前元素（这里是 undefined），i 是索引  const stringLengths = Array.from('hello', char => char.charCodeAt(0)); // 将字符串（可迭代）转换为字符的ASCII码数组 [104, 101, 108, 108, 111]

为什么我们需要将类数组对象转换为真数组？

这问题问得好，因为这确实是 JavaScript 开发中一个很常见的痛点。我们之所以执着于把类数组对象变成“真”数组，最核心的原因就是方法缺失。你想想，当你拿到一个

NodeList

或者

arguments

对象时，你没法直接调用

map

、

filter

、

reduce

甚至是

forEach

（虽然

NodeList

和

arguments

有时会有

forEach

，但那不是

Array.prototype.forEach

，行为上可能存在细微差异或兼容性问题），更别提

sort

、

slice

、

splice

这些功能强大的数组方法了。

这就好像你买了一辆车，它看起来像车，开起来也像车，但它没有方向盘、没有刹车、没有油门，你只能看着它。类数组对象就是这样，它们有

length

属性，有索引，让你觉得它们是数组，但它们没有继承

Array.prototype

上的那些好用方法。

所以，转换为真数组，就是为了解锁这些原生数组方法，让数据处理变得更灵活、更符合直觉。一旦它们变成了真数组，你就可以用链式调用 (

.map(...).filter(...).reduce(...)

) 来进行复杂的数据转换和聚合，代码也会变得更简洁、更具表达力。这在我看来，是提高开发效率和代码可读性的关键一步。

Array.from() 与其他转换方法的区别在哪里？

在

Array.from()

出现之前，我们处理类数组对象主要有两种方式，现在有了

Array.from()

和 ES6 的展开运算符（Spread Syntax），选择就更多了。它们各有特点，理解这些差异能帮助你选择最适合的工具。

1. [].slice.call(arrayLikeObject)

   (经典方法): 这是 ES6 之前最常用的转换技巧。它的原理是“借用”

   Array.prototype.slice

   方法。

   slice

   方法在没有参数时，会返回原数组的一个浅拷贝。通过

   call

   方法，我们将

   this

   上下文指向类数组对象，从而让

   slice

   像处理数组一样处理它。

   const divs = document.querySelectorAll('div'); const divArrayOld = [].slice.call(divs);

   区别：

   • 简洁性：

     Array.from()

     更直观，意图更明确。

     [].slice.call()

     看起来有点像“黑魔法”，需要理解

     call

     的作用和

     slice

     的行为。

   • 功能：

     Array.from()

     可以直接传入映射函数，实现转换和映射一步到位。

     slice.call

     只能做转换，如果需要映射，还得再跟一个

     map

     方法。

   • 兼容性：

     Array.from()

     是 ES6 新增的，IE 浏览器需要 Polyfill。

     slice.call

     兼容性更好。

   • 可迭代对象：

     slice.call

     只能处理类数组对象（有

     length

     和索引），而

     Array.from()

     还能处理任何可迭代对象（如

     Set

     、

     map

     、字符串），这是它一个非常大的优势。

2. 展开运算符 (

   ...

   Spread Syntax): 如果类数组对象是可迭代的（比如

   NodeList

   、字符串、

   Set

   、

   map

   ），你也可以使用展开运算符将其转换为数组。

   const divs = document.querySelectorAll('div'); const divArraySpread = [...divs];  const mySet = new Set([1, 2, 3]); const setArray = [...mySet]; // [1, 2, 3]

   区别：

   • 简洁性： 展开运算符无疑是最简洁的语法，非常直观。
   • 功能： 同样，展开运算符只能做转换，不能像

     Array.from()

     那样直接集成映射功能。

   • 限制： 展开运算符只能用于可迭代对象。对于只有

     length

     属性和索引但不可迭代的自定义类数组对象（例如上面

     myCollection

     的例子，除非你手动给它添加

     Symbol.iterator

     ），展开运算符是无效的。而

     Array.from()

     依然可以处理。

   • 性能： 在大多数现代 JavaScript 引擎中，这些方法的性能差异通常可以忽略不计，不应成为选择的主要依据，除非你处理极其庞大的数据集。

总结一下：

• Array.from()

  是最通用和功能最丰富的选择，它能处理类数组和可迭代对象，并支持一步到位的数据转换。

• 展开运算符最简洁，但仅限于可迭代对象。

• [].slice.call()

  是老派但可靠的方法，主要用于兼容性要求高的类数组转换。

我个人在写新代码时，会优先考虑

Array.from()

，因为它功能全面且语义清晰。如果只是简单的可迭代对象转换，展开运算符的简洁性也很吸引人。

Array.from() 的进阶用法和常见误区有哪些？

Array.from()

确实是个多面手，但用起来也有些地方需要注意，避免踩坑。

进阶用法：

1. 快速生成特定长度和内容的数组： 这个用法非常巧妙，你不需要一个实际的“类数组对象”，只需要一个带有

   length

   属性的对象，就能利用

   Array.from()

   和它的映射函数来生成数组。这比

   new Array(length).fill(value)

   结合

   map

   更加简洁。

   // 生成一个包含1到10数字的数组 const numbers = Array.from({ length: 10 }, (_, i) => i + 1); console.log(numbers); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]  // 生成一个包含指定字符重复次数的数组 const repeatedChars = Array.from({ length: 5 }, () => 'X'); console.log(repeatedChars); // ['X', 'X', 'X', 'X', 'X']

   这里

   _

   (下划线) 是一个常见的约定，表示我们不关心映射函数接收到的第一个参数（即

   Array.from

   从

   { length: N }

   中取出的

   undefined

   值），只关心索引

   i

   。

2. 处理

   Set

   和

   map

   对象：

   Set

   和

   map

   都是可迭代对象，

   Array.from()

   可以直接将它们转换为数组。这在需要对

   Set

   或

   map

   的内容进行数组操作时非常有用。

   const uniqueIds = new Set([101, 105, 103, 101]); const idArray = Array.from(uniqueIds); // [101, 105, 103]  const userMap = new Map([['id', 1], ['name', 'Alice']]); const mapEntries = Array.from(userMap); // [['id', 1], ['name', 'Alice']] const mapKeys = Array.from(userMap.keys()); // ['id', 'name'] const mapValues = Array.from(userMap.values()); // [1, 'Alice']

3. 使用

   thisArg

   参数：

   Array.from()

   的第三个参数是

   thisArg

   ，它允许你为映射函数指定

   this

   的值。这在映射函数是一个对象方法时特别有用。

   const converter = {     prefix: 'item-',     convert(value, index) {         return this.prefix + value + '-' + index;     } };  const data = [1, 2, 3]; const convertedData = Array.from(data, converter.convert, converter); console.log(convertedData); // ["item-1-0", "item-2-1", "item-3-2"] // 如果没有第三个参数 converter，converter.convert 内部的 this 会是 undefined

常见误区：

1. 不是所有对象都能被转换：

   Array.from()

   并不是万能的。它要求传入的对象要么是“类数组”（有

   length

   属性和索引），要么是“可迭代对象”（实现了

   Symbol.iterator

   接口）。如果你传入一个普通的对象，它既没有

   length

   属性也没有迭代器，那么

   Array.from()

   会返回一个空数组。

   const plainObject = { a: 1, b: 2 }; const result = Array.from(plainObject); console.log(result); // [] (因为 plainObject 既不是类数组也不是可迭代对象)

2. 浅拷贝的陷阱： 和许多其他数组创建方法一样，

   Array.from()

   执行的是浅拷贝。这意味着如果原始对象或可迭代对象中包含引用类型（如其他对象或数组），那么新数组中存储的将是这些引用，而不是它们的副本。修改新数组中的引用类型元素，会影响到原始数据。

   const originalArray = [{ id: 1 }, { id: 2 }]; const newArray = Array.from(originalArray);  newArray[0].id = 99; console.log(originalArray[0].id); // 99 (原始数组的元素也被修改了)

   如果需要深拷贝，你需要自己实现一个深拷贝逻辑，或者使用像

   JSON.parse(JSON.stringify(obj))

   这样的方式（但它有局限性，比如不能处理函数、

   undefined

   、

   Symbol

   等）。

3. 与

   Array.of()

   的混淆：

   Array.from()

   和

   Array.of()

   名字有点像，但功能完全不同。

   Array.of()

   是用来根据传入的参数创建一个新的数组实例，它解决了

   new Array()

   在传入单个数字参数时的歧义问题。

   // Array.from() 转换现有结构 Array.from('abc'); // ['a', 'b', 'c']  // Array.of() 根据参数创建新数组 Array.of(1, 2, 3); // [1, 2, 3] Array.of(7);      // [7] (而 new Array(7) 会创建一个长度为7的空数组)

   记住，

   Array.from()

   是“从…来”，

   Array.of()

   是“创建…的”。

掌握这些进阶用法和避开常见误区，能让你更自如、更高效地运用

Array.from()

处理 JavaScript 中的各种数据结构。