如何按日期分组将指定JavaScript数组以指定表格格式展示？

步骤说明 #

1. 按日期分组并格式化：把原始数据中的日期转换为MM-DD-YYYY格式，以此为键对各班次的sum进行聚合（若同一日期同一班次有多条数据，默认累加sum；若需保留第一条数据，可修改赋值逻辑）。
2. 生成目标格式表格：将分组后的数据整理成指定的文本或Markdown表格结构。

完整代码实现 #

const arr = [
  { sum: 77, shift: 1, date: "2020-07-05T00:00:00" },
  { sum: 25, shift: 2, date: "2020-07-05T00:00:00" },
  { sum: 10, shift: 3, date: "2020-07-05T00:00:00" },
  { sum: 13, shift: 1, date: "2020-07-06T00:00:00" },
  { sum: 66, shift: 2, date: "2020-07-06T00:00:00" },
  { sum: 30, shift: 3, date: "2020-07-06T00:00:00" },
  { sum: 50, shift: 1, date: "2020-07-07T00:00:00" }, // 修正原数据日期笔误以匹配示例输出，若无需修正可改回原日期
  { sum: 40, shift: 2, date: "2020-07-07T00:00:00" },
  { sum: 65, shift: 3, date: "2020-07-07T00:00:00" },
];

// 1. 按格式化日期分组，累加各班次sum
const groupedData = arr.reduce((acc, item) => {
  // 转换日期格式为 MM-DD-YYYY
  const [year, month, day] = item.date.split('T')[0].split('-');
  const formattedDate = `${month}-${day}-${year}`;

  // 初始化当前日期的班次数据
  if (!acc[formattedDate]) {
    acc[formattedDate] = { shift1: 0, shift2: 0, shift3: 0 };
  }

  // 累加对应班次的sum；若需保留第一条数据，改为 acc[formattedDate][`shift${item.shift}`] = item.sum;
  acc[formattedDate][`shift${item.shift}`] += item.sum;

  return acc;
}, {});

// 2. 按日期排序分组结果
const sortedDates = Object.keys(groupedData).sort((a, b) => new Date(a) - new Date(b));

// 3. 生成文本格式表格
console.log('DATE       SHIFT 1  SHIFT 2  SHIFT 3');
sortedDates.forEach(date => {
  const { shift1, shift2, shift3 } = groupedData[date];
  console.log(`${date.padEnd(12)} ${shift1.toString().padStart(6)} ${shift2.toString().padStart(6)} ${shift3.toString().padStart(6)}`);
});

// 可选：生成Markdown格式表格
console.log('\nMarkdown表格：');
console.log('| DATE       | SHIFT 1 | SHIFT 2 | SHIFT 3 |');
console.log('|------------|---------|---------|---------|');
sortedDates.forEach(date => {
  const { shift1, shift2, shift3 } = groupedData[date];
  console.log(`| ${date}     | ${shift1}     | ${shift2}     | ${shift3}     |`);
});

输出结果 #

文本格式：

DATE       SHIFT 1  SHIFT 2  SHIFT 3
07-05-2020      77      25      10
07-06-2020      13      66      30
07-07-2020      50      40      65

Markdown表格：

内容的提问来源于stack exchange，提问作者Red bad coder