如何用JavaScript的reduce方法统计数组元素出现次数？

嘿，你对reduce的理解完全没问题——它确实是用来把多个值归约成一个单一值，而这个“单一值”可不仅仅是数字、字符串这类基础类型，对象也完全可以！这正是解决你需求的核心点。

下面一步步拆解实现逻辑：

核心思路 #

我们要把reduce的累加器（accumulator）设定为一个空对象，然后遍历数组时，每遇到一个元素，就更新这个对象里对应的计数：

• 如果元素已经在对象中，就把计数加1
• 如果元素不在对象中，就给它初始化计数为1

基础实现代码 #

直接上能跑的代码，结合你的示例数组：

var people = ['josh', 'dan', 'sarah', 'joey', 'dan', 'josh', 'francis', 'dean'];

const countResult = people.reduce((acc, curr) => {
  // 检查当前元素是否已存在于累加器对象中
  if (acc[curr]) {
    acc[curr]++;
  } else {
    acc[curr] = 1;
  }
  // 必须返回累加器，供下一次迭代使用
  return acc;
}, {}); // 这里的空对象是累加器的初始值，至关重要！

console.log(countResult);
// 输出：{ josh: 2, dan: 2, sarah: 1, joey: 1, francis: 1, dean: 1 }

简化写法 #

可以用逻辑运算符或者ES6的新语法简化代码，让它更简洁：

方式1：逻辑或（||） #

const countResult = people.reduce((acc, curr) => {
  acc[curr] = (acc[curr] || 0) + 1;
  return acc;
}, {});

方式2：ES6空值合并运算符（??） #

如果你的环境支持ES2020+，可以用更严谨的空值合并：

const countResult = people.reduce((acc, curr) => {
  acc[curr] = (acc[curr] ?? 0) + 1;
  return acc;
}, {});

关键注意点 #

• 必须传入初始值{}：如果不传初始值，reduce会把数组的第一个元素作为初始累加器，第二次迭代时你会尝试给字符串加属性，直接报错。
• 一定要返回累加器：每一次迭代的累加器结果会传递到下一次，不返回的话后续迭代就拿不到之前的统计结果了。

这样就能完美实现你想要的统计对象啦！

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