如何在JavaScript中对对象数组按id分组聚合关联设计信息

问题分析 #

你现有代码的问题有两点：

• 分组后未提取同组通用的name属性
• designs数组直接存入了原始完整对象，没有过滤掉id、name等多余字段

方案1：基于lodash实现 #

使用_.pick提取指定字段即可满足需求，修正后代码如下：

const result = _.chain(tests)
    .groupBy('id')
    .map((group) => ({
        // 取组内第一条的通用属性
        id: group[0].id,
        name: group[0].name,
        // 仅提取design相关字段生成数组
        designs: _.map(group, item => _.pick(item, ['designId', 'designName']))
    }))
    .value();

方案2：原生JS实现（无需依赖库） #

使用Array.reduce配合Map做分组，一次遍历即可完成聚合，性能更优：

const result = Array.from(tests.reduce((acc, cur) => {
  const { id, name, designId, designName } = cur;
  // 不存在该id分组则初始化
  if (!acc.has(id)) {
    acc.set(id, { id, name, designs: [] });
  }
  // 往对应分组的designs数组追加数据
  acc.get(id).designs.push({ designId, designName });
  return acc;
}, new Map()).values());

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