JS中【map】知识点和用法介绍

在 JavaScript 中，map 是一个常用的数组方法，用于创建一个新数组，其结果是原数组中的每个元素调用一个提供的函数后的返回值。map 方法不会改变原数组，而是返回一个新的数组。以下是一些关于 map 方法的详细知识点：

基本语法

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

• callback：用来生成新数组元素的函数，依次传递每个元素进行处理。该函数接受以下参数：

  • currentValue：当前处理的元素。
  • index (可选)：当前处理元素的索引。
  • array (可选)：调用 map 方法的数组。

• thisArg (可选)：执行回调函数时用作 this 的值。

例子

const numbers = [1, 4, 9, 16];

// 将每个元素平方根
const roots = numbers.map(Math.sqrt);

console.log(roots);  // 输出: [1, 2, 3, 4]

在这个例子中，map 方法创建了一个新数组 roots，其值是 numbers 数组中每个元素的平方根。

特性

1. 不修改原数组：map 返回一个新数组，不改变原始数组。

2. 返回新数组：新数组的长度与原数组相同。

3. 回调函数参数：map 的回调函数可以接受三个参数：当前元素、当前索引、以及原数组。

常见用途

1. 数据转换：map 常用于将数组中的元素转换为另一种形式。

   const prices = [100, 200, 300];
   const withTax = prices.map(price => price * 1.2);
   
   console.log(withTax); // 输出: [120, 240, 360]
   

2. 提取对象属性：可以从一个对象数组中提取特定的属性值。

   const users = [
     {name: 'Alice', age: 25},
     {name: 'Bob', age: 30},
     {name: 'Charlie', age: 35}
   ];
   
   const names = users.map(user => user.name);
   
   console.log(names); // 输出: ['Alice', 'Bob', 'Charlie']
   

与其他数组方法的区别

• forEach：forEach 也是遍历数组的方法，但它不返回新数组，只是执行回调函数对每个元素进行操作。map 用于创建新数组，而 forEach 通常用于在遍历时进行某种副作用操作，如输出日志。

• filter：filter 用于筛选出满足条件的元素并返回一个新数组，而 map 是对每个元素进行变换并返回新数组。

注意事项

• 回调函数必须返回一个值：如果回调函数没有明确返回值，新数组中的相应位置会是 undefined。

  const nums = [1, 2, 3];
  const result = nums.map(num => { num * 2; }); // 没有返回值
  
  console.log(result); // 输出: [undefined, undefined, undefined]
  

• 处理 null 和 undefined：map 处理数组时会跳过未赋值的元素（稀疏数组），但不会跳过 null 和 undefined。

总结

map 是一个强大的数组方法，适用于需要对数组中的每个元素进行转换操作并返回一个新数组的场景。掌握 map 方法可以帮助你在 JavaScript 中更高效地处理数组数据。