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 值。具体示例代码如下：
const arr = ['a', 'b', 'c'];
// 指定映射函数中的 this 值
const context = {
toUpper(str) {
return str.toUpperCase();
}
};
const upperArr = Array.from(arr, function(letter) {
return this.toUpper(letter);
}, context);
console.log(upperArr); // ['A', 'B', 'C']从上面的示例中可以看出，我们可以使用 thisArg 参数来自定义映射函数中的 this 值，并对数组中的每个元素进行处理。
四、使用迭代器
除了类数组对象和真正的数组之外，Array.from() 方法还可以将具有迭代器协议的对象和字符串转换为数组。具体示例如下：
// 将字符串转换为数组 const str = 'hello, world'; const arr1 = Array.from(str); console.log(arr1); // ['h', 'e', 'l', 'l', 'o', ',', ' ', 'w', 'o', 'r', 'l', 'd'] // 将 Set 转换为数组 const set = new Set([1, 2, 3]); const arr2 = Array.from(set); console.log(arr2); // [1, 2, 3] // 将 Map 转换为数组 const map = new Map([['name', 'Tom'], ['age', 18]]); const arr3 = Array.from(map); console.log(arr3); // [['name', 'Tom'], ['age', 18]]
从上述示例中可以看出，我们可以直接对字符串、Set、Map 等可迭代对象使用 Array.from() 方法进行转换操作，相对于手动遍历处理对象，该方法更加高效和便捷。
五、总结
通过本文对 ES2021 中的数组方法 Array.from() 的介绍和示例代码的演示，我们可以发现：该方法具备灵活、高效的特点，能够极大地提高代码的效率和可读性。因此，我们应当深入研究该方法，尝试在实际开发中进行应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b0e6f4add4f0e0ffa3f368