ES6 在 JavaScript 中引入了许多新特性和 API，其中 Array.from 方法就是一个有用的工具。它可以将可迭代对象（比如数组、字符串、Map 等）转换成一个新的数组。在本文中，我们将会详细介绍 Array.from 方法的语法、用法和一些常见示例。
语法
Array.from 方法的语法如下：
Array.from(iterable[, mapFn[, thisArg]])
可以看到，Array.from 方法接受三个参数：
iterable：必需，一个要转换成数组的可迭代对象。mapFn：可选，一个可选的函数，用于对数组中的每一项进行处理。thisArg：可选，执行mapFn函数时this的值。
值得注意的是，如果 mapFn 函数被提供了，系统会在每次迭代时调用它一次，而不是每次添加到结果数组时调用它一次。如果需要在完成结果数组后对结果进行后处理，则可以使用 Array.prototype.map() 方法来替代 mapFn 函数。
用法
Array.from 方法最常见的用法是将字符串或类数组对象转换为数组，如下所示：
const str = 'hello world'; const arr = Array.from(str); console.log(arr); // ['h', 'e', 'l', 'l', 'o', ' ', 'w', 'o', 'r', 'l', 'd']
同样，我们也可以使用 Array.from 方法将类数组对象转换成真正的数组。比如，对于我们在 DOM 操作中经常遇到的 NodeList 类型，Array.from 方法可以将其转换成数组：
const nodeList = document.querySelectorAll('p');
const arr = Array.from(nodeList);我们还可以通过传递一个映射函数来对返回的数组进行处理：
const str = '12345'; const arr = Array.from(str, (x) => x * 2); console.log(arr); // [2, 4, 6, 8, 10]
这个例子将字符串 '12345' 转换成了一个数组 [1, 2, 3, 4, 5]，然后对每个元素进行了处理，得到了一个新数组 [2, 4, 6, 8, 10]。
常见示例
将 Set 转换成数组
Set 是 ES6 中引入的一种新的数据结构，它是一组唯一的值的集合。如果我们希望将一个 Set 转换成数组，就可以使用 Array.from 方法。
const set = new Set([1, 2, 3]); const arr = Array.from(set); console.log(arr); // [1, 2, 3]
将 Map 转换成数组
Map 是一种键值对的集合，我们可以使用 Array.from 方法将其转换成一个数组。在转换的过程中，我们可以使用映射函数来选择只转换 Map 中的某些值。
const map = new Map([['a', 1], ['b', 2], ['c', 3]]);
const arr = Array.from(map, ([key, value]) => ({ key, value }));
console.log(arr); // [{key: 'a', value: 1}, {key: 'b', value: 2}, {key: 'c', value: 3}]将类数组对象转换成数组
在对 DOM 操作中，我们经常需要将 NodeList 类型的对象转换成数组。Array.from 方法可以轻松实现这个功能。
const nodeList = document.querySelectorAll('p');
const arr = Array.from(nodeList);
console.log(arr);总结
通过本文的介绍，我们了解了 ES6 中 Array.from 方法的语法和用法，并且学习了一些常见的示例。Array.from 方法是在日常前端开发中非常实用的方法，它可以让我们更加快捷地处理和转换不同类型的数据。在实际开发中，我们应当灵活运用 Array.from 方法，使前端开发变得更加高效和简单。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/6540a97d7d4982a6eba2f5d5