npm 包 array.from 使用教程-JavaScript中文网-JavaScript教程资源分享门户

在开发前端项目的时候，我们常常需要对数组进行操作和处理，例如将数组的元素进行筛选、排序、去重等操作。其中，JavaScript 的内置对象 Array 提供了很多处理数组元素的方法，如 map、filter、reduce 等。但是在实际场景中，我们有时需要将容器转换为数组进行操作，这时候就需要使用 npm 包中的 array.from 方法。

什么是 array.from？

array.from 是一个函数，它可以将类数组对象或可迭代对象转换为真正的数组。通俗的讲，就是将一些数据集合转换为数组，以方便进行相关操作。

array.from 的语法

array.from 接受两个参数：第一个参数是要转换的对象，可以是类数组或可迭代对象；第二个参数是一个 map 函数，如果有的话，会将每个元素传入此函数进行处理。map 函数可选。

语法如下：

Array.from(obj[, mapFn[, thisArg]])

obj：必选，要转换的对象。
mapFn：可选，map 函数，对 obj 中的每个元素进行处理。
thisArg：可选，map 函数的 this 对象。

array.from 的示例

下面我们通过一些实例来更好的理解 array.from 的用法，这里以类数组对象和可迭代对象为例进行说明。

类数组对象转换为数组

let arrayLikeObj = {0: "foo", 1: "bar", 2: "baz", length: 3}
let arr = Array.from(arrayLikeObj)
console.log(arr) // ["foo", "bar", "baz"]

可以看到，将一个有 length 属性的类数组对象转换为了真正的数组。

可迭代对象转换为数组

-- -------------------- ---- -------
--------- ----------------------- ---- -
  --- ---- - - ------ - -- ---- ---- -
    ----- -
  -
-

--- -------- - ------------------- --
--- --- - --------------------
---------------- -- --- -- -- -- --展开代码

这里使用了生成器函数，生成了一个可迭代对象 sequence，然后使用 array.from 将其转换为了数组。

使用 map 函数处理元素

let arrayLikeObj = {0: "foo", 1: "bar", 2: "baz", length: 3}
let arr = Array.from(arrayLikeObj, function(item){ 
  return item.toUpperCase() 
})
console.log(arr) // ["FOO", "BAR", "BAZ"]

通过第二个参数传递一个处理函数，在转换的过程中对每个元素进行了处理，如将每个元素转换为大写。

使用 map 函数和 thisArg

let arrayLikeObj = {0: "foo", 1: "bar", 2: "baz", length: 3}
let obj = {mapFn: function(item){
  return this.prefix + item
}, prefix: 'm&'}
let arr = Array.from(arrayLikeObj, obj.mapFn, obj)
console.log(arr) // ["m&foo", "m&bar", "m&baz"]

传递了一个 thisArg 参数，将处理函数中的 this 明确指定为了一个对象。

结语

array.from 作为 npm 包的一个方法，用来将类数组对象或可迭代对象转换为数组进行操作，在前端开发中非常实用。本文针对 array.from 的用法及示例进行了详细的讲解，期望能够对读者有所帮助。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/107603

npm 包 array.from 使用教程