JavaScript如何拼接对象数组中重复id对应的name属性值

核心实现逻辑 #

• 借助原生JS的reduce方法配合临时映射表完成归并，无需引入第三方库
• 映射表以数组元素的id为键，存储已经完成归并的条目对象
• 遍历原数组时做分支判断：
  • 若id首次出现，直接将条目存入映射表
  • 若id已存在，将当前条目的name值拼接到映射表对应条目的name后，以逗号分隔
• 遍历完成后，提取映射表中所有值，即为最终的归并结果数组

完整可运行代码 #

const x = [
   {id: 1, name: 'green'},
   {id: 2, name: 'red'},
   {id: 1, name: 'blue'}
]

const mergedArray = Object.values(
  x.reduce((map, item) => {
    const idKey = item.id
    if (map[idKey]) {
      map[idKey].name += `, ${item.name}`
    } else {
      map[idKey] = { ...item }
    }
    return map
  }, {})
)

输出验证 #

执行上述代码后，mergedArray的输出完全匹配预期结构：

[
   {id: 1, name: 'green, blue'},
   {id: 2, name: 'red'}
]

补充说明：如果后续需要归并其他同id的属性值，只需要在id已存在的分支中，追加对应属性的拼接/累加逻辑即可，整体结构不需要改动。

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