JavaScript按钮循环绑定索引问题：点击返回事件创建时的i值解决方案

这个坑我刚学JS的时候也踩过！核心问题出在var声明的变量没有块级作用域——循环里所有的点击事件函数共享同一个i变量，等循环执行完，i已经变成了数组的长度，所以不管点哪个按钮，输出的都是最后那个值。

给你几个最简单的解决方案，按推荐程度排序：

1. 用let替代var（最简洁） #

ES6引入的let有块级作用域，每次循环都会创建一个独立的i绑定，每个点击事件里的i都是当时循环的那个值：

for (let i = 0; i < ButtonsArray.length ; i++){
  ButtonsArray[i].onclick = function(){
    console.log(i);
  };
}

这是现在最推荐的写法，代码改动最小，逻辑清晰。

2. 用立即执行函数（IIFE）创建闭包（兼容旧环境） #

如果需要兼容不支持ES6的老浏览器，可以用闭包把当前的索引值“保存”下来：

for (var i = 0; i < ButtonsArray.length ; i++){
  // 立即执行函数，把当前的i作为参数传入
  (function(index) {
    ButtonsArray[index].onclick = function(){
      console.log(index);
    };
  })(i);
}

这里每次循环都会生成一个独立的index变量，和后续循环的i不再关联。

3. 用forEach遍历数组（更优雅） #

数组的forEach方法会自动传递当前元素的索引，而且每个迭代的回调函数都有独立的作用域：

ButtonsArray.forEach(function(button, index) {
  button.onclick = function(){
    console.log(index);
  };
});

这种写法不需要手动管理循环变量，代码更简洁易读，适合大多数场景。

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