如何用Lodash或其他方法按ID分组对象并合并数组元素？

需求：将给定的JavaScript数组按id字段分组，分组后保留统一的elements数组，并合并同组内所有对象的files数组，得到目标结果。

原数据 #

let data = [
    { id: "1", elements: ["a","b"], files: [] },
    { id: "1", elements: ["a","b"], files: [] },
    { id: "2", elements: ["a","b","c"],
        files: [
            { name: "test1", extension: "pdf" },
            { name: "test2", extension: "pdf" }
        ]
    },
    { id: "2", elements: ["a","b","c"],
        files: [
            { name: "test3", extension: "png" },
            { name: "test4", extension: "png" },
            { name: "test5", extension: "pdf" }
        ]
    },
    { id: "2", elements: ["a","b","c"], files: [] }
];

期望结果 #

const result = [
    { id: "1", elements: ["a", "b"], files: [] },
    { id: "2", elements: ["a", "b", "c"],
        files: [
            { name: "test1", extension: "pdf" },
            { name: "test2", extension: "pdf" },
            { name: "test3", extension: "png" },
            { name: "test4", extension: "png" },
            { name: "test5", extension: "pdf" }
        ]
    }
];

方法一：使用Lodash实现 #

利用Lodash的分组与扁平化方法快速处理，默认同id分组内的elements值一致：

const _ = require('lodash');

const result = _.map(_.groupBy(data, 'id'), (group) => ({
    id: group[0].id,
    elements: group[0].elements,
    files: _.flatMap(group, 'files')
}));

• _.groupBy(data, 'id')：按id将原数组分组为键值对对象
• _.flatMap(group, 'files')：提取并扁平化合并组内所有files数组，空数组自动忽略

方法二：原生JavaScript实现 #

不依赖第三方库，用reduce完成分组与合并：

const result = Object.values(data.reduce((acc, item) => {
    if (!acc[item.id]) {
        acc[item.id] = {
            id: item.id,
            elements: item.elements,
            files: []
        };
    }
    acc[item.id].files.push(...item.files);
    return acc;
}, {}));

• data.reduce：遍历数组，用累加器存储分组结果
• 首次遇到新id时初始化分组结构，后续将当前项的files元素推入分组数组
• Object.values：将分组后的键值对转换为目标数组格式

注意：以上方案均假设同id分组内的elements数组值完全一致，若存在不一致场景，需额外处理（如取第一个值、去重合并等）。

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