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
属性的对象。
基本用法示例：
转换
NodeList
(DOM元素集合):当你通过
document.querySelectorAll()
获取到一组元素时，得到的是一个
NodeList
，它不是一个真正的数组。
const divs = document.querySelectorAll('div'); // 这是一个NodeListconst 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 引擎中，这些方法的性能差异通常可以忽略不计，不应成为选择的主要依据，除非你处理极其庞大的数据集。
总结一下：
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()
是“创建…的”。
掌握这些进阶用法和避开常见误区，能让你更自如、更高效地运用
Array.from()
处理 JavaScript 中的各种数据结构。
以上就是js 怎样用from将类数组对象转为真数组的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1513952.html
微信扫一扫 
支付宝扫一扫 
