JavaScript 局部赋值index仅返回dialogues首项？为何全局赋值可正常遍历

两种写法的行为差异本质是JS变量的作用域与生命周期规则导致的：

• 当index被定义在点击事件处理函数内部时，它是属于该回调函数的局部变量。每一次点击触发回调执行时，JS都会为这次执行创建独立的函数执行上下文，重新初始化一个全新的index并赋值为0。等本次回调执行完毕，这个局部变量就会被引擎垃圾回收，不会保留任何修改后的值。
  这就使得每次点击的执行流程完全一致：新建index=0→判断0小于数组长度→弹出dialogues[0]的内容→index自增为1→函数执行结束，变量销毁。下一次点击又从头开始，所以永远只能弹出第一个元素。
• 当index被定义在函数外部（全局作用域）时，这个变量的生命周期和整个页面的运行周期一致，不会因为回调函数执行结束就被销毁。上一次点击时对index的自增修改会被永久保存在内存中，下一次点击读取到的就是上次更新后的值，因此能正常顺着索引遍历数组。

完全不是必须的，而且直接把index挂到全局作用域并不是最优方案——全局变量会污染顶层命名空间，后续如果其他脚本、其他逻辑里定义了同名的index变量，很容易出现意料之外的覆盖冲突。
你完全可以利用JS的闭包特性，把index的状态封装在事件监听的外层块级作用域里，既实现状态的长期保存，又不污染全局。比如这样写：

let board = document.getElementById("board");
let dialogues = ["1", "2", "3", "4", "5", "6"];

// 用独立块级作用域隔离index，避免全局污染
{
  let index = 0;
  board.addEventListener("click", () => {    
    if (index < dialogues.length) {
      alert(dialogues[index]);
      index++;
    } else {
      index = 0;
    }            
  })
}

这种写法里，index只能被内部的点击回调函数访问，外部脚本完全无法修改它，同时回调函数会通过闭包长期持有这个变量的内存引用，实现和全局变量一样的状态持久化效果，安全性和可维护性都更高。

补充小提示：原代码的边界判断存在小瑕疵，当index自增到等于数组长度时，下一次点击会直接进入else分支把索引重置为0，本次点击不会弹出任何内容，相当于空触发一次，后续可以根据实际需求调整逻辑顺序优化体验。

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