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