JavaScript中使用reduce统计数组元素出现次数的代码逻辑解析

先把你贴的代码转换成更易读的版本，核心逻辑完全一致：

const occurrences = [5, 5, 5, 2, 2, 2, 2, 2, 9, 4].reduce(function(acc, curr) {
  // 判断当前数字是否已在累加器中
  if (acc[curr]) {
    // 已存在，计数+1
    acc[curr]++;
  } else {
    // 不存在，初始化计数为1
    acc[curr] = 1;
  }
  // 返回累加器供下一次迭代使用
  return acc;
}, {});

console.log(occurrences); // 输出：{5: 3, 2: 5, 9: 1, 4: 1}

核心逻辑拆解 #

reduce是数组的迭代方法，专门用来把数组元素"归并"成一个值，这里我们用它来生成计数对象：

1. 初始值：第二个参数{}是一个空对象，作为迭代的起点，我们叫它acc（累加器），用来存储每个数字的出现次数。
2. 回调函数：每次遍历数组元素时都会执行这个函数，它的两个参数：
   • acc：上一次迭代返回的累加器对象（第一次迭代就是我们传入的空对象）。
   • curr：当前正在遍历的数组元素（比如第一次是5，第二次还是5，以此类推）。
3. 迭代过程：
   • 每次拿到curr，先检查acc里有没有以curr为键的属性：
     • 如果有，说明这个数字之前已经统计过，直接把对应的值加1；
     • 如果没有，就给acc新增一个键为curr、值为1的属性（表示第一次出现）。
   • 必须返回acc，因为reduce需要把这个更新后的累加器传递给下一次迭代，直到数组所有元素都遍历完成。

原代码的"简洁写法"解释 #

你贴的原代码用了逗号运算符和三元表达式来压缩代码：

return acc[curr] ? ++acc[curr] : acc[curr] = 1, acc

逗号运算符的作用是依次执行多个表达式，最后返回最后一个表达式的值。这里先执行三元表达式（完成计数更新），然后返回acc——因为reduce必须返回累加器，不能返回三元表达式得到的数字（比如1、2这些）。这种写法虽然短，但可读性差，日常开发建议用if-else的版本。

内容的提问来源于stack exchange，提问作者pranami