Map 函数的工作原理

在 JavaScript 中，Array 对象是一种常见的数据类型。map() 函数是 Array 对象的一个内置方法，用于将原始数组中的每个元素逐个传递到自定义函数中，并生成一个新的数组作为返回值。

语法

map() 方法的语法如下：

let newArray = arr.map(callback(currentValue [, index [, array]])[, thisArg])

其中：

• arr：原始数组
• callback：自定义的函数，用于处理原始数组中的元素。函数返回值将组成生成的新数组的元素。
• currentValue：当前正在处理的元素。
• index：当前正在处理的元素的索引（可选）。
• array：原始数组（可选）。
• thisArg：使用该参数作为回调函数中 this 的值（可选）。

返回值

map() 方法返回一个新数组，其中包含由回调函数处理原始数组元素生成的值。

示例

下面是一个简单的例子，使用 map() 方法将数字数组中的每个元素都乘以二：

const numbers = [1, 2, 3, 4, 5];

const doubled = numbers.map((num) => {
  return num * 2;
});

console.log(doubled); // [2, 4, 6, 8, 10]

上面的例子中，我们创建了一个数字数组 numbers，然后使用箭头函数 (num) => { return num * 2; } 作为回调函数，将数组中的每个元素都乘以二。最后，我们使用 console.log() 输出生成的新数组 doubled。

另一个常见的用途是将对象数组中的特定属性提取出来作为一个新的数组：

const people = [
  { id: 1, name: 'Alice' },
  { id: 2, name: 'Bob' },
  { id: 3, name: 'Charlie' }
];

const names = people.map((person) => {
  return person.name;
});

console.log(names); // ['Alice', 'Bob', 'Charlie']

上面的例子中，我们创建了一个对象数组 people，每个对象包含一个 id 属性和一个 name 属性。使用 map() 方法和箭头函数 person => person.name，我们将每个对象的 name 属性提取出来组成一个新数组 names，并使用 console.log() 输出。