初学JavaScript之map方法

在JavaScript中，map 是一个非常有用的数组方法，它可以用来遍历数组的每个元素，并对每个元素执行指定的函数，最终返回一个新的数组，该数组包含经过处理后的元素。下面是 map 方法的基本用法和示例：

基本语法

const newArray = array.map((currentValue, index, array) => {
  // 返回经过处理的元素值
});

• array：原始数组，即调用 map 方法的数组。
• currentValue：当前正在处理的元素。
• index：当前元素的索引（可选）。
• array：调用 map 方法的数组本身（可选）。

示例

假设我们有一个数组 numbers，包含一些整数，我们想将每个元素都乘以 2，然后生成一个新的数组：

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

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

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

在这个示例中：

• numbers 是原始数组。
• map 方法调用了一个箭头函数 (num) => { return num * 2; }，这个箭头函数接收一个参数 num，即当前正在处理的元素，然后返回 num * 2，也就是当前元素乘以 2 的结果。
• map 方法最终返回一个新的数组 doubled，其中每个元素都是原始数组中对应元素乘以 2 的结果。

更多示例

转换字符串数组为大写

const fruits = ['apple', 'banana', 'cherry'];

const capitalized = fruits.map((fruit) => {
  return fruit.toUpperCase();
});

console.log(capitalized); // 输出 ['APPLE', 'BANANA', 'CHERRY']
 

提取对象数组中的某个属性值

const products = [
  { name: 'iPhone', price: 1000 },
  { name: 'iPad', price: 500 },
  { name: 'MacBook', price: 2000 }
];

const prices = products.map((product) => {
  return product.price;
});

console.log(prices); // 输出 [1000, 500, 2000]

注意事项

• map 方法不会修改调用它的原始数组，而是返回一个新的数组。
• 如果对每个元素的处理函数不返回任何值，则生成的数组对应位置为 undefined。

使用 map 方法可以简洁而高效地对数组进行处理，尤其是在需要生成新数组且每个元素处理方式相似的情况下非常有用。