如何在JavaScript中分组转换对象数组：类型转键补零求和

要实现这个分组+重映射的复合需求，可以分三步完成：提取所有唯一类型、按日期分组填充数据、最后排序输出。

步骤1：提取所有唯一的type值 #

先从原始数组中收集所有出现过的type，确保后续每个日期对象都包含这些动态生成的键：

const data = [
  {date: '2022-12-07', type: 'freeze', value: 3},
  {date: '2022-12-06', type: 'freeze', value: 1},
  {date: '2022-12-05', type: 'freeze', value: 1},
  {date: '2022-12-04', type: 'boil',   value: 1},
  {date: '2022-12-04', type: 'freeze', value: 1},
  {date: '2022-12-05', type: 'steam',  value: 5}
];

// 收集所有唯一的type值
const uniqueTypes = [...new Set(data.map(item => item.type))];

步骤2：按日期分组并构建目标对象 #

使用reduce遍历原始数据，以日期为键分组，先为每个日期初始化包含所有type（值为0）和total（值为0）的对象，再逐个更新对应type的数值和总和：

const grouped = data.reduce((acc, item) => {
  // 若当前日期未初始化，创建包含所有type的基础对象
  if (!acc[item.date]) {
    acc[item.date] = {
      date: item.date,
      total: 0,
      // 快速生成所有type的初始键值对（值为0）
      ...Object.fromEntries(uniqueTypes.map(type => [type, 0]))
    };
  }
  // 更新当前type的数值
  acc[item.date][item.type] += item.value;
  // 更新total总和
  acc[item.date].total += item.value;
  return acc;
}, {});

步骤3：转换为数组并按日期排序 #

将分组后的对象转为数组，再按日期升序排列：

const result = Object.values(grouped).sort((a, b) => new Date(a.date) - new Date(b.date));

console.log(result);

最终输出结果 #

运行上述代码后，会得到符合要求的数组：

[
  {date: '2022-12-04', freeze: 1, boil: 1, steam: 0, total: 2},
  {date: '2022-12-05', freeze: 1, boil: 0, steam: 5, total: 6},
  {date: '2022-12-06', freeze: 1, boil: 0, steam: 0, total: 1},
  {date: '2022-12-07', freeze: 3, boil: 0, steam: 0, total: 3}
]

关键说明 #

• 用Set动态获取唯一type，完全适配数据集的类型变化，无需硬编码类型
• Object.fromEntries简化了多键初始值的生成逻辑，避免重复代码
• 通过Date对象比较实现日期排序，确保输出顺序正确

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