如何基于date属性对JavaScript数组进行分组并生成目标结构

原始数据 #

const Data = [
  {id: 1, name: "Dummy1", date:"2023-03-01"},
  {id: 2, name: "Dummy2", date:"2023-03-04"},
  {id: 3, name: "Dummy3", date:"2023-03-02"},
  {id: 4, name: "Dummy4", date:"2023-03-01"}
];

需求目标 #

将上述数组按date属性分组，得到以下结构（注：你提供的目标结构存在笔误，2023-03-03应为2023-03-04，以下为修正后的正确目标）：

[
  {
    "2023-03-01": [{id:1, name: "Dummy1"},{id:4, name: "Dummy4"}]
  },
  {
    "2023-03-02": [{id:3, name: "Dummy3"}]
  },
  {
    "2023-03-04": [{id:2, name: "Dummy2"}]
  }
]

你尝试的代码（存在问题） #

data.map(item => { 
  let newbject = {}; // 变量名拼写错误：newbject → newObject
  new object[item.date] = item; // 语法错误：new object → newObject，且未返回对象、未剔除date属性
})

正确实现方案 #

代码示例 #

const Data = [
  {id: 1, name: "Dummy1", date:"2023-03-01"},
  {id: 2, name: "Dummy2", date:"2023-03-04"},
  {id: 3, name: "Dummy3", date:"2023-03-02"},
  {id: 4, name: "Dummy4", date:"2023-03-01"}
];

// 第一步：按日期分组，生成键为日期的对象
const grouped = Data.reduce((acc, { date, ...rest }) => {
  acc[date] = acc[date] || [];
  acc[date].push(rest);
  return acc;
}, {});

// 第二步：转换为目标数组结构
const result = Object.entries(grouped).map(([date, items]) => ({ [date]: items }));

console.log(result);

关键说明 #

1. reduce分组：用reduce遍历数组，将相同日期的项合并到同一个数组中，同时通过解构赋值{ date, ...rest }剔除每个项里的date属性。
2. 转换为目标数组：用Object.entries把分组对象拆成键值对数组，再用map把每个键值对包装成单个对象，最终得到需求的数组结构。
3. 原方案问题：map是逐个转换元素，无法合并相同日期的项，加上代码本身的拼写、语法错误，导致无法实现分组。

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