JavaScript中基于API响应按相同table_id聚合多值对象的实现求助

嘿，我看你是想把相同table_id的API响应条目聚合到一起，生成包含公共字段和结构化data数组的JSON对吧？你的现有代码有几个小问题导致没达到预期效果，我来帮你修正并优化一下：

现有代码的问题点： #

• 你在else分支里写了y.kpi_name，但原数据里的字段是y.name，这会导致往data里添加undefined
• 初始向result里push新对象时，没有把table_full_name和total这两个公共字段加进去
• 用map配合findIndex的方式虽然能实现功能，但每次查找都要遍历result数组，数据量大时效率会比较低

修正后的实现代码： #

var a = [{
    table_id: 11111111,
    table_full_name: 'Jin',
    total: '820.001',
    paytable: '220.001',
    name: 'Gross Profit',
    code: 'LSGP'
},
{
    table_id: 11111111,
    table_full_name: 'Jin',
    total: '820.001',
    paytable: '300',
    name: 'Profit',
    code: 'LSTR'
},
{
    table_id: 11111111,
    table_full_name: 'Jin',
    total: '820.001',
    paytable: '300',
    name: 'Volume',
    code: 'OCVL'
}];

// 使用reduce高效聚合数据
const result = Object.values(a.reduce((acc, currentItem) => {
    // 以table_id作为唯一标识，判断是否已存在该聚合条目
    const id = currentItem.table_id;
    if (!acc[id]) {
        // 首次遇到该table_id，初始化聚合对象，包含公共字段和空data数组
        acc[id] = {
            table_full_name: currentItem.table_full_name,
            total: currentItem.total,
            data: []
        };
    }
    // 将当前条目的name和code组成对象，添加到对应聚合条目的data数组中
    acc[id].data.push({
        name: currentItem.name,
        code: currentItem.code
    });
    return acc;
}, {}));

console.log(result);

代码逻辑说明： #

1. 用Array.reduce遍历原数组，用一个临时对象acc来暂存聚合结果，键为table_id，这样查找是否已存在该ID的条目是O(1)的时间复杂度
2. 首次遇到某个table_id时，创建包含table_full_name、total和空data数组的对象存入acc
3. 每一条数据都会把name和code组成的对象，追加到对应table_id的data数组里
4. 最后用Object.values把临时对象里的所有值提取出来，就得到了你想要的数组格式

这种方式只需要遍历原数组一次，相比你原来的实现效率更高，尤其当数据量较大时差异会更明显。

备注：内容来源于stack exchange，提问作者hellraizer