JavaScript按属性分组合并数组对象元素的实现方法

完全可以实现，核心是通过firstName和lastName的组合做分组标识，把同组对象的属性合并到一起即可。

最简实现（基于reduce） #

const source = [
  { "firstName": "x", "lastName": "y", "age": 10}, 
  { "firstName": "x", "lastName": "y", "height": 100},
  { "firstName": "x", "lastName": "y", "weight": 50},
  { "firstName": "a", "lastName": "b", "age": 11}, 
  { "firstName": "a", "lastName": "b", "height": 110},
  { "firstName": "a", "lastName": "b", "weight": 60},
  { "firstName": "m", "lastName": "n", "age": 12}, 
  { "firstName": "m", "lastName": "n", "height": 120},
  { "firstName": "m", "lastName": "n", "weight": 70}
];

const merged = Object.values(source.reduce((group, item) => {
  // 生成分组唯一key，加下划线避免姓名拼接冲突
  const key = `${item.firstName}_${item.lastName}`;
  // 已存在分组就合并属性，不存在就初始化
  group[key] = group[key] ? {...group[key], ...item} : {...item};
  return group;
}, {}));

// 打印merged即可得到预期结果

逻辑说明 #

• 遍历原数组时用一个临时对象存储分组，key是两个姓名拼接的唯一标识，value是合并后的组内对象
• 每遇到一个元素，判断对应分组是否存在：存在就把当前元素的属性合并到已有组对象上，不存在就直接把当前元素作为组的初始值
• 遍历完成后用Object.values()取出临时对象里的所有值，就是最终的合并数组

注意事项 #

• 如果同组内同一个属性出现多个值，遍历顺序靠后的值会覆盖前面的值，和示例数据逻辑匹配
• 拼接分组key时必须加分隔符，否则会出现firstName: 'a', lastName: 'bc'和firstName: 'ab', lastName: 'c'key重复的bug

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