JavaScript按姓名排序对象数组并统计每日工时生成报表问题求助

嘿，我来帮你解决这个工时报表的问题！纯JavaScript就能完美实现你要的按姓名分组、统计每日工时并输出指定格式的效果，咱们一步步来～

步骤1：准备测试数据 #

先模拟你每周接收的对象数组（可以替换成你实际的数据源）：

const timeRecords = [
  { date: '2024-02-04', Full_Name: 'test One', total_hours: 2 },
  { date: '2024-02-05', Full_Name: 'test One', total_hours: 4 },
  { date: '2024-02-05', Full_Name: 'test Two', total_hours: 3 },
  // 可添加更多测试记录
];

步骤2：按姓名分组工时记录 #

用Array.reduce把同一个姓名的所有记录归为一组，这是实现分组统计的核心：

// 按姓名分组，键为Full_Name，值为该用户的所有工时记录数组
const groupedByUser = timeRecords.reduce((acc, record) => {
  const userName = record.Full_Name;
  if (!acc[userName]) {
    acc[userName] = [];
  }
  acc[userName].push(record);
  return acc;
}, {});

步骤3：统计每个用户的总工时与每日工时 #

接下来要把分组后的记录转换成包含总工时和每日（周日到周六）工时的统计数据：

// 定义报表的星期列顺序（对应周日到周六）
const weekDayLabels = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];

// 处理每个用户的统计逻辑
const userWorkStats = Object.entries(groupedByUser).map(([name, records]) => {
  // 初始化每日工时为0，数组索引对应0=周日，6=周六
  const dailyHours = new Array(7).fill(0);
  let totalHours = 0;

  records.forEach(record => {
    const workDate = new Date(record.date);
    // getDay()返回0（周日）到6（周六），正好匹配dailyHours的索引
    const dayIndex = workDate.getDay();
    const hours = parseFloat(record.total_hours) || 0; // 兼容字符串类型的工时

    dailyHours[dayIndex] += hours;
    totalHours += hours;
  });

  return {
    name,
    totalHours,
    dailyHours
  };
});

步骤4：按姓名排序统计结果 #

对统计好的用户数据按姓名排序：

// 按姓名升序排序，如需降序可交换a.name和b.name的位置
userWorkStats.sort((a, b) => a.name.localeCompare(b.name));

步骤5：生成指定格式的报表输出 #

最后把统计数据转换成你需要的报表格式，这里以控制台输出为例：

// 打印报表表头
console.log('Name Total ' + weekDayLabels.join(' '));

// 打印每个用户的工时行
userWorkStats.forEach(stat => {
  const rowContent = [
    stat.name,
    stat.totalHours,
    ...stat.dailyHours
  ].join(' ');
  console.log(rowContent);
});

运行效果 #

执行上述代码后，控制台会输出：

Name Total Sun Mon Tue Wed Thu Fri Sat
test One 6 2 4 0 0 0 0 0
test Two 3 0 3 0 0 0 0 0

完全符合你预期的报表格式！

小提示 #

• 如果你的date字段不是标准可解析格式（比如2/4/2024），可以手动拆分年月日来创建Date对象，避免解析错误。
• 如果需要把报表输出为HTML表格，只需要把输出逻辑改成生成<table>、<tr>、<td>标签即可。

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