JavaScript中如何按相同id对对象数组分组生成目标结构？

用ES2024新增的原生Object.groupBy方法写逻辑最直观简洁，完全贴合需求的处理步骤，代码如下：

const result = Object.entries(
  Object.groupBy(data, ({ id }) => id)
).map(([id, items]) => ({
  [id]: items.map(({ id, ...rest }) => rest)
}));

逻辑说明 #

• 首先调用Object.groupBy遍历原数组，指定按id字段分组，直接得到以id为键、对应同id原条目为值的临时分组对象
• 再通过Object.entries把临时分组对象转成[id值, 同id条目数组]格式的键值对列表
• 最后遍历键值对列表，每个条目生成要求的单键对象，同时通过对象解构直接剔除每个词条里的id字段，只保留需要的word和wordId属性

如果需要兼容不支持Object.groupBy的旧运行环境，用reduce实现的版本逻辑同样清晰，还能省掉后续剔除id的步骤：

const result = Object.entries(
  data.reduce((groupMap, { id, ...wordInfo }) => {
    groupMap[id] ??= [];
    groupMap[id].push(wordInfo);
    return groupMap;
  }, {})
).map(([id, wordList]) => ({ [id]: wordList }));

两种写法的执行逻辑都和需求步骤完全对应，没有多余的嵌套和临时变量，可读性很高。

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