如何用JavaScript Reduce将数组转化为嵌套统计对象？

嘿，我来帮你修正这个reduce的实现问题～你之前的写法之所以得到不符合预期的结果，是因为把语言计数和颜色都当成了顶层对象的独立属性，而没有给每个语言创建一个包含count和color的嵌套对象。

问题分析 #

你的原代码：

let langCount = langArr.reduce((lang, [name, color]) => { 
  lang[name] = (lang[name] || 0) + 1; 
  lang[color] = 'color'; 
  return lang; 
}, {});

这里直接将lang[name]赋值为数字类型的计数，又把lang[color]赋值为字符串，最终所有语言名和颜色都成了顶层键，这和你想要的每个语言对应一个包含count和color的对象的结构不符。

正确实现方案 #

我们需要在累加器中，为每个语言维护一个嵌套对象，里面包含count和color两个属性。这里有两种写法：

写法1：条件判断版

let langArr = [ ["python", "blue"] ,["python", "blue"] ,["c++", "red"] ,["java", "yellow"] ,["javascript", "lime"] ,["shell", "green"] ,["c++", "red"] ];

let langCount = langArr.reduce((acc, [name, color]) => {
  // 检查当前语言是否已存在于累加器中
  if (acc[name]) {
    // 存在则计数+1（颜色固定无需修改）
    acc[name].count++;
  } else {
    // 不存在则初始化该语言的嵌套对象
    acc[name] = { count: 1, color: color };
  }
  return acc;
}, {});

console.log(langCount);

写法2：简洁逻辑或版

如果想让代码更紧凑，可以用逻辑或来简化初始化步骤：

let langCount = langArr.reduce((acc, [name, color]) => {
  // 若语言不存在则初始化，count设为0后续统一加1
  acc[name] = acc[name] || { count: 0, color: color };
  // 无论是否初始化，计数都+1
  acc[name].count++;
  return acc;
}, {});

输出结果 #

执行后你会得到完全符合预期的嵌套对象：

{
  python: { count: 2, color: "blue" },
  'c++': { count: 2, color: "red" },
  java: { count: 1, color: "yellow" },
  javascript: { count: 1, color: "lime" },
  shell: { count: 1, color: "green" }
}

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