js array map：JavaScript 数组 map 方法详解与使用指南

在 JavaScript 中，数组是一种非常常用且重要的数据结构，当我们需要对数组中的每个元素进行操作或转换时，map 方法无疑是一个强大且常用的工具，本文将详细介绍 js array map 的概念、语法、特点以及各种应用场景,帮助你更好地理解和使用它。

什么是 Array.prototype.map()？

map 是 JavaScript 数组对象的一个方法，它创建一个新数组，其结果是该数组中的每个元素都调用了一次提供的函数（回调函数）后的返回值。关键点在于：

1. 它不改变原数组： map 方法本身是纯函数,它不会修改调用它的数组本身。
2. 返回新数组： 它总是返回一个新数组,长度与原数组相同。
3. 逐个处理元素： 它会遍历原数组的每一个元素，对每个元素应用提供的函数,并将函数的返回值依次放入新数组中。

基本语法

const newArray = originalArray.map(callbackFunction[, thisArg]);

• originalArray： 要操作的原始数组。
• callbackFunction： 为数组中的每个元素执行一次的函数，该函数本身接受最多三个参数：
  • currentValue： 当前正在处理的元素。
  • index： 当前元素的索引。
  • array： 调用 map 的数组本身。
  • thisArg (可选)： 执行 callbackFunction 时，this 的值。
• thisArg (可选)： 执行 callbackFunction 时，this 的值，默认值为 undefined。
• newArray： 返回的新数组。

一个简单的例子

假设我们有一个包含数字的数组，我们想将每个数字乘以 2：

const numbers = [1, 4, 9, 16];
const doubled = numbers.map(num => num * 2);
console.log(doubled); // 输出: [2, 8, 18, 32]
console.log(numbers); // 输出: [1, 4, 9, 16]，原数组未改变

与 forEach 的区别

map 和 forEach 都是用于遍历数组的,但它们有本质区别：

• forEach： 用于执行数组中每一项的指定操作，它不返回值（或者说返回 undefined），通常用于有副作用的操作（如修改 DOM、发起网络请求等），它会改变原数组（如果回调函数中修改了 this 指向并赋值给原数组元素，则会改变，但通常不这么用）。
• map： 用于创建新数组是原数组元素的变换结果，它返回一个新数组。

使用场景举例

map 方法非常适合以下场景：

1. 数据转换： 将一个数组中的元素转换成另一种格式或类型，如将字符串数组转换成数字数组,或将对象数组中的某个属性提取出来。

   // 将字符串数组转换为数字数组
   const strings = ['1', '2', '3'];
   const numbers = strings.map(str => parseInt(str));
   console.log(numbers); // [1, 2, 3]
   // 提取对象数组中的 'name' 属性
   const users = [
       { id: 1, name: 'Alice', age: 28 },
       { id: 2, name: 'Bob', age: 30 }
   ];
   const names = users.map(user => user.name);
   console.log(names); // ['Alice', 'Bob']

2. 格式化数据： 对数据进行格式化处理,如将日期对象转换为特定格式的字符串。

   const dates = [new Date('2023-01-01'), new Date('2023-02-01')];
   const formattedDates = dates.map(date => date.toLocaleDateString('zh-CN'));
   console.log(formattedDates); // ['2023/1/1', '2023/2/1']

3. 链式调用： map 可以与其他数组方法（如 filter, reduce, forEach 等）结合使用,实现更复杂的操作。

   // 先过滤出年龄大于 30 的用户，然后提取他们的名字
   const users = [
       { id: 1, name: 'Alice', age: 28 },
       { id: 2, name: 'Bob', age: 30 },
       { id: 3, name: 'Charlie', age: 35 }
   ];
   const seniorNames = users
       .filter(user => user.age > 30) // 过滤
       .map(user => user.name);        // 转换
   console.log(seniorNames); // ['Charlie']

注意事项

• 空值处理： 如果回调函数返回 undefined，则新数组的对应位置也会是 undefined。
• 性能： map 创建了一个新数组，如果对数组性能要求极高且操作非常简单，可以考虑使用 for 循环，但 map 通常更简洁易读。
• 回调函数中的 this： 如果需要在回调函数中使用 this，可以使用 thisArg 参数，或者使用箭头函数（箭头函数没有自己的 this，会捕获定义时所在的作用域的 this）。

js array map 是 JavaScript 中处理数组元素转换和映射的强大工具，它简洁、清晰，并且不会改变原数组，是现代 JavaScript 开发中不可或缺的方法之一，掌握 map 可以让你更高效地处理数组数据，写出更优雅、更易维护的代码，下次当你需要对数组的每个元素进行操作并生成一个新数组时，map 很可能是最佳选择。