ES6 中如何使用 Array.from 进行数组转换
在现代前端开发中，处理数组是日常工作之一。在 JavaScript 中，Array.from 是一个非常实用的数组转换方法，它可以将一个类数组对象或可迭代对象转换为一个新的数组实例。本文将详细讲解 ES6 中如何使用 Array.from 进行数组转换，并通过示例代码演示其使用方法。
为什么要使用 Array.from？
在 ES6 之前，我们处理数组通常使用的方法是 Array.prototype.slice。然而，slice 方法只能用于可索引的类数组对象。如果我们需要将一个 Map 或 Set 转换为数组，或者处理一个跨越多个窗口或帧的 NodeList，slice 方法就无法胜任。因此，Array.from 的出现便提供了一个非常便捷的方法，可以将各种类型的对象转换为数组，使我们的开发变得更加高效。
Array.from 的基本用法
Array.from 接收一个类数组对象或可迭代对象，返回一个新数组实例。具体语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
其中，arrayLike 表示被转换的类数组对象或可迭代对象，并且必须传递。mapFn 是一个可选的回调函数，用于对每个元素进行处理。thisArg 是 mapFn 函数的 this 值，也是一个可选参数。下面分别看一下这三个参数的用法。
- arrayLike
arrayLike 表示被转换为数组的类数组对象或可迭代对象。例如，我们可以将一个字符串转换为一个字符数组，示例代码如下：
const str = "hello"; const arr = Array.from(str); console.log(arr); // ["h", "e", "l", "l", "o"]
我们也可以将一个 NodeList 转换为一个数组，示例代码如下：
const nodeList = document.querySelectorAll("p");
const arr = Array.from(nodeList);
console.log(arr); // [p, p, p, ...]- mapFn
mapFn 是一个可选的回调函数，用于对每个元素进行处理。例如，我们可以将一个数组中的所有元素进行加倍操作，示例代码如下：
const arr = [1, 2, 3, 4]; const doubled = Array.from(arr, item => item * 2); console.log(doubled); // [2, 4, 6, 8]
在这个例子中，我们使用箭头函数对每个元素进行了乘以 2 的处理。
- thisArg
thisArg 是 mapFn 函数的 this 值，也是一个可选参数。例如，我们可以将一个数组中的所有元素转化为一个对象，并设置对象的属性值，示例代码如下：
-- -------------------- ---- -------
----- --- - ----- ---- -----
----- --- - -
--------------- -
------ ---- - ------------
--
------- ---
--
----- ------ - --------------- -------------- -----
-------------------- -- ------ ----- -----在这个例子中，我们使用了一个自定义的 addSuffix 函数，将原数组中的每个元素转换为对象属性值，并添加了一个后缀。通过 Array.from 的第三个参数，我们将 this 指向了 obj 对象，使得 addSuffix 函数能够访问到 obj 对象的属性值。
总结
Array.from 是一个功能强大的数组转换方法，能够将各种类型的对象转换为数组。在处理跨窗口或帧的 NodeList、Map 或 Set 时，Array.from 会更加方便和高效。本文介绍了 Array.from 的基本用法，并通过示例代码演示了如何使用 mapFn 和 thisArg。在实际开发中，Array.from 可以帮助我们提高开发效率，减少代码量，让代码更加清晰易懂。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c8c4465ad90b6d0414a2d4