ES10 中的 .map() 方法详解及实战应用
在前端开发中，处理数组是一项很常见的任务，而 .map() 方法是处理数组时经常使用的一种方法。ES10 中的 .map() 方法在之前版本的基础上进行了升级，提供了更加强大和方便的功能。本文将详细讲解 ES10 中的 .map() 方法，并提供实战应用和示例代码。
基本语法和用法
.map() 方法是对数组中的每个元素进行操作，并返回一个新的数组。语法如下：
array.map((currentValue, index, arr) => {
// 处理并返回每个元素的值
}, thisArg)其中，array 是要进行操作的数组，(currentValue, index, arr) 表示传入的处理函数，thisArg 则是可选参数，表示传递给处理函数的 this 值。处理函数中可以对元素进行操作，并将处理后的值返回，新的数组会由 .map() 方法自动生成。
示例代码：
const arr = [1, 2, 3]; const newArr = arr.map((item) => item * 2); console.log(newArr); // [2, 4, 6]
新增功能
ES10 中的 .map() 方法在之前版本的基础上新增了一些强大的功能。
1. 可选参数 thisArg
ES10 中的 .map() 方法中，新增了可选参数 thisArg，可以在处理函数中定义 this 的值。
示例代码：
// www.javascriptcn.com code example
const obj = {
value: 2,
multiply: function (arr) {
return arr.map(function (item) {
return item * this.value;
}, this);
},
};
console.log(obj.multiply([1, 2, 3])); // [2, 4, 6]在上述代码中，我们定义了一个对象 obj，其中有一个属性 value，表示要进行乘法时的倍数。我们定义了一个 multiply 方法，其中使用 .map() 方法对传递进来的数组进行操作。我们在处理函数中使用了 this.value 来表示 value 的值，并且传递了 this 给 .map() 方法，使得 this 即为 obj 对象。结果返回了对传递进来的数组进行乘法后的新数组。
2. Array.from() 和 .map() 方法的结合使用
在ES6中，我们学习过 Array.from() 方法，该方法可以将“类数组对象”和可迭代对象转换为真正的数组。在 ES10 中，新增了 .map() 方法可以与 Array.from() 方法结合使用，将“类数组对象”和可迭代对象转换为真正的数组，并进行处理操作。
示例代码：
const str = 'hello'; const newStr = Array.from(str, (char) => char + 'z').map((item) => item.toUpperCase()); console.log(newStr); // ["Hz", "Ez", "Lz", "Lz", "Oz"]
在上述代码中，我们定义了一个字符串 str，使用 Array.from() 方法将其转换为一个由每个字符组成的数组。我们同时使用了一个处理函数，将每个字符末尾加上一个 z。接着使用 .map() 方法对新的数组进行操作，将每个字符串转换为大写字母。最终返回处理后的数组。
实战应用
1. 快速生成拥有序号的列表
通过使用 .map() 方法，我们可以快速生成拥有序号的列表。
示例代码：
<ul>
{['apple', 'banana', 'cherry', 'date'].map((item, index) => (
<li key={index}>{`${index + 1}. ${item}`}</li>
))}
</ul>在上述代码中，我们使用 .map() 方法对数组进行操作，生成一个列表。我们将处理函数中的 index 参数作为元素的序号，并生成一个新的列表。
2. 根据关键词搜索结果
通过使用 .map() 方法，我们可以根据关键词搜索数组中的结果。
示例代码：
const arr = ['apple', 'banana', 'cherry', 'date']; const keyword = 'a'; const results = arr.map((item) => item.includes(keyword)); console.log(results); // [true, true, false, true]
在上述代码中，我们定义了一个数组 arr，其中包含多个单词。我们搜索含有关键词 a 的结果，使用 .map() 方法对每个元素进行操作，判断是否包含 a。根据判断结果返回一个布尔值组成的新数组。
结语
通过学习本文，我们对 ES10 中的 .map() 方法有了更加深入的理解，同时也学习了一些实战应用。 .map() 方法是一个十分通用且便利的数组方法，可以快速地处理数据，提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c0531c314edc26846abcbc