JavaScript Array.from() 方法
最后修改于 2025 年 4 月 4 日
在本文中，我们将展示如何使用 JavaScript 中的 Array.from 方法从类似数组的对象创建数组。
Array.from() 方法
Array.from 方法从类似数组或可迭代对象创建一个新的、浅拷贝的 Array 实例。它提供了一种将不是数组的对象转换为可以使用数组方法的适当数组的方法。
此方法特别适用于处理 DOM 集合、arguments 对象、字符串和其他可迭代对象。原始对象保持不变，并返回一个包含转换后元素的新数组。
Array.from 方法可以接受一个可选的映射函数和 thisArg 参数。这允许在转换过程中转换元素。该方法是在 ES6 中引入的，以便更方便地处理类似数组的对象。
Array.from() 基本示例
以下示例演示了 Array.from 方法与字符串的基本用法。
const str = 'hello'; const arr = Array.from(str); console.log(str); // Original string unchanged console.log(arr); // New array created from string
我们将一个字符串转换为字符数组。每个字符都成为新数组中的一个元素。原始字符串不会被此操作修改。
$ node main.js hello [ 'h', 'e', 'l', 'l', 'o' ]
从 Set 创建数组
Array.from 方法可以将 Set 对象转换为数组。
const mySet = new Set([1, 2, 3, 3, 4, 5]); const arr = Array.from(mySet); console.log(mySet); // Original Set console.log(arr); // New array (duplicates removed)
我们从一个 Set 创建一个数组，这将自动删除重复的值。生成的数组仅包含原始 Set 中的唯一元素。
$ node main.js
Set(5) { 1, 2, 3, 4, 5 }
[ 1, 2, 3, 4, 5 ]
使用 map 函数和 Array.from()
Array.from 方法可以将映射函数作为第二个参数。
const arrLike = { length: 5 };
const arr = Array.from(arrLike, (v, i) => i * 2);
console.log(arr);
我们从一个具有 length 属性的类似数组的对象创建一个数组。映射函数在创建过程中转换每个元素。这里我们创建一个偶数数组。
$ node main.js [ 0, 2, 4, 6, 8 ]
从 arguments 对象创建数组
Array.from 方法对于转换函数中的 arguments 对象很有用。
function test() {
const args = Array.from(arguments);
console.log(args);
}
test(1, 2, 3, 'a', 'b');
在函数内部，我们将 arguments 对象转换为一个适当的数组。这允许对 arguments 使用 map、filter 或 reduce 等数组方法。
$ node main.js [ 1, 2, 3, 'a', 'b' ]
从 NodeList 创建数组
Array.from 方法通常用于转换 DOM NodeLists。
// In a browser environment:
// const divs = document.querySelectorAll('div');
// const divArray = Array.from(divs);
// For demonstration in Node.js:
const fakeNodeList = { 0: 'div1', 1: 'div2', length: 2 };
const nodeArray = Array.from(fakeNodeList);
console.log(nodeArray);
我们模拟将 NodeList 转换为数组。在实际的浏览器代码中，这允许对 DOM 集合使用数组方法。该示例即使在 Node.js 环境中也显示了这种模式。
$ node main.js [ 'div1', 'div2' ]
来源
在本文中，我们演示了如何使用 Array.from() 方法从 JavaScript 中的类似数组和可迭代对象创建数组。
作者
列出 所有 JS 数组函数。