js 数组map方法|极客笔记

js 数组map方法

在 JavaScript 中，map() 方法是用于数组的一个高阶函数，它可以用来遍历数组中的每一个元素，并对每个元素执行回调函数，最终返回一个新的数组。在本文中，我们将详细介绍 map() 方法的用法，示例代码如下：

// 定义一个数组
const numbers = [1, 2, 3, 4, 5];

// 使用 map() 方法将数组中的每个元素乘以 2
const doubledNumbers = numbers.map(number => number * 2);
console.log(doubledNumbers); // [2, 4, 6, 8, 10]

上面的示例中，我们首先定义了一个名为 numbers 的数组，包含了一些数字元素。然后使用 map() 方法遍历数组中的每个元素，并将每个元素乘以 2，最终得到了一个新的数组 doubledNumbers，其中每个元素都是原数组中对应元素的两倍。

下面我们将更详细地介绍 map() 方法的使用方法和一些注意事项。

语法

map() 方法的语法非常简单，如下所示：

array.map(function callback(currentValue, index, array) {
  // 返回新数组元素
}, thisArg);

其中，array 是要操作的数组，callback 是对每个元素执行的回调函数，currentValue 代表当前正在处理的元素的值，index 表示当前元素在数组中的索引，array 是原始数组本身。thisArg 是可选参数，用来指定回调函数中的 this 指向。

回调函数

回调函数是 map() 方法中最核心的部分，它会被依次传入数组中的每一个元素，并且可以通过返回值来改变和筛选数组中的元素。在上面的示例中，我们使用了箭头函数来实现回调函数，可以更简洁地编写代码。

// 使用箭头函数作为回调函数
const squaredNumbers = numbers.map(number => number ** 2);
console.log(squaredNumbers); // [1, 4, 9, 16, 25]

上面的代码中，我们将每个元素的值求平方，并得到了一个新的数组 squaredNumbers。除了箭头函数，你也可以使用其他函数形式作为回调函数，如普通函数或匿名函数。

返回值

map() 方法会返回一个新的数组作为结果，而不会修改原始数组。这意味着你可以在不改变原数组的情况下对其进行处理。下面是一个具体示例：

const movies = [
  { title: 'The Shawshank Redemption', director: 'Frank Darabont' },
  { title: 'The Godfather', director: 'Francis Ford Coppola' },
  { title: 'The Dark Knight', director: 'Christopher Nolan' }
];

// 使用 map() 方法提取电影的标题
const movieTitles = movies.map(movie => movie.title);
console.log(movieTitles); // ['The Shawshank Redemption', 'The Godfather', 'The Dark Knight']

在这个示例中，我们定义了一个包含了电影信息的数组 movies，然后使用 map() 方法提取了每部电影的标题，得到了一个包含了电影标题的新数组 movieTitles。

使用场景

map() 方法在实际开发中有着广泛的应用场景。下面是一些常见的使用情况：

将数组中的数据格式进行转换，如将对象数组转换成指定属性的数组。
对数组中的每个元素执行相同的操作，如对数字数组进行加减乘除等数学运算。
过滤数组中的部分元素，即根据条件筛选出符合条件的元素组成新数组。

// 从用户对象数组中筛选出成年用户的名字
const users = [
  { name: 'Alice', age: 20 },
  { name: 'Bob', age: 17 },
  { name: 'Charlie', age: 25 }
];

const adultUsers = users
  .filter(user => user.age >= 18)
  .map(user => user.name);

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

上面的示例中，我们首先使用 filter() 方法过滤出了年龄大于等于 18 岁的用户对象，然后再使用 map() 方法提取了这些用户对象的名字，最终得到了一个包含成年用户名字的数组 adultUsers。

注意事项

在使用 map() 方法时，需要注意以下几点：

回调函数必须返回一个值：回调函数必须返回一个值，否则新数组中对应位置的元素会为 undefined。
原数组不会修改：map() 方法不会修改原数组，而是返回一个新数组。
箭头函数的简化写法：使用箭头函数可以简化回调函数的编写，使代码更加简洁。

// 回调函数必须返回一个值
const oddNumbers = numbers.map(number => {
  if (number % 2 === 0) {
    return number;
  }
});
console.log(oddNumbers); // [undefined, 2, undefined, 4, undefined]

在上面的示例中，我们使用 map() 方法判断数组中的奇数，并返回了一个新的数组 oddNumbers。但是由于回调函数中未对偶数进行处理，导致返回值为 undefined。