JavaScript如何合并Array中同name属性值对象的全部属性到单个对象

核心思路 #

用分组映射的方式完成合并：

• 先以name属性值为键，建立临时映射表存储每个name对应的合并后对象
• 遍历原数组所有元素，将当前元素的所有属性合并到映射表中对应name的对象上
• 最后将映射表的所有值转为数组，就是目标结果

代码实现 #

方法1：使用Array.prototype.reduce实现（最简洁） #

const array = [
  {name:'alfa', firstValue:{value:'100'}},
  {name:'alfa', secoundValue:{value:'200'}},
  {name:'alfa', thirdValue:{value:'300'}}
];

// 分组合并
const mergedMap = array.reduce((acc, cur) => {
  // 不存在该name的分组则先初始化
  if (!acc[cur.name]) {
    acc[cur.name] = { name: cur.name };
  }
  // 合并当前对象的所有属性到分组对象
  Object.assign(acc[cur.name], cur);
  return acc;
}, {});

// 转成数组格式
const result = Object.values(mergedMap);
console.log(result);

运行后得到的result就是预期输出结果。

注意事项 #

• 如果同name的不同对象存在同名属性，后面遍历到的对象属性会覆盖前面的，符合常规合并逻辑
• 上述代码中深层属性是直接引用原对象的，如果需要深拷贝避免修改原对象，可以把Object.assign替换为深合并逻辑即可

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