使用JavaScript按日期整理聊天消息（Stack Overflow方案无效）

假设你的聊天消息数据结构类似如下（可根据实际结构调整）：

const chatMessages = [
  { id: 1, content: "你好", createdAt: "2024-05-20T14:30:00" },
  { id: 2, content: "在吗", createdAt: "2024-05-20T15:10:00" },
  { id: 3, content: "明天见", createdAt: "2024-05-21T09:20:00" },
  { id: 4, content: "好的", createdAt: "2024-05-21T09:25:00" },
  { id: 5, content: "晚安", createdAt: "2024-05-19T22:40:00" }
];

核心分组逻辑 #

使用数组的reduce方法，提取每条消息的日期作为分组键，将同日期的消息归类到同一数组中：

function groupMessagesByDate(messages) {
  return messages.reduce((groups, message) => {
    // 从ISO格式日期中提取YYYY-MM-DD的日期键
    const dateKey = message.createdAt.split('T')[0];
    // 初始化对应日期的分组数组
    if (!groups[dateKey]) {
      groups[dateKey] = [];
    }
    // 将当前消息加入对应分组
    groups[dateKey].push(message);
    return groups;
  }, {});
}

// 调用函数得到分组结果
const groupedMessages = groupMessagesByDate(chatMessages);
console.log(groupedMessages);

执行后得到的分组结果格式如下：

{
  "2024-05-19": [ { id: 5, content: "晚安", createdAt: "2024-05-19T22:40:00" } ],
  "2024-05-20": [
    { id: 1, content: "你好", createdAt: "2024-05-20T14:30:00" },
    { id: 2, content: "在吗", createdAt: "2024-05-20T15:10:00" }
  ],
  "2024-05-21": [
    { id: 3, content: "明天见", createdAt: "2024-05-21T09:20:00" },
    { id: 4, content: "好的", createdAt: "2024-05-21T09:25:00" }
  ]
}

适配非ISO格式日期 #

如果你的日期格式不是ISO标准（比如2024/05/20 14:30:00），可以通过Date对象统一处理日期格式：

// 通用日期键生成函数
function getDateKey(dateString) {
  const date = new Date(dateString);
  const year = date.getFullYear();
  // 月份从0开始，需+1并补零
  const month = String(date.getMonth() + 1).padStart(2, '0');
  const day = String(date.getDate()).padStart(2, '0');
  return `${year}-${month}-${day}`;
}

// 调整后的分组函数
function groupMessagesByDate(messages) {
  return messages.reduce((groups, message) => {
    const dateKey = getDateKey(message.createdAt);
    if (!groups[dateKey]) {
      groups[dateKey] = [];
    }
    groups[dateKey].push(message);
    return groups;
  }, {});
}

按日期排序分组结果 #

如果需要将分组后的结果按日期顺序（新到旧或旧到新）排列，可以将对象转为数组后排序：

// 按日期从新到旧排序
const sortedGroupedArray = Object.entries(groupedMessages)
  .sort(([dateA], [dateB]) => new Date(dateB) - new Date(dateA))
  .map(([date, messages]) => ({ date, messages }));

console.log(sortedGroupedArray);

排序后的结果格式：

[
  {
    "date": "2024-05-21",
    "messages": [
      { id: 3, content: "明天见", createdAt: "2024-05-21T09:20:00" },
      { id: 4, content: "好的", createdAt: "2024-05-21T09:25:00" }
    ]
  },
  {
    "date": "2024-05-20",
    "messages": [
      { id: 1, content: "你好", createdAt: "2024-05-20T14:30:00" },
      { id: 2, content: "在吗", createdAt: "2024-05-20T15:10:00" }
    ]
  },
  {
    "date": "2024-05-19",
    "messages": [ { id: 5, content: "晚安", createdAt: "2024-05-19T22:40:00" } ]
  }
]

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