JavaScript数组与对象重构：按值分组转换的最优方案

嘿，我看你在用reduce处理数组分组时遇到了同日期元素被覆盖的问题——其实问题出在你之前的代码里，每次都直接把[coolItem]赋值给对应的日期键，完全没考虑这个日期键已经存在的情况，自然就会把之前的项覆盖掉啦。下面给你两种目标结构的简洁最优实现方法：

目标结构1：以日期为键的对象结构 #

这个结构的核心是，在reduce遍历的时候，先检查累加器里有没有当前日期对应的数组：如果有，就把当前项推进去；如果没有，就先初始化一个空数组再推。这里可以用逻辑或运算符来简化代码：

const groupedObject = lists.reduce((acc, currentItem) => {
  const { date, ...rest } = currentItem;
  // 检查当前日期是否已有数组，没有则初始化空数组，然后push当前项
  acc[date] = acc[date] || [];
  acc[date].push(rest);
  return acc;
}, {});

运行后得到的结果就是你想要的对象结构：

{
  '2020-12-21': [
    { summary: "event", title: "title" },
    { summary: "event 2", title: "title 2" }
  ],
  '2020-12-22': [
    { summary: "event", title: "title" }
  ]
}

目标结构2：嵌套数组结构 #

如果要得到[{title: 日期, data: 数组}, ...]这种结构，可以先得到上面的对象，再用Object.entries()把对象转成键值对数组，最后通过map转换成目标格式：

// 先得到分组后的对象
const groupedObject = lists.reduce((acc, currentItem) => {
  const { date, ...rest } = currentItem;
  acc[date] = acc[date] || [];
  acc[date].push(rest);
  return acc;
}, {});

// 转换成嵌套数组结构
const groupedArray = Object.entries(groupedObject).map(([date, data]) => ({
  title: date,
  data: data
}));

最终结果就是：

[
  {
    title: '2020-12-21',
    data: [
      { summary: "event", title: "title" },
      { summary: "event 2", title: "title 2" }
    ]
  },
  {
    title: '2020-12-22',
    data: [
      { summary: "event", title: "title" }
    ]
  }
]

如果想更简洁，也可以把两步合并成一行（不过可读性会稍降）：

const groupedArray = Object.entries(
  lists.reduce((acc, { date, ...rest }) => {
    acc[date] = acc[date] || [];
    acc[date].push(rest);
    return acc;
  }, {})
).map(([title, data]) => ({ title, data }));

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