JavaScript中如何对对象数组按id分组聚合得到指定结构

修改后的lodash实现 #

你可以在map遍历分组时，额外提取公共的name属性，同时对每组内的元素只保留设计相关字段即可：

const result = _.chain(tests)
    .groupBy('id')
    .map((group, id) => ({
        id: Number(id), // groupBy返回的键为字符串，转回数字匹配原类型
        name: group[0].name, // 同id的name为公共属性，取分组第一个元素的对应值即可
        designs: _.map(group, item => _.pick(item, ['designId', 'designName'])) // 仅提取设计相关字段
    }))
    .value();

原生JS实现（无需依赖lodash） #

如果你的项目没有重度依赖lodash，也可以用原生reduce实现，性能更优：

const result = Object.values(tests.reduce((acc, cur) => {
  // 不存在对应id的分组则先初始化
  if (!acc[cur.id]) {
    acc[cur.id] = {
      id: cur.id,
      name: cur.name,
      designs: []
    }
  }
  // 归集当前元素的设计信息到对应分组
  acc[cur.id].designs.push({
    designId: cur.designId,
    designName: cur.designName
  })
  return acc
}, {}))

注意事项 #

以上实现默认同一id对应的name值完全一致，符合你给出的示例场景。如果实际业务中存在同id不同name的异常情况，可额外添加逻辑做兼容校验。

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