Angular中根据song_id匹配合并两个对象数组指定键值的方法

以下方案可实现按song_id匹配，将Array2的rating字段合并到Array1对应元素：

推荐实现（大数组性能友好） #

使用Map做中间映射，避免嵌套循环，适合数据量较大的场景：

// 构建song_id与rating的映射关系
const ratingRel = new Map(this.Array2.map(item => [item.song_id, item.rating]));
// 遍历原数组合并字段
this.Array1 = this.Array1.map(songItem => ({
  ...songItem,
  rating: ratingRel.get(songItem.song_id)
  // 若存在无匹配项的场景，可加默认值：?? 0 或 ?? null
}));

轻量实现（小数组适用） #

如果数组长度在百级以内，可直接用find查找匹配项，写法更简洁：

this.Array1 = this.Array1.map(songItem => {
  const matched = this.Array2.find(rateItem => rateItem.song_id === songItem.song_id);
  return {
    ...songItem,
    rating: matched?.rating
  }
});

测试数据与预期结果 #

• 初始Array1：

this.Array1 = [
  {"song_id": 01, "artist_name": "Arijit, Shreya", "song_name": "Song1"},
  {"song_id": 02,"artist_name": "Jason, Ankit", "song_name": "Song2"},
  {"song_id": 03,"artist_name": "Asha, Lata, Bapi", "song_name": "Song3"},
]

• 初始Array2：

this.Array2 = [
  {"song_id": 01, "user_id": 5, "rating": 4},
  {"song_id": 02, "user_id": 5, "rating": 5},
  {"song_id": 03, "user_id": 5, "rating": 3},
]

• 执行后得到的Array1：

this.Array1 = [
  {"song_id": 01, "artist_name": "Arijit, Shreya", "song_name": "Song1", "rating": 4},
  {"song_id": 02,"artist_name": "Jason, Ankit", "song_name": "Song2", "rating": 5},
  {"song_id": 03,"artist_name": "Asha, Lata, Bapi", "song_name": "Song3", "rating": 3},
]

提示：如果业务中存在两个数组song_id不一一对应的情况，建议给rating设置兜底默认值，避免出现undefined导致后续模板渲染报错。

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