前端获取时间戳所在周函数 -- getWeekDates

当开发网页或应用程序时，很常见的一项功能就是展示一周内的日期，尤其是在制作日历、预约系统或记录工作周报时。一个有效的JavaScript函数能够帮助自动化这一过程。本文将深入解析getWeekDates函数的内部工作机制、作用以及它在日常编程中的应用示例。

函数概述

getWeekDates函数旨在给定一个特定日期（或当前日期），计算并返回包含该日期所在周的所有日期。它产生一个日期数组，按照从周一到周日的顺序展示（或者从周日到周六，根据不同地区的习惯可能有所不同）。该函数非常灵活，能够适应多种场景，并简化日期处理过程。

函数的输入与输出

函数接收一个参数date，它可以是一个指定日期的字符串，也可以是一个表示日期时间的数值，或者为空。如果为空，则getWeekDates默认操作当前日期。函数的输出是一个字符串数组，数组的每一项都是一周内某一天的可读性高的日期格式。

函数内部逻辑

函数的内部逻辑主要包含以下几个步骤：

1. 确定起始日期

javascript 复制代码

const startDate = date ? new Date(date) : new Date();

在这一行代码中，startDate被赋值为一个Date对象，如果date参数被提供，将使用该参数，如果没有提供，则使用当前系统日期作为起始日期。

2. 提取起始日期的信息

javascript 复制代码

const day = startDate.getDate();
const weekIndex = startDate.getDay();

这两行代码用于提取所需的日期信息。day变量表示startDate所在的月份中的天数，而weekIndex变量指示startDate是星期几。在JavaScript中，Date.getDay()方法返回的是0（星期日）到6（星期六）的一个整数。

3. 计算周围的日期

在接下来的两个if语句中，函数分别处理起始日期前后的日期。

javascript 复制代码

if (weekIndex !== 0) {
  // ...
}

if (weekIndex !== 6) {
  // ...
}

如果weekIndex不是0（不是星期日），则计算并收集起始日期之前的日期。如果weekIndex不是6（不是星期六），则计算并收集起始日期之后的日期。这里考虑了西方习惯将星期日作为每周的第一天。

4. 收集并组合日期

使用两个for循环来迭代创建前后日期，并利用push方法将这些日期放入previousDates和followingDates数组。

javascript 复制代码

const previousDates = [];
for (let i = weekIndex; i > 0; i -= 1) {
    previousDates.push(new Date(startDate).setDate(day - i));
}

const followingDates = [];
for (let i = 0; i <= 6 - weekIndex; i += 1) {
    followingDates.push(new Date(startDate).setDate(day + i));
}

在这两段代码中，函数通过修改起始日期的日子来计算周围日期，并且确保了新创建的日期是按顺序排列的。

5. 输出结果

最后，所有收集到的日期组合在一起，并且通过map方法将日期对象转换为可读的日期字符串格式。

javascript 复制代码

return result.map(i => new Date(i).toDateString());

在此，result数组包含一周的所有日期值，而.toDateString()方法则将日期对象转换为了易读的格式，如"Mon Apr 12 2021"。

代码实践

getWeekDates函数能够适用于各种需要处理日期的场景。考虑到一个实际的应用场景：假设正在开发一个任务管理应用，需要为用户显示本周内的所有任务。通过getWeekDates函数，可以轻松获得日期列表，并为每一天列出相应的任务。

javascript 复制代码

let weeklyTasks = {
  // 每天任务的示例数据结构
  "Mon Apr 12 2021": ["Task 1", "Task 2"],
  // ...
};

let datesOfWeek = getWeekDates();
datesOfWeek.forEach(dateString => {
  console.log(`Tasks for ${dateString}:`, weeklyTasks[dateString]);
});

以上代码段提供了一个怎样使用getWeekDates函数的示例。它首先调用函数获得日期列表，然后使用forEach方法遍历这些日期，并打印每天的任务。这种方式极大地简化了数据结构和逻辑的复杂性。

效果展示

如图所示：