ES2021 中的数组方法 Array.from()—— 从基础入手，一步步学习
随着 JavaScript 语言的不断发展和更新，ES2021 中新增加的数组方法 Array.from() 为我们提供了一种更加简洁和灵活的方式来创建新数组。在本文中，我们将在深入研究该方法的语法和用法的基础上，通过实例代码演示如何使用该方法来提高代码效率。
一、方法介绍
Array.from() 方法是将一个类数组对象或者可迭代对象转换为一个真正的数组，其语法如下：
Array.from(arrayLike[, mapFn[, thisArg]])
其中，参数 arrayLike 为必选项，它可以是类数组对象或者可迭代对象；参数 mapFn 是一个可选的映射函数，用于对每个元素进行处理；参数 thisArg 是可选的，用于指定 mapFn 函数中的 this 值。
Array.from() 方法返回一个新的数组对象，该数组对象由参数 arrayLike 转换而来，且每个元素都经过了可选的映射处理，具体示例如下：
const arrayLike = { 0: 'a', 1: 'b', length: 2 };
// 通过 Array.from() 转换为数组
const arr = Array.from(arrayLike);
console.log(arr); // ['a', 'b']从上述示例中可以看出，Array.from() 方法可以将一个类数组对象 { 0: 'a', 1: 'b', length: 2 } 转换为一个真正的数组 ['a', 'b']。接下来，我们将深入探究该方法的更多用法。
二、指定映射函数
Array.from() 方法还可以接收一个可选的映射函数参数 mapFn，用于对数组中的每个元素进行处理。具体示例如下：
const arr = ['a', 'b', 'c']; // 将数组中的每个元素都转为大写，生成新的数组 const upperArr = Array.from(arr, letter => letter.toUpperCase()); console.log(upperArr); // ['A', 'B', 'C']
在上面的示例中，我们使用 mapFn 函数将数组中的每个元素都转换为大写字母。同样，我们还可以通过映射函数来进行类似的操作。
三、指定 this 值
Array.from() 方法的第三个可选参数 thisArg 用于指定 mapFn 函数中的 this 值。具体示例代码如下：
-- -------------------- ---- -------
----- --- - ----- ---- -----
-- -------- ---- -
----- ------- - -
------------ -
------ ------------------
-
--
----- -------- - --------------- ---------------- -
------ ---------------------
-- ---------
---------------------- -- ----- ---- ----从上面的示例中可以看出，我们可以使用 thisArg 参数来自定义映射函数中的 this 值，并对数组中的每个元素进行处理。
四、使用迭代器
除了类数组对象和真正的数组之外，Array.from() 方法还可以将具有迭代器协议的对象和字符串转换为数组。具体示例如下：
-- -------------------- ---- ------- -- --------- ----- --- - ------- ------- ----- ---- - ---------------- ------------------ -- ----- ---- ---- ---- ---- ---- - -- ---- ---- ---- ---- ---- -- - --- ----- ----- --- - --- ------- -- ---- ----- ---- - ---------------- ------------------ -- --- -- -- -- - --- ----- ----- --- - --- ------------- ------- ------- ------ ----- ---- - ---------------- ------------------ -- --------- ------- ------- ----
从上述示例中可以看出，我们可以直接对字符串、Set、Map 等可迭代对象使用 Array.from() 方法进行转换操作，相对于手动遍历处理对象，该方法更加高效和便捷。
五、总结
通过本文对 ES2021 中的数组方法 Array.from() 的介绍和示例代码的演示，我们可以发现：该方法具备灵活、高效的特点，能够极大地提高代码的效率和可读性。因此，我们应当深入研究该方法，尝试在实际开发中进行应用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65b0e6f4add4f0e0ffa3f368