如何使用 map() 方法遍历数组并返回新数组？

数组遍历相关问题：如何使用 map() 方法遍历数组并返回新数组？

在 JavaScript 中，数组是最常用的数据结构之一。遍历数组以执行某种操作是我们开发中的常见任务。map() 方法是数组的一个内置方法，它不仅可以遍历数组元素，还会返回一个新的数组，其中包含对原数组每个元素执行某个操作后的结果。

本文将详细介绍如何使用 map() 方法来遍历数组并返回一个新的数组，并结合实际项目代码示例来进行讲解。

目录结构

1. 引言
2. map() 方法基本使用
   • map() 方法概述
   • 语法
   • 回调函数的参数
3. 实际项目中的 map() 使用示例
   • 示例 1：商品价格打折
   • 示例 2：提取用户数据
   • 示例 3：将数据转换为另一种格式
4. map() 与其他数组方法的比较
   • 与 forEach 的比较
   • 与 filter() 的比较
   • 与 reduce() 的比较
5. 总结与最佳实践

---

1. 引言

map() 方法是 JavaScript 数组的一部分，用于遍历数组并返回一个新数组。与 forEach() 方法不同，map() 会对每个元素执行回调函数并生成一个新的数组，而不会修改原始数组。这使得 map() 在许多情况下成为了更加合适的选择，尤其是在需要对数组元素进行转换或映射时。

---

2. map() 方法基本使用

map() 方法概述

map() 方法通过提供的回调函数对每个数组元素执行操作，并返回一个新的数组。原始数组不会受到影响。

语法

let newArray = array.map(function(currentValue, index, array) {
  // 返回新的值
});

• currentValue：当前元素的值
• index：当前元素的索引（可选）
• array：原数组本身（可选）

示例：基本的 map() 使用

let arr = [1, 2, 3, 4, 5];

let squaredArr = arr.map(function(value) {
  return value * value;
});

console.log(squaredArr);  // [1, 4, 9, 16, 25]

在上面的例子中，map() 方法遍历数组 arr，对每个元素进行平方运算，并返回一个新的数组 squaredArr，其中包含了平方后的值。

---

3. 实际项目中的 map() 使用示例

示例 1：商品价格打折

假设我们有一个包含商品价格的数组，想要对所有商品进行打折处理，返回一个新的包含打折后价格的数组。

let products = [
  { name: 'Laptop', price: 1000 },
  { name: 'Phone', price: 500 },
  { name: 'Tablet', price: 700 }
];

let discountedProducts = products.map(product => {
  return { 
    name: product.name, 
    price: product.price * 0.9  // 打九折
  };
});

console.log(discountedProducts);

输出：

[
  { name: 'Laptop', price: 900 },
  { name: 'Phone', price: 450 },
  { name: 'Tablet', price: 630 }
]

在这个示例中，map() 方法遍历了 products 数组，对每个商品的价格进行了打折，并返回了一个新数组 discountedProducts，其中包含了打折后的商品信息。

示例 2：提取用户数据

假设我们有一个用户对象数组，我们只想提取用户的姓名和年龄，返回一个新的包含这些信息的数组。

let users = [
  { name: 'Alice', age: 25, country: 'USA' },
  { name: 'Bob', age: 30, country: 'Canada' },
  { name: 'Charlie', age: 22, country: 'UK' }
];

let userNamesAndAges = users.map(user => {
  return { name: user.name, age: user.age };
});

console.log(userNamesAndAges);

输出：

[
  { name: 'Alice', age: 25 },
  { name: 'Bob', age: 30 },
  { name: 'Charlie', age: 22 }
]

在这个例子中，map() 方法用于提取用户对象数组中的部分数据（姓名和年龄），并生成一个包含新数据的数组。

示例 3：将数据转换为另一种格式

假设我们有一组日期字符串，需要将这些日期格式转换为 ISO 格式。

let dates = ['2025-01-16', '2025-01-17', '2025-01-18'];

let isoDates = dates.map(date => {
  return new Date(date).toISOString();  // 转换为 ISO 格式
});

console.log(isoDates);

输出：

[
  '2025-01-16T00:00:00.000Z',
  '2025-01-17T00:00:00.000Z',
  '2025-01-18T00:00:00.000Z'
]

在这个示例中，map() 方法将日期字符串数组 dates 中的每个日期转换为 ISO 格式，并返回一个新数组 isoDates，其中包含格式化后的日期。

---

4. map() 与其他数组方法的比较

与 forEach 的比较

forEach 和 map() 都是用来遍历数组的，但它们有一些关键的区别：

• forEach 用于执行副作用（例如打印日志、修改原始数组等），而 map() 用于生成一个新的数组。
• map() 会返回一个新数组，而 forEach 不会。
• map() 是链式调用的理想选择，而 forEach 只能用于执行单次操作。

示例对比：

// 使用 forEach 打印每个值
let arr = [1, 2, 3, 4];
arr.forEach(value => console.log(value));  // 输出：1 2 3 4

// 使用 map 生成新数组
let newArr = arr.map(value => value * 2);
console.log(newArr);  // 输出：[2, 4, 6, 8]

与 filter() 的比较

map() 和 filter() 都用于遍历数组，但它们的目的不同：

• map() 用于生成一个包含转换后元素的新数组。
• filter() 用于返回一个新的数组，其中只包含满足特定条件的元素。

map() 示例：

let arr = [1, 2, 3, 4];
let mappedArr = arr.map(value => value * 2);
console.log(mappedArr);  // 输出：[2, 4, 6, 8]

filter() 示例：

let arr = [1, 2, 3, 4];
let filteredArr = arr.filter(value => value > 2);
console.log(filteredArr);  // 输出：[3, 4]

与 reduce() 的比较

reduce() 方法用于将数组中的所有元素累加成一个值，而 map() 用于将每个元素转换为新数组的元素。

reduce() 示例：

let arr = [1, 2, 3, 4];
let sum = arr.reduce((accumulator, currentValue) => accumulator + currentValue, 0);
console.log(sum);  // 输出：10

---

5. 总结与最佳实践

• 使用场景：map() 非常适用于需要生成新数组的场景，尤其是当你需要对数组元素进行转换或提取数据时。
• 不可变性：map() 不会修改原数组，它返回一个新的数组，因此非常适合不希望改变原数据的场景。
• 链式调用：map() 允许链式调用，通常与 filter()、reduce() 等方法一起使用，形成强大的数组处理链。
• 性能：虽然 map() 在性能上通常不错，但对于极大的数据集，考虑到性能优化，可能需要选择更高效的算法或避免不必要的数组复制。

通过掌握 map() 方法的使用，可以大大提高代码的简洁性和可读性，特别是在进行数据转换或映射时。