点击按钮实现星期按顺序切换的技术改造需求

要实现每次点击按钮按顺序展示下一个星期几，核心是需要保存当前显示的星期索引，而不是每次调用函数都重新生成随机数。这里有两种实用的实现方式：

方式一：全局变量记录索引（简单直接） #

这种方式适合小型场景，代码直观易懂：

<script>
// 把索引和数组放在函数外部，避免每次调用时重置状态
let currentIndex = 0;
const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];

function day() {
  // 显示当前索引对应的星期
  document.getElementById("demo").innerHTML = days[currentIndex];
  // 更新索引：到最后一个星期后自动回到第一个，实现循环
  currentIndex = (currentIndex + 1) % days.length;
}
</script>

<button onclick='day()'>Click to see</button>
<span id="demo"></span>

关键细节说明： #

• currentIndex 作为全局变量，专门记录当前显示的星期在数组中的位置，初始值设为0（对应第一个元素Monday）
• 每次点击按钮时，先渲染当前索引的星期，再把索引+1；当索引走到数组末尾时，用% days.length让它自动归0，完美实现循环切换
• 数组days放在函数外，避免每次调用函数都重复创建数组，提升小性能

方式二：闭包封装索引（更优雅的无全局污染方案） #

如果不想用全局变量，推荐用闭包把索引和数组封装起来，避免污染全局作用域：

<script>
const day = (() => {
  // 闭包内部的变量，外部无法直接访问，避免全局污染
  let currentIndex = 0;
  const days = ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'];
  
  return function() {
    document.getElementById("demo").innerHTML = days[currentIndex];
    currentIndex = (currentIndex + 1) % days.length;
  };
})();
</script>

<button onclick='day()'>Click to see</button>
<span id="demo"></span>

关键细节说明： #

• 这里用了立即执行函数表达式（IIFE），内部的currentIndex和days只会存在于闭包环境中，不会暴露到全局
• 返回的函数可以持续访问闭包内的变量，每次调用时更新索引，同样实现循环顺序切换的效果

两种方式都能满足你的需求，要是只是简单使用，第一种足够；如果在意全局变量的问题，第二种会更合适~

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