JavaScript实现按天分组Timestamp且每组最多3个对象的方法

问题描述 #

我是一名初级开发者，想请教如何在JavaScript中按天对timestamp进行分组，同时要求每个分组最多包含3个对象？我之前看到过仅按timestamp分组的方案，但不知道如何同时实现排序和设置分组的最大容量。

现有数据 #

const restuls= [
{date: "2022-10-14T21:14:41.000Z", id: "1"},
{date: "2022-10-14T21:15:48.000Z", id: "2"},
{date: "2022-09-20T18:16:01.000Z", id: "3"},
{date: "2022-09-20T18:16:48.000Z", id: "4"},
{date: "2022-09-20T21:14:52.000Z", id: "5"},
{date: "2022-09-20T21:14:15.000Z", id: "6"},
{date: "2022-09-20T21:14:03.000Z", id: "7"},
{date: "2022-09-18T10:09:33.000Z", id: "8"},
{date: "2022-09-18T10:08:12.000Z", id: "9"},
{date: "2022-09-18T10:07:50.000Z", id: "10"}
]

期望输出 #

[
  [
   {date: "2022-10-14T21:14:41.000Z", id: "1"},
   {date: "2022-10-14T21:15:48.000Z", id: "2"}
  ],

  [
   {date: "2022-09-20T18:16:01.000Z", id: "3"},
   {date: "2022-09-20T18:16:48.000Z", id: "4"},
   {date: "2022-09-20T21:14:52.000Z", id: "5"}
  ],
  [
   {date: "2022-09-20T21:14:15.000Z", id: "6"},
   {date: "2022-09-20T21:14:03.000Z", id: "7"}
  ],
  [
   {date: "2022-09-18T10:09:33.000Z", id: "8"},
   {date: "2022-09-18T10:08:12.000Z", id: "9"},
   {date: "2022-09-18T10:07:50.000Z", id: "10"}
  ],
]

解决方案 #

可以分三个步骤实现需求：排序、按天分组、拆分每组为最大3个元素的子组。

步骤1：按时间降序排序 #

先对原始数据按时间从晚到早排序，匹配期望输出的顺序：

const sortedResults = [...restuls].sort((a, b) => new Date(b.date) - new Date(a.date));

• 使用扩展运算符[...restuls]复制原数组，避免修改原始数据
• sort方法中通过比较两个日期的时间戳实现降序排序

步骤2：按天分组 #

将排序后的数据按YYYY-MM-DD格式的日期键分组，把同一天的元素放到同一个数组：

const groupedByDay = {};
for (const item of sortedResults) {
  // 提取日期部分作为分组键
  const dateKey = new Date(item.date).toISOString().split('T')[0];
  // 如果键不存在则初始化空数组，再推入当前元素
  groupedByDay[dateKey] = groupedByDay[dateKey] || [];
  groupedByDay[dateKey].push(item);
}

步骤3：拆分每组为最大3个元素的子组 #

遍历每个天的分组，将其拆分为最多包含3个元素的子组，最后合并所有子组得到最终结果：

const finalResult = [];
for (const group of Object.values(groupedByDay)) {
  // 每3个元素为一组拆分
  for (let i = 0; i < group.length; i += 3) {
    finalResult.push(group.slice(i, i + 3));
  }
}

完整代码 #

const restuls= [
{date: "2022-10-14T21:14:41.000Z", id: "1"},
{date: "2022-10-14T21:15:48.000Z", id: "2"},
{date: "2022-09-20T18:16:01.000Z", id: "3"},
{date: "2022-09-20T18:16:48.000Z", id: "4"},
{date: "2022-09-20T21:14:52.000Z", id: "5"},
{date: "2022-09-20T21:14:15.000Z", id: "6"},
{date: "2022-09-20T21:14:03.000Z", id: "7"},
{date: "2022-09-18T10:09:33.000Z", id: "8"},
{date: "2022-09-18T10:08:12.000Z", id: "9"},
{date: "2022-09-18T10:07:50.000Z", id: "10"}
];

// 1. 按时间降序排序
const sortedResults = [...restuls].sort((a, b) => new Date(b.date) - new Date(a.date));

// 2. 按天分组
const groupedByDay = {};
for (const item of sortedResults) {
  const dateKey = new Date(item.date).toISOString().split('T')[0];
  groupedByDay[dateKey] = groupedByDay[dateKey] || [];
  groupedByDay[dateKey].push(item);
}

// 3. 拆分每个天的组为最多3个元素的子组，合并得到最终结果
const finalResult = [];
for (const group of Object.values(groupedByDay)) {
  for (let i = 0; i < group.length; i += 3) {
    finalResult.push(group.slice(i, i + 3));
  }
}

console.log(finalResult);

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