JavaScript 数组方法 .map() 的 5 个使用场景

Array.prototype.map() 方法是 JavaScript 中的一个数组方法，它创建一个新数组，其结果是对调用数组中的每个元素执行提供的函数。

• .map() 函数用于遍历数组元素。它接受一个回调函数作为参数，根据回调函数返回一个新数组和新元素。

• .map() 方法是一个用来创建新数组、修改其内容并保持原始数组不变的通用方法。当出现需要修改现有数组的内容并将结果存储为新变量的时候就可以用。.map() 不会对原数组进行改造。

参数

callback（必须）：生成新数组元素的函数，接收三个参数：

currentValue：callback 数组中正在处理的当前元素。
index：可选，callback 数组中正在处理的当前元素的索引。
array：可选，map 方法调用的数组。
thisArg：可选，执行 callback 函数时值被用作 this 。

返回值

• 一个由原数组每个元素执行回调函数的结果组成的新数组。

当需要更新数组中的所有项并将其存储到一个新数组中时，.map() 方法就可以派上用场了。

使用场景包括但不限于：

1. 转换数组元素： 你可以使用 .map() 对数组中的每个元素进行转换。例如，将一个数字数组中的每个元素都乘以 2：

   const originalArray = [1, 2, 3, 4, 5];
   const doubledArray = originalArray.map(num => num * 2);
   // doubledArray 现在是 [2, 4, 6, 8, 10]
   

2. 提取属性： 如果数组中的每个元素是对象，你可以使用 .map() 提取对象的特定属性：

   const users = [
     { id: 1, name: 'Alice' },
     { id: 2, name: 'Bob' },
     { id: 3, name: 'Charlie' }
   ];
   
   const userIds = users.map(user => user.id);
   // userIds 现在是 [1, 2, 3]
   

3. 生成 JSX 或其他模板： 在 React 或类似的库中，你可能会使用 .map() 来生成 JSX 元素：

   const names = ['Alice', 'Bob', 'Charlie'];
   
   const nameList = names.map((name, index) => <li key={index}>{name}</li>);
   // nameList 是包含 <li> 元素的数组
   

4. 过滤数组： 将数组中的元素按照一定条件过滤：

   const numbers = [1, 2, 3, 4, 5];
   
   const evenNumbers = numbers.map(num => num * 2).filter(num => num % 2 === 0);
   // evenNumbers 现在是 [4, 8]
   

5. 过滤数组： 将字符串转换为数组：

   const language = "China";
   const map = Array.prototype.map;
   const letters = map.call(language, (eachLetter) => `${eachLetter}`);
   
   console.log(letters); // [ 'C', 'h', 'i', 'n', 'a' ]
   

总体来说，.map() 是一个非常灵活的方法，适用于对数组中的每个元素进行处理，生成新的数组。