JavaScript reduce() 方法（完整指南）

JavaScript reduce() 方法：从零开始掌握数组聚合的利器

在学习 JavaScript 的过程中，你可能已经熟悉了 map()、filter() 这些数组方法。但如果你还没有接触过 reduce()，那今天这篇文章就是为你准备的。它看似简单，实则强大，是处理数组聚合操作的“终极武器”。

想象一下：你有一个购物车，里面放着多个商品，每个商品都有价格。你想快速算出总金额，你会怎么做？最直接的方式是循环遍历数组，逐个累加。但用 reduce()，你只需要一行代码，就能完成这个任务。这就是 JavaScript reduce() 方法的魅力所在。

它不只是“求和”，而是能完成各种“归约”操作——把一个数组“压缩”成一个单一值。无论是求和、统计、分组，还是构建对象，reduce() 都能胜任。接下来，我们就一步步揭开它的神秘面纱。

什么是 reduce()？它的核心逻辑是什么？

reduce() 是 JavaScript 数组对象的一个内置方法，它的作用是将数组中的所有元素通过一个函数逐步归约为一个单一值。

它的语法如下：

array.reduce(callback(accumulator, currentValue, currentIndex, array), initialValue)

• callback：一个函数，每次迭代都会被调用，包含四个参数：
  • accumulator：累加器，保存上一次迭代的结果
  • currentValue：当前正在处理的元素
  • currentIndex：当前元素的索引
  • array：原数组
• initialValue：可选，作为累加器的初始值

举个例子，我们用 reduce() 求一个数组的总和：

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

const sum = numbers.reduce((accumulator, currentValue) => {
  // accumulator：上一轮的结果，初始为 0（如果提供了 initialValue）
  // currentValue：当前正在处理的数字，如 1、2、3...
  return accumulator + currentValue;
}, 0); // 0 是累加器的初始值

console.log(sum); // 输出：15

💡 小贴士：initialValue 是关键。如果没有提供，reduce() 会把数组的第一个元素作为初始值，从第二个元素开始处理。这在某些场景下容易出错，建议始终明确传入 initialValue。

从求和到求平均值：reduce() 的实际应用

求和只是 reduce() 的入门玩法。我们来进阶一点，实现“求平均值”。

const scores = [85, 90, 78, 92, 88];

const average = scores.reduce((sum, score) => {
  // 累加所有分数
  return sum + score;
}, 0) / scores.length; // 除以总数量

console.log(average); // 输出：87.8

这个例子展示了 reduce() 如何与其他操作结合使用。它不只返回一个值，还能作为中间步骤参与更复杂的计算。

再来看一个常见需求：统计数组中每个数字出现的次数。虽然这看起来不像“求和”，但我们可以用 reduce() 实现：

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

const count = numbers.reduce((acc, num) => {
  // 如果当前数字在累加器中不存在，初始化为 0
  acc[num] = (acc[num] || 0) + 1;
  return acc;
}, {}); // 初始值为一个空对象

console.log(count); // 输出：{ '1': 2, '2': 2, '3': 3, '4': 1 }

✅ 这里的 acc 是一个对象，用来记录每个数字的出现次数。每次遇到一个数字，就把它对应的计数加 1。这就是 reduce() 的灵活性所在。

理解累加器：reduce() 的“记忆”机制

reduce() 的核心在于“累加器”——它就像是一个会记住历史结果的“背包”。每次迭代，你把当前元素“装”进去，背包里的值就更新一次。

让我们用一个更直观的例子，跟踪 reduce() 的执行过程：

const values = [10, 20, 30];

const result = values.reduce((total, value) => {
  console.log(`累加器: ${total}, 当前值: ${value}`);
  return total + value;
}, 0);

console.log('最终结果:', result);

执行结果如下：

累加器: 0, 当前值: 10
累加器: 10, 当前值: 20
累加器: 30, 当前值: 30
最终结果: 60

可以看到，累加器的值是逐步变化的：0 → 10 → 30 → 60。每次返回的值都会成为下一次迭代的累加器。

这个过程就像你每天往一个存钱罐里放钱，今天放 10 块，存钱罐里就有 10 块；明天放 20 块，就有 30 块；后天放 30 块，就有 60 块。reduce() 就是这个“存钱罐”的抽象。

从数组到对象：reduce() 的高级用法

reduce() 最强大的地方在于它能将数组“转化”为任意类型的值，尤其是对象。

案例：根据类别分组数据

假设有这样一组用户数据：

const users = [
  { name: 'Alice', age: 25, city: 'Beijing' },
  { name: 'Bob', age: 30, city: 'Shanghai' },
  { name: 'Charlie', age: 25, city: 'Beijing' },
  { name: 'Diana', age: 35, city: 'Shanghai' }
];

我们想按城市分组用户：

const groupedByCity = users.reduce((acc, user) => {
  const city = user.city;

  // 如果该城市还没有在累加器中，创建一个空数组
  if (!acc[city]) {
    acc[city] = [];
  }

  // 将当前用户加入对应城市的数组
  acc[city].push(user);

  return acc;
}, {}); // 初始值为空对象

console.log(groupedByCity);

输出结果：

{
  Beijing: [
    { name: 'Alice', age: 25, city: 'Beijing' },
    { name: 'Charlie', age: 25, city: 'Beijing' }
  ],
  Shanghai: [
    { name: 'Bob', age: 30, city: 'Shanghai' },
    { name: 'Diana', age: 35, city: 'Shanghai' }
  ]
}

这个用法在前端开发中非常常见，比如处理表格数据、构建树状结构、生成配置对象等。

常见误区与最佳实践

误区一：不传 initialValue 导致意外结果

const numbers = [1, 2, 3];

// 错误写法：没有提供 initialValue
const sum = numbers.reduce((a, b) => a + b);

// 等价于：1 + 2 + 3，结果正确，但风险高

但如果数组为空，会抛出错误：

const empty = [];
empty.reduce((a, b) => a + b); // TypeError: Reduce of empty array with no initial value

✅ 最佳实践：始终提供 initialValue，即使它是 0、空字符串或空对象。

误区二：误将 reduce 用于非聚合场景

reduce() 适合“归约”操作，但不适合“映射”或“筛选”。比如，你要把数组中的每个元素乘以 2，用 map() 更清晰：

// ✅ 推荐：用 map()
const doubled = numbers.map(n => n * 2);

// ❌ 不推荐：用 reduce() 做映射
const doubled = numbers.reduce((acc, n) => {
  acc.push(n * 2);
  return acc;
}, []);

虽然功能等价，但可读性差。记住：reduce() 用于“归约”，map() 用于“转换”，filter() 用于“筛选”。

表格：reduce() 与其他数组方法对比

总结：为什么你应该掌握 reduce()？

JavaScript reduce() 方法虽然名字听起来“高深”，但它的逻辑其实非常直观：从一个初始值开始，逐步处理数组中的每个元素，最终得到一个结果。

它不是万能的，但当你需要“把一堆东西变成一个东西”时，它就是最优雅的解法。无论是求和、统计、分组，还是构建复杂对象，reduce() 都能让你写出简洁、函数式风格的代码。

掌握它，意味着你离“写出更像函数式编程”的 JavaScript 代码又近了一步。别再只用 for 循环了，试试 reduce()，你会发现，代码变得更干净、更易维护。

最后提醒一句：在实际项目中，不要为了用而用。如果一个任务用 map() 或 filter() 更清晰，那就别硬上 reduce()。但当你遇到“聚合”问题时，请记得，JavaScript reduce() 方法，是你最可靠的伙伴。