如何使用JavaScript/TypeScript合并JSON数组中id相同的对象

实现思路：先通过id做分组缓存，把同id的name拼接完成后，再把缓存转成数组即可，两种常用实现方式如下：

普通循环实现 #

逻辑清晰易懂，适合新手理解：

const input = [ { id: 1, name: "aaa" }, { id: 1, name: "bbb" }, { id: 2, name: "ccc" }, { id: 3, name: "ddd" } ];

const idMap = {};
input.forEach(item => {
  // 已存在同id记录，直接拼接name
  if (idMap[item.id]) {
    idMap[item.id].name += `, ${item.name}`;
  } 
  // 不存在同id记录，新增缓存
  else {
    idMap[item.id] = { ...item };
  }
});

// 把缓存对象的值转成最终数组
const result = Object.values(idMap);
console.log(result);

reduce 简化写法 #

代码更精简，适合熟悉数组高阶函数的场景：

const input = [ { id: 1, name: "aaa" }, { id: 1, name: "bbb" }, { id: 2, name: "ccc" }, { id: 3, name: "ddd" } ];

const result = Object.values(
  input.reduce((acc, cur) => {
    acc[cur.id] ? (acc[cur.id].name += `, ${cur.name}`) : (acc[cur.id] = {...cur});
    return acc;
  }, {})
);

TypeScript 带类型版本 #

增加类型声明，适配TS开发场景：

interface Item {
  id: number;
  name: string;
}

const input: Item[] = [ { id: 1, name: "aaa" }, { id: 1, name: "bbb" }, { id: 2, name: "ccc" }, { id: 3, name: "ddd" } ];

const result: Item[] = Object.values(
  input.reduce<Record<number, Item>>((acc, cur) => {
    acc[cur.id] ? (acc[cur.id].name += `, ${cur.name}`) : (acc[cur.id] = {...cur});
    return acc;
  }, {})
);

兼容非数字id/保序版本 #

如果id是字符串、对象等非数字类型，或者需要严格保留id在原数组中首次出现的顺序，可以用Map代替普通对象：

const idMap = new Map();
input.forEach(item => {
  if (idMap.has(item.id)) {
    idMap.get(item.id).name += `, ${item.name}`;
  } else {
    idMap.set(item.id, { ...item });
  }
});
const result = Array.from(idMap.values());

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