5.3 数组高阶方法：map、filter、reduce

5.3 数组高阶方法：map、filter、reduce

JavaScript 提供了多种数组高阶方法，用于简化对数组的操作。其中，map、filter 和 reduce 是最常用的三种方法。它们允许以声明式的方式处理数组，使代码更简洁、更易读。本节将详细介绍这三种方法的用法和应用场景。

5.3.1 map 方法

map 方法用于对数组中的每个元素执行指定的操作，并返回一个新数组。

1. 语法

const newArray = array.map(callback(currentValue, index, array));

2. 参数

• callback：对每个元素执行的函数，接收三个参数：
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：原数组。
• 返回值：新数组，包含每个元素执行 callback 后的结果。

3. 示例

const numbers = [1, 2, 3, 4];
const doubled = numbers.map((num) => num * 2);
console.log(doubled); // 输出 [2, 4, 6, 8]

4. 应用场景

• 对数组中的每个元素进行转换。
• 从对象数组中提取特定属性。

5.3.2 filter 方法

filter 方法用于筛选数组中满足条件的元素，并返回一个新数组。

1. 语法

const newArray = array.filter(callback(currentValue, index, array));

2. 参数

• callback：对每个元素执行的函数，返回 true 或 false，决定是否保留该元素。
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：原数组。
• 返回值：新数组，包含满足条件的元素。

3. 示例

const numbers = [1, 2, 3, 4];
const evens = numbers.filter((num) => num % 2 === 0);
console.log(evens); // 输出 [2, 4]

4. 应用场景

• 筛选满足特定条件的元素。
• 过滤无效或不需要的数据。

5.3.3 reduce 方法

reduce 方法用于将数组中的元素累积为一个值。

1. 语法

const result = array.reduce(callback(accumulator, currentValue, index, array), initialValue);

2. 参数

• callback：对每个元素执行的函数，接收四个参数：
  • accumulator：累积值，初始值为 initialValue 或数组的第一个元素。
  • currentValue：当前元素的值。
  • index（可选）：当前元素的索引。
  • array（可选）：原数组。
• initialValue（可选）：累积值的初始值。
• 返回值：最终的累积值。

3. 示例

const numbers = [1, 2, 3, 4];
const sum = numbers.reduce((acc, num) => acc + num, 0);
console.log(sum); // 输出 10

4. 应用场景

• 计算数组元素的总和、平均值等。
• 将数组转换为对象或其他数据结构。

5.3.4 综合示例

示例 1：map 与 filter 结合

const users = [
  { name: "Alice", age: 25 },
  { name: "Bob", age: 30 },
  { name: "Charlie", age: 35 },
];

const names = users
  .filter((user) => user.age > 25)
  .map((user) => user.name);

console.log(names); // 输出 ["Bob", "Charlie"]

示例 2：reduce 计算总和

const orders = [
  { product: "Apple", price: 1.5, quantity: 2 },
  { product: "Banana", price: 0.5, quantity: 5 },
  { product: "Orange", price: 2, quantity: 3 },
];

const total = orders.reduce((acc, order) => acc + order.price * order.quantity, 0);
console.log(total); // 输出 8.5

示例 3：reduce 转换为对象

const fruits = ["apple", "banana", "orange"];
const fruitMap = fruits.reduce((acc, fruit, index) => {
  acc[fruit] = index;
  return acc;
}, {});

console.log(fruitMap); // 输出 { apple: 0, banana: 1, orange: 2 }

5.3.5 总结

• map：对数组中的每个元素执行操作，返回一个新数组。
• filter：筛选数组中满足条件的元素，返回一个新数组。
• reduce：将数组中的元素累积为一个值。

通过掌握 map、filter 和 reduce，你可以以声明式的方式处理数组，编写更简洁、更易读的代码。在接下来的学习中，我们将继续探索 JavaScript 的其他高级特性。

思考题：

1. map 和 forEach 的区别是什么？
2. 如何使用 reduce 计算数组的平均值？
3. 在什么情况下应该使用 filter 而不是 map？