JavaScript 作为一门动态语言，一直受到许多语言特性上的限制，尤其是数组的操作。为了解决这些限制，ES6 引入了许多新特性，比如模板字符串，解构赋值，箭头函数等。而在 ES7 中新增了一个新的静态函数——Array.from，该函数可以将类数组对象或可迭代对象转换为一个真正的数组。
Array.from 的用法
Array.from 函数接收两个参数：第一个参数 source，要转换的对象；第二个参数 mapFn，可选参数，对每个数组元素进行处理的函数。
---------------------- ------- ----------
Array.from 的例子
类数组对象
下面是一个常见的场景，需要将类数组对象转换为数组。可以直接传递类数组对象作为第一个参数给 Array.from，即可转换为一个数组。
----- --------- - - -- ---- -- ---- -- ---- ------- - -- ----- --- - ---------------------- -- --- - ----- ---- ----
可迭代对象
除了类数组对象，Array.from 还可以转换可迭代对象，可迭代对象可以是一个 Set、Map、String、Array 等类型。这里以 Set 类型为例：
----- --- - --- ------- -- ---- ----- --- - ---------------- -- --- - --- -- --
对元素进行处理
如果想对每个数组元素进行更高级、更复杂的处理，可以将处理函数传递给第二个参数 mapFn。 这个处理函数有两个参数：value 和 index，表示值和索引。然后，Array.from 会将每个元素逐个传递给这个函数进行处理，并将处理结果存储在新生成的数组中。
例如，将 Set 中每个数字乘以 2 并存储在数组中：
----- --- - --- ------- -- ---- ----- --- - --------------- ----- -- ----- - --- -- --- - --- -- --
与扩展运算符对比
那么，将一个可迭代对象转换为数组，Array.from 与 [...iterable]（扩展运算符）有什么区别呢？可以看下面的例子：
----- --------- - - -- ---- -- ---- -- ---- ------- - -- ----- ---- - ---------------------- ----- ---- - --------------- -- ---------- ----- --- - --- ------- -- ---- ----- ---- - ---------------- ----- ---- - ---------
扩展运算符只能用于可迭代对象，不能用于类数组对象；而 Array.from 既可以用于可迭代对象，也可以用于类数组对象。
类似数组的对象
有一些对象被称为“类似数组的对象”，它们看起来像一个数组，但是没有数组的方法（如 push、pop、slice 等）。在这些情况下，Array.from 的低效性可能会对性能产生负面影响，因为它通过一个 for 循环遍历。
可以使用 Array.from 的另一个变体，该变体同样接受一个映射函数，但是该函数放在可选参数之前，并且不接受源对象。相反，它将其索引作为第一个参数。例如，可以像这样使用 Array.from：
------------ ------- - -- --- -- -- --- -- --- -- -- -- --
这可能看起来很奇怪，但它实际上是很高效的。它通过自己的迭代生成一个数组或类数组对象（具有“0”到“length-1”属性的对象），然后连续地映射并返回该数组。这是一个更高效的解决方案，因为它不需要通过循环进行迭代。此方法适用于将带有 for 迭代器的循环转换为用于生成数组的映射。
总结
Array.from 函数是 ES7 中新增的静态函数，用于将类数组对象或可迭代对象转换为一个真正的数组。它的基本用法非常简单，只需要将需要转换的对象作为第一个参数传递给数组即可。同时，它可以选取一个可选参数 mapFn，用于对每个数组元素进行处理。在使用时，我们需要根据具体情况选择使用 Array.from 还是扩展运算符来达到最佳效果。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/64605828968c7c53b020d9f8