如何根据id值合并JavaScript数组中name与city字段内容？

给定如下包含重复ID的JavaScript数组：

[{"id":"1","name":"John","city":"London"},
{"id":"2","name":"Paul","city":"Darvin"},
{"id":"1","name":"Ron","city":"Paris"},
{"id":"2","name":"Will","city":"Tokyo"},
{"id":"3","name":"Dave","city":"Oslo"}]

我们需要把相同ID对应的name和city字段值分别用逗号拼起来，得到去重ID后的最终数组。

实现方法 #

用Array.prototype.reduce()就能高效搞定这个需求，代码如下：

const originalArray = [
  {"id":"1","name":"John","city":"London"},
  {"id":"2","name":"Paul","city":"Darvin"},
  {"id":"1","name":"Ron","city":"Paris"},
  {"id":"2","name":"Will","city":"Tokyo"},
  {"id":"3","name":"Dave","city":"Oslo"}
];

const mergedArray = Object.values(originalArray.reduce((acc, current) => {
  // 先看当前ID有没有在累加器里存过
  if (!acc[current.id]) {
    // 没存过就直接把当前对象放进去
    acc[current.id] = {...current};
  } else {
    // 存过了就把name和city用逗号接上
    acc[current.id].name += `,${current.name}`;
    acc[current.id].city += `,${current.city}`;
  }
  return acc;
}, {}));

console.log(mergedArray);

代码说明 #

• 用reduce遍历原始数组，建一个临时对象acc，以ID作为键来存合并后的对象
• 每遍历一个元素，先查ID是否已存在：不存在就直接存入；存在就把当前元素的name和city追加到对应字段后面
• 最后用Object.values()把临时对象里的所有值提取成数组，就是我们要的结果

执行后得到的最终结果：

[{"id":"1","name":"John,Ron","city":"London,Paris"},
 {"id":"2","name":"Paul,Will","city":"Darvin,Tokyo"},
 {"id":"3","name":"Dave","city":"Oslo"}]

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