如何合并JavaScript数组中itemId相同元素并累加quantity数值

数组按itemId合并累加quantity实现方案 #

现有代码存在的问题 #

• 直接修改原始输入数组，会污染原数据，影响后续其他地方对原数组的使用
• 双重循环时间复杂度为O(n²)，当数组元素数量较多时性能会明显下降
• 调用splice删除数组元素后，数组长度会动态变化，但内层循环的索引没有做回退处理，会跳过相邻的同itemId元素，导致合并结果不准确

优化实现方案（时间复杂度O(n)，不修改原数组） #

我们可以用Map做临时存储，遍历一次数组即可完成合并，性能更好也更稳定：

const mergeSameItem = (originArr) => {
  const itemMap = new Map()
  originArr.forEach(item => {
    if (itemMap.has(item.itemId)) {
      // 已存在相同itemId，累加数量
      const existItem = itemMap.get(item.itemId)
      existItem.quantity += item.quantity
      // 若需要保留同itemId最后一次出现的name，保留下面一行，需要保留第一次的则删除
      existItem.name = item.name
    } else {
      // 不存在则存入Map，做浅拷贝避免修改原数组元素
      itemMap.set(item.itemId, {...item})
    }
  })
  // 将Map转为数组返回
  return Array.from(itemMap.values())
}

// 调用示例
const mergedResult = mergeSameItem(arr)
console.log(mergedResult)

自定义调整说明 #

如果你的业务中对同itemId的name字段有其他取值规则（比如取第一次出现的值、拼接所有值等），只需要修改上面代码中对应name赋值的逻辑即可。

内容的提问来源于stack exchange，提问作者Hatice Dalkıran