js 怎样用from将类数组对象转为真数组-js教程-PHP中文网

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

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

Array.from()

登录后复制

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

map

登录后复制

、

filter

登录后复制

）的对象时，

Array.from()

登录后复制

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

解决方案

要用

Array.from()

登录后复制

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

length

登录后复制

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

obj[0]

登录后复制

obj[1]

登录后复制

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

Symbol.iterator

登录后复制

接口），

Array.from()

登录后复制

就能对其进行操作。

最常见的场景就是处理 DOM

NodeList

登录后复制

、函数内部的

arguments

登录后复制

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

length

登录后复制

属性的对象。

基本用法示例：

转换

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));

登录后复制

转换

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

登录后复制

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

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

登录后复制

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

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），选择就更多了。它们各有特点，理解这些差异能帮助你选择最适合的工具。

```
[].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
```
  登录后复制
  、字符串），这是它一个非常大的优势。
展开运算符 (
```
...
```
登录后复制
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 引擎中，这些方法的性能差异通常可以忽略不计，不应成为选择的主要依据，除非你处理极其庞大的数据集。

总结一下：

Chromox

Chromox是一款领先的AI在线生成平台，专为喜欢AI生成技术的爱好者制作的多种图像、视频生成方式的内容型工具平台。

184

查看详情

```
Array.from()
```
登录后复制
是最通用和功能最丰富的选择，它能处理类数组和可迭代对象，并支持一步到位的数据转换。
展开运算符最简洁，但仅限于可迭代对象。
```
[].slice.call()
```
登录后复制
是老派但可靠的方法，主要用于兼容性要求高的类数组转换。

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

Array.from()

登录后复制

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

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

Array.from()

登录后复制

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

进阶用法：

快速生成特定长度和内容的数组： 这个用法非常巧妙，你不需要一个实际的“类数组对象”，只需要一个带有
```
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
```
登录后复制
。

处理

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']

登录后复制

使用

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

登录后复制

常见误区：

不是所有对象都能被转换：
```
Array.from()
```
登录后复制
并不是万能的。它要求传入的对象要么是“类数组”（有
```
length
```
登录后复制
属性和索引），要么是“可迭代对象”（实现了
```
Symbol.iterator
```
登录后复制
接口）。如果你传入一个普通的对象，它既没有
```
length
```
登录后复制
属性也没有迭代器，那么
```
Array.from()
```
登录后复制
会返回一个空数组。
```
const plainObject = { a: 1, b: 2 };
const result = Array.from(plainObject);
console.log(result); // [] (因为 plainObject 既不是类数组也不是可迭代对象)
```
登录后复制
浅拷贝的陷阱： 和许多其他数组创建方法一样，
```
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
```
登录后复制
等）。
与
```
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()
```
登录后复制
是“创建...的”。