如何基于WEEK_DAYS数组与DOM元素实现天气应用日期动态展示

问题描述 #

我正在开发一款简易天气应用，需要展示当日及后续4天的天气信息。现有两个数组：WEEK_DAYS数组（存储一周的星期名称），以及用于显示日期名称的DOM元素数组。要求首个DOM元素始终显示当日天气，第二个显示次日天气，依此类推。

现有基础代码：

const WEEK_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const daysElements = document.querySelectorAll("span.font-light");  // DOM元素数组
const date = new Date();
const today = WEEK_DAYS[date.getDay()];  // date.getDay()返回0（周日）到6（周六）的数字

当前尝试的代码会导致所有DOM元素均显示当日日期：

[...daysElements].map((d, index) => {
  d.innerText = WEEK_DAYS.find((e) => e === today);  // 所有元素都显示当日名称，比如Saturday
})

解决方案 #

核心思路是通过日期索引的循环计算来匹配后续每一天的星期名称，利用取模运算处理一周7天的循环逻辑。

修正后的代码 #

const WEEK_DAYS = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const daysElements = document.querySelectorAll("span.font-light");
const date = new Date();
const todayIndex = date.getDay(); // 获取当日在WEEK_DAYS中的索引（0=周日，6=周六）

// 遍历DOM元素，为每个元素设置对应日期
[...daysElements].forEach((element, idx) => {
  // 计算目标日期的索引：当日索引 + 元素位置索引，取模7实现周循环
  const targetDayIndex = (todayIndex + idx) % 7;
  element.innerText = WEEK_DAYS[targetDayIndex];
});

代码说明 #

1. 改用索引计算：放弃直接取当日名称，转而获取todayIndex（date.getDay()的返回值），更便于后续日期的推导。
2. 循环索引计算：(todayIndex + idx) % 7能自动处理一周的循环逻辑——比如当日是周六（索引6），次日索引就是(6+1)%7=0（对应周日），完美衔接一周的首尾。
3. 语义化遍历：用forEach代替map，因为我们仅需修改DOM元素，不需要生成新数组，代码更符合语义。

运行效果：

• 当日为周六时，DOM元素依次显示：Saturday、Sunday、Monday、Tuesday、Wednesday
• 次日（周日）运行时，DOM元素依次显示：Sunday、Monday、Tuesday、Wednesday、Thursday，完全符合需求。

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