如何在JavaScript中从当前日期开始循环遍历星期数组

问题原因 #

• 索引不匹配：Date.getDay() 方法返回值规则为 0=周日、1=周一...6=周六，你定义的days数组索引0=周一、6=周日，二者索引没有对齐，初始值就会取错星期。
• 未更新目标索引：你额外声明的变量i和实际用来取值的currentDay没有关联，每次点击后没有修改currentDay的值，所以始终取的都是页面初始化时的固定星期值。

修正后代码 #

JavaScript 代码： #

const days = [
  "Monday ",
  "Tuesday ",
  "Wednesday ",
  "Thursday ",
  "Friday ",
  "Saturday ",
  "Sunday ",
];

const btn = document.querySelector("#btn");
const list = document.querySelector("#list");

let d = new Date();
// 修正索引对齐：把getDay返回值转换为和days数组对应的索引
let currentDay = d.getDay() === 0 ? 6 : d.getDay() - 1;

btn.addEventListener("click", function () {
  let newEl = document.createElement("li");
  newEl.textContent = days[currentDay];
  list.append(newEl);
  // 直接更新currentDay，取模7实现自动循环
  currentDay = (currentDay + 1) % days.length;
});

HTML 代码（无需修改）： #

<h2>Days of the week:</h2>
<ul id="list"></ul>
<button id="btn">Add one more day</button>

核心修改说明 #

• 移除了无意义的冗余变量i，直接操作用来取值的currentDay变量
• 用(currentDay + 1) % days.length 实现自动循环，不需要单独写if判断重置索引
• 修正了初始索引的偏移问题，保证页面加载后第一次点击就能正确输出当前星期

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