Angular TypeScript中如何合并JSON数组内重复对象的指定键值

实现思路 #

核心用Array.reduce做分组聚合：

• 选择组内值完全一致的唯一标识字段（本场景为song_id）作为分组键
• 遍历原数组时，若分组中不存在当前键对应的条目，直接存入分组；若已存在对应条目，将差异字段（本场景为artist_name）的值用逗号拼接更新
• 聚合完成后提取分组Map的所有值，即为目标数组

可直接运行的代码示例 #

// 原数组定义
this.oldArray = [
  {"song_id": 11, "artist_name": "Arijit", "song_name": "Song1"},
  {"song_id": 11, "artist_name" : "Shreya", "song_name": "Song1"},
  {"song_id": 12,"artist_name": "Jason", "song_name": "Song2"},
  {"song_id": 12,"artist_name": "Ankit", "song_name": "Song2"},
  {"song_id": 13,"artist_name": "Asha", "song_name": "Song3"},
  {"song_id": 13,"artist_name": "Lata", "song_name": "Song3"},
  {"song_id": 13,"artist_name": "Bapi", "song_name": "Song3"},
];

// 合并逻辑
this.newArray = Object.values(
  this.oldArray.reduce((groupAcc, curItem) => {
    const groupKey = curItem.song_id;
    // 分组中无当前歌曲条目时直接初始化
    if (!groupAcc[groupKey]) {
      groupAcc[groupKey] = { ...curItem };
      return groupAcc;
    }
    // 存在同组条目时拼接差异的艺术家字段
    groupAcc[groupKey].artist_name += `, ${curItem.artist_name}`;
    return groupAcc;
  }, {} as Record<number, {song_id: number, artist_name: string, song_name: string}>)
);

扩展说明 #

如果业务场景中差异字段不固定，不需要硬编码拼接字段名，可以在遍历过程中自动对比同组对象的所有键值，非唯一标识字段、且同组值存在差异的自动做拼接，适配更多同类合并场景。

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