如何在JavaScript中使用reduce对嵌套键进行分组？

问题场景 #

你有如下结构的对象数组，需要按_id.meter这个嵌套字段进行分组：

[
    {
        _id: { year:2022, meter:12 },
        x:1,
        y:0
    },
    // 更多类似对象
]

尝试过reduce和group方法，但因嵌套键的处理方式错误无法生效，比如直接写({ _id.meter }) => _id.meter会报错，普通键的分组示例无法直接适配嵌套场景。

解决方案 #

方法1：修改reduce函数适配嵌套键 #

核心是正确提取嵌套字段的值，调整后的代码如下：

const inventory = [
    { _id: { year:2022, meter:12 }, x:1, y:0 },
    { _id: { year:2023, meter:12 }, x:2, y:1 },
    { _id: { year:2022, meter:15 }, x:3, y:2 }
];

const groupByMeter = inventory.reduce((group, item) => {
    // 正确提取嵌套的meter值
    const meterKey = item._id.meter;
    // 若当前分组不存在则初始化空数组，再推入当前项
    group[meterKey] = group[meterKey] ?? [];
    group[meterKey].push(item);
    return group;
}, {});

console.log(groupByMeter);

执行后会得到按_id.meter分组的结果：

{
    "12": [
        { _id: { year:2022, meter:12 }, x:1, y:0 },
        { _id: { year:2023, meter:12 }, x:2, y:1 }
    ],
    "15": [
        { _id: { year:2022, meter:15 }, x:3, y:2 }
    ]
}

方法2：修正Array.group方法的写法 #

你之前的group方法写法错误，解构语法不能直接写{ _id.meter }，可以用两种正确写法：

// 直接提取嵌套值
const result = inventory.group(item => item._id.meter);

// 先解构_id再取meter
const result = inventory.group(({ _id }) => _id.meter);

两种写法都能实现按_id.meter分组，Array.group会返回与reduce方案结构一致的分组对象。

注意：Array.group是ES2024新增API，需确保运行环境支持该方法，若环境不兼容，优先选择reduce方案。

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