在开发前端项目的时候，我们常常需要对数组进行操作和处理，例如将数组的元素进行筛选、排序、去重等操作。其中，JavaScript 的内置对象 Array 提供了很多处理数组元素的方法，如 map、filter、reduce 等。但是在实际场景中，我们有时需要将容器转换为数组进行操作，这时候就需要使用 npm 包中的 array.from 方法。
什么是 array.from？
array.from 是一个函数，它可以将类数组对象或可迭代对象转换为真正的数组。通俗的讲，就是将一些数据集合转换为数组，以方便进行相关操作。
array.from 的语法
array.from 接受两个参数：第一个参数是要转换的对象，可以是类数组或可迭代对象；第二个参数是一个 map 函数，如果有的话，会将每个元素传入此函数进行处理。map 函数可选。
语法如下：
---------------- ------- ----------
- obj：必选，要转换的对象。
- mapFn：可选，map 函数，对 obj 中的每个元素进行处理。
- thisArg：可选，map 函数的 this 对象。
array.from 的示例
下面我们通过一些实例来更好的理解 array.from 的用法，这里以类数组对象和可迭代对象为例进行说明。
类数组对象转换为数组
--- ------------ - --- ------ -- ------ -- ------ ------- -- --- --- - ------------------------ ---------------- -- ------- ------ ------
可以看到，将一个有 length 属性的类数组对象转换为了真正的数组。
可迭代对象转换为数组
--------- ----------------------- ---- -
--- ---- - - ------ - -- ---- ---- -
----- -
-
-
--- -------- - ------------------- --
--- --- - --------------------
---------------- -- --- -- -- -- --这里使用了生成器函数，生成了一个可迭代对象 sequence，然后使用 array.from 将其转换为了数组。
使用 map 函数处理元素
--- ------------ - --- ------ -- ------ -- ------ ------- -- --- --- - ------------------------ --------------- ------ ------------------ -- ---------------- -- ------- ------ ------
通过第二个参数传递一个处理函数，在转换的过程中对每个元素进行了处理，如将每个元素转换为大写。
使用 map 函数和 thisArg
--- ------------ - --- ------ -- ------ -- ------ ------- -- --- --- - ------- --------------- ------ ----------- - ---- -- ------- ----- --- --- - ------------------------ ---------- ---- ---------------- -- --------- -------- --------
传递了一个 thisArg 参数，将处理函数中的 this 明确指定为了一个对象。
结语
array.from 作为 npm 包的一个方法，用来将类数组对象或可迭代对象转换为数组进行操作，在前端开发中非常实用。本文针对 array.from 的用法及示例进行了详细的讲解，期望能够对读者有所帮助。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/107603