JavaScript from 关键字
最后修改于 2025 年 4 月 16 日
在本文中，我们探讨 JavaScript 中的 Array.from() 方法。它从类似数组或可迭代对象创建新数组。
from 关键字
Array.from() 是一个静态方法，它从类似数组或可迭代对象创建一个新的数组实例。它在 ES6 中引入，提供了一种更简洁的方式将对象转换为数组。
该方法接受三个参数：源对象，一个可选的映射函数，以及一个可选的用于映射函数的 this 值。它适用于 NodeLists、字符串、Sets、Maps 和类似数组的对象等对象。
与展开运算符不同，Array.from() 可以处理没有迭代器方法的类似数组的对象。它对于 DOM 操作和处理函数参数特别有用。
Array.from() 的基本用法
Array.from() 最简单的用法是将类似数组的对象转换成数组。
const str = 'hello'; const arr = Array.from(str); console.log(arr);
此示例将一个字符串转换成字符数组。每个字符成为新数组中的一个元素。原始字符串保持不变。
$ node main.js [ 'h', 'e', 'l', 'l', 'o' ]
带映射函数的 Array.from()
Array.from() 可以接受一个映射函数作为其第二个参数。
const nums = Array.from([1, 2, 3], x => x * 2); console.log(nums);
在这里，我们在转换过程中将每个元素加倍。在将每个元素添加到新数组之前，将映射函数应用于该元素。这比在创建之后进行映射更有效。
$ node main.js [ 2, 4, 6 ]
将 Set 转换为数组
Array.from() 可以将 Set 对象转换为数组。
const mySet = new Set([1, 2, 3, 3, 4]); const uniqueArr = Array.from(mySet); console.log(uniqueArr);
此示例演示了通过将 Set 转换为数组来删除重复项。生成的数组仅包含唯一值。重复的 3 被删除。
$ node main.js [ 1, 2, 3, 4 ]
使用 NodeLists
Array.from() 常用 于将 NodeLists 转换为数组。
// In a browser environment:
// const divs = document.querySelectorAll('div');
// const divArray = Array.from(divs);
// For demonstration:
const fakeNodeList = { 0: 'div1', 1: 'div2', length: 2 };
const nodeArray = Array.from(fakeNodeList);
console.log(nodeArray);
这展示了如何将 DOM NodeLists 转换为数组，以便更容易地操作。然后可以使用 map 和 filter 等数组方法。该示例使用一个模拟的 NodeList 进行演示。
$ node main.js [ 'div1', 'div2' ]
从具有 length 属性的对象创建数组
Array.from() 可以从具有 length 属性的对象创建数组。
const obj = { length: 5 };
const arr = Array.from(obj, (v, i) => i * 2);
console.log(arr);
在这里，我们仅使用一个具有 length 属性的对象来创建偶数数组。映射函数接收值和索引。索引用于生成值，因为源对象没有值。
$ node main.js [ 0, 2, 4, 6, 8 ]
Array.from() vs 展开运算符
比较 Array.from() 和展开运算符。
const str = 'hello'; const arrFrom = Array.from(str); const arrSpread = [...str]; console.log(arrFrom); console.log(arrSpread);
这两种方法都将字符串转换为数组，但 Array.from() 适用于更多类型的对象。展开运算符要求对象是可迭代的，而 Array.from() 也适用于类似数组的对象。
$ node main.js [ 'h', 'e', 'l', 'l', 'o' ] [ 'h', 'e', 'l', 'l', 'o' ]
实际用例：生成序列
Array.from() 可以高效地生成数字序列。
const range = (start, stop, step) =>
Array.from({ length: (stop - start) / step + 1 },
(_, i) => start + (i * step));
console.log(range(0, 10, 2));
此示例从 start 到 stop 创建一个数字范围，并给出 step。长度根据参数计算。映射函数生成序列中的每个值。
$ node main.js [ 0, 2, 4, 6, 8, 10 ]
来源
在本文中，我们演示了如何使用 Array.from() 方法从 JavaScript 中的各种来源创建数组。