合并并归约JavaScript对象以生成访问量统计总数

嘿，这个分组求和的需求用JavaScript原生的Array.reduce()就能完美解决，这是处理这类数据聚合场景的常用方法，我给你两种实现思路，都很简洁：

基础实现（清晰易懂） #

// 你的原始数据
const originalData = [
  {network: "linkedin", visits: 25},
  {network: "twitter", visits: 45},
  {network: "linkedin", visits: 26},
  {network: "twitter", visits: 27},
  {network: "facebook", visits: 235},
  {network: "twitter", visits: 744}
];

// 核心处理逻辑
const summedData = Object.values(
  originalData.reduce((accumulator, currentItem) => {
    // 检查当前network是否已经在累加器中存在
    if (accumulator[currentItem.network]) {
      // 存在的话，把当前visits加到已有值上
      accumulator[currentItem.network].visits += currentItem.visits;
    } else {
      // 不存在的话，将当前项的副本存入累加器（避免修改原数据）
      accumulator[currentItem.network] = {...currentItem};
    }
    return accumulator;
  }, {}) // 累加器初始值是一个空对象
);

console.log(summedData);
// 输出结果正好符合你的预期：
// [ {network: "linkedin", visits: 51}, {network: "twitter", visits: 771}, {network: "facebook", visits: 235} ]

简化版（更紧凑） #

如果想让代码更简洁，可以用解构赋值和逻辑或来简化判断：

const summedData = Object.values(
  originalData.reduce((acc, {network, visits}) => {
    // 若当前network不存在，就创建一个初始visits为0的对象
    acc[network] = acc[network] || {network, visits: 0};
    // 累加visits
    acc[network].visits += visits;
    return acc;
  }, {})
);

关键步骤解释 #

1. Array.reduce()：遍历原数组，用一个对象（累加器）临时存储每个network的累计visits。
2. Object.values()：把累加器对象中的所有值提取出来，转成你需要的数组格式。
3. 用扩展运算符{...currentItem}或者初始对象创建，都是为了避免直接修改原数组中的对象，保证数据的不可变性。

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