如何通过ES6实现数组内相同键值对象的合并操作

需求场景 #

需要将数组中指定键（示例场景中为id）值相同的多个零散对象，合并为包含所有属性的单个对象。
已知初始数组定义：

let data = [
  { id: "1", cars: 5 }, 
  { id: "1", pasta: 2 },
  { id: "2", cars: 0 }, 
  { id: "2", pasta: 0 },
];

期望的最终输出结构：

let mergedResult = [
  { id: "1", cars: 5, pasta: 2 },
  { id: "2", cars: 0, pasta: 0 },
];

具体实现 #

• 核心逻辑：利用ES6 Map的键天然唯一性作为临时存储容器，按id值做匹配，单次遍历完成属性合并，避免嵌套循环带来的性能损耗。
• 完整实现代码：

function mergeArrById(sourceArr) {
  // 初始化Map做临时存储，键为匹配的id值
  const tempStore = new Map();
  
  sourceArr.forEach(currentItem => {
    const { id } = currentItem;
    // 已存在同id的存储项，合并属性
    if (tempStore.has(id)) {
      tempStore.set(id, { ...tempStore.get(id), ...currentItem });
    } else {
      // 首次出现的id，直接存入
      tempStore.set(id, { ...currentItem });
    }
  })

  // 取出Map中所有存储值，得到最终合并后的数组
  return Array.from(tempStore.values());
}

// 调用示例
const finalData = mergeArrById(data);

• 方案特性：
  • 全程使用ES6原生语法，无第三方依赖
  • 时间复杂度为O(n)，适配大数组场景的性能要求
  • 相同id下，后遍历到的对象同名字段会自动覆盖前面的值，符合常规业务的属性合并逻辑
  • 相比普通JS对象做临时存储，Map不会把所有键强制转成字符串，哪怕后续匹配的键是数字类型也不会出现匹配异常，适配性更强

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