JavaScript使用Array.reduce合并同类对象求和出现错误该如何修正？

错误原因 #

你的代码问题出在reduce的else分支返回值逻辑：

• 表达式accumulator[index].sum += currentItem.sum的返回值是求和后的数值，你直接把这个数值追加到了结果数组中，导致最终结果里多了50、130这类纯数字元素
• 同时这个写法会直接修改原inputArray里的对象，产生意料外的副作用

修正方案 #

你只需要在else分支先更新对应下标的sum值，再返回完整的累加数组即可，修正后的代码如下：

const output = inputArray.reduce((accumulator, currentItem) => {
  const index = accumulator.findIndex((item) => item.userId === currentItem.userId);

  if (index < 0) {
    // 解构创建新对象，避免修改原数组元素
    return [...accumulator, {...currentItem}];
  } else {
    // 先拷贝原有数组，再更新对应位置的sum值，避免直接修改原累加数组
    const newAcc = [...accumulator];
    newAcc[index] = {
      ...newAcc[index],
      sum: newAcc[index].sum + currentItem.sum
    }
    return newAcc;
  }
}, []);

运行后得到的output为符合预期的结果：

[
  { userId: 1, sum: 50 },
  { userId: 2, sum: 130 }
]

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