按日期与班次分组数组并计算每日总和问题求助

原始数组 #

const arr = [
  { sum: 77, shift: 1, date: "2020-07-05T00:00:00" },
  { sum: 25, shift: 2, date: "2020-07-05T00:00:00" },
  { sum: 5, shift: 2, date: "2020-07-05T00:00:00" },
  { sum: 15, 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会被直接赋值覆盖，而非累加。比如2020-07-05的shift2有3条数据，原代码最终只保留了最后一条的15，没有计算25+5+15的总和。

修正后的代码 #

const arr = [
  { sum: 77, shift: 1, date: "2020-07-05T00:00:00" },
  { sum: 25, shift: 2, date: "2020-07-05T00:00:00" },
  { sum: 5, shift: 2, date: "2020-07-05T00:00:00" },
  { sum: 15, 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" },
];

const grouped = arr.reduce((acc, { sum, shift, date }) => {
  // 转换日期格式为 MM-DD-YYYY
  const [year, month, day] = date.slice(0, 10).split('-');
  const formattedDate = `${month}-${day}-${year}`;
  
  // 初始化当前日期的分组对象
  if (!acc[formattedDate]) {
    acc[formattedDate] = {
      date: formattedDate,
      'shift 1': 0,
      'shift 2': 0,
      'shift 3': 0,
      totale: 0
    };
  }
  
  // 累加对应班次的数值
  acc[formattedDate][`shift ${shift}`] += sum;
  // 累加当日总数值
  acc[formattedDate].totale += sum;
  
  return acc;
}, {});

// 将分组对象转为数组，并处理班次为0的情况显示为空
const result = Object.values(grouped).map(item => ({
  ...item,
  'shift 1': item['shift 1'] === 0 ? '' : item['shift 1'],
  'shift 2': item['shift 2'] === 0 ? '' : item['shift 2'],
  'shift 3': item['shift 3'] === 0 ? '' : item['shift 3']
}));

console.log(result);

代码关键点 #

1. 日期格式转换：将原ISO日期的YYYY-MM-DD部分拆分重组为MM-DD-YYYY格式，匹配期望输出。
2. 分组初始化：每个日期分组初始化时，给三个班次设置初始值0，确保后续可以正常累加。
3. 累加逻辑：使用+=代替直接赋值，解决同一班次数据被覆盖的问题。
4. 空值处理：最后将数组中值为0的班次转为空字符串，与期望输出格式一致。

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