【转】[JavaScript] 数组的 map 用法

转自：kimi.ai

map 方法是数组的一个非常强大的方法，它用于创建一个新数组，新数组中的元素是调用一次提供的函数后的返回值。以下是其详细用法：

基本语法

JavaScript复制

array.map(function(currentValue[, index[, array]]) {
    // return element for new array, after executing something
}[, thisArg])

• array：要操作的数组。
• function：为数组中的每个元素执行的函数。
  • currentValue：当前正在处理的元素。
  • index（可选）：当前正在处理的元素的索引。
  • array（可选）：调用 map 方法的数组。
• thisArg（可选）：执行回调时使用的 this 值。

返回值

返回一个新数组，新数组的元素是调用一次提供的函数后的返回值。新数组的长度与原数组相同。

示例

1. 基本用法：对数组中的每个元素进行操作
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5];
   let squaredNumbers = numbers.map(function(num) {
       return num * num;
   });
   console.log(squaredNumbers); // [1, 4, 9, 16, 25]

2. 使用箭头函数简化代码
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5];
   let squaredNumbers = numbers.map(num => num * num);
   console.log(squaredNumbers); // [1, 4, 9, 16, 25]

3. 同时使用索引和数组参数
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5];
   let modifiedNumbers = numbers.map((num, index, arr) => {
       return num + index + arr.length;
   });
   console.log(modifiedNumbers); // [6, 7, 8, 9, 10]

4. 处理对象数组
   JavaScript复制

   let users = [
       { id: 1, name: 'Alice' },
       { id: 2, name: 'Bob' },
       { id: 3, name: 'Charlie' }
   ];
   let names = users.map(user => user.name);
   console.log(names); // ['Alice', 'Bob', 'Charlie']

5. 使用 thisArg 参数
   JavaScript复制

   let numbers = [1, 2, 3, 4, 5];
   let multiplier = {
       factor: 2,
       multiply: function(num) {
           return num * this.factor;
       }
   };
   let multipliedNumbers = numbers.map(multiplier.multiply, multiplier);
   console.log(multipliedNumbers); // [2, 4, 6, 8, 10]

注意事项

• map 方法不会修改原数组，而是返回一个新数组。
• map 方法不会遍历数组中被删除或从未被赋值的元素。
• map 方法的回调函数可以接受多个参数，但通常只需要使用 currentValue 参数。如果需要使用索引或数组本身，可以按需添加。
• map 方法可以与箭头函数一起使用，使代码更加简洁。
• map 方法可以用于处理复杂的数据结构，如对象数组，通过返回对象的特定属性来创建新数组。