如何按创建日期分组交易列表？JavaScript代码实现求助

需求说明 #

需要将给定的交易对象数组，按**年月日（如2021-04-14）**进行分组，同一日期的交易归到对应日期的分组下。

原交易数组 #

const transactions = [
  {
    date: "2021-04-16T08:52:24.408Z",
    type: "cash withdrawal",
    image: "",
    amount: "-5000",
  },
  {
    date: "2021-04-14T19:30:00.000Z",
    type: "Cash Received",
    image: "",
    amount: "5000",
  },
  {
    date: "2021-04-14T19:30:00.000Z",
    type: "Cash Received",
    image: "",
    amount: "5000",
  },
  {
    date: "2021-04-14T19:30:00.000Z",
    type: "Cash Received",
    image: "",
    amount: "5000",
  },
  {
    date: "2021-03-17T20:30:00.000Z",
    type: "Cash Received",
    image: "",
    amount: "5000",
  },
  {
    date: "2021-02-01T20:30:00.000Z",
    type: "cashwithdraw",
    image: "",
    amount: "-5000",
  },
  {
    date: "2021-01-06T20:30:00.000Z",
    type: "cashwithdraw",
    image: "",
    amount: "-5000",
  },
  {
    date: "2020-08-06T19:30:00.000Z",
    type: "Cash Received",
    image: "",
    amount: "5000",
  },
];

原代码问题分析 #

你之前写的reduce代码未能实现需求，问题出在：

• 使用了完整的ISO日期字符串（包含时分秒，如2021-04-16T08:52:24.408Z）作为分组key，导致同一日期但不同时间的交易被分到不同组
• console.log(acc?.data?.date)是错误的访问方式，acc是分组对象，没有直接的data属性，应该访问具体分组项的属性

正确实现代码 #

// 按年月日分组
const groupedTransactions = transactions.reduce((acc, item) => {
  // 提取日期的年月日部分作为分组key（如"2021-04-16"）
  const dateKey = item.date.slice(0, 10);
  
  if (!acc[dateKey]) {
    acc[dateKey] = {
      date: dateKey,
      data: []
    };
  }
  
  acc[dateKey].data.push(item);
  return acc;
}, {});

// 将分组对象转换为数组格式（更适合前端渲染展示）
const groupedArray = Object.values(groupedTransactions);

console.log(groupedArray);

代码说明 #

1. 提取分组key：通过item.date.slice(0,10)直接截取ISO日期字符串的前10位，得到纯年月日格式的字符串，确保同一日期的交易使用相同的分组key
2. reduce分组逻辑：遍历每个交易，若当前日期key不存在于累加器中，则创建对应的分组对象；将当前交易推入对应分组的data数组
3. 转换为数组：使用Object.values()将分组对象转为数组，最终结构为每个元素包含date（年月日）和该日期下的交易列表data，符合预期展示需求

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