如何在函数中使用for循环变量？循环内函数i参数失效问题排查

嘿，这个问题其实是JS里循环和函数结合时非常常见的“坑点”，核心在于变量作用域的处理。如果直接在循环里用函数引用循环变量，很容易因为变量共享导致结果不符合预期，我给你说几个靠谱的解决办法：

• ES6+首选：用let/const声明循环变量
  let是块级作用域，每次循环都会创建一个全新的变量副本，函数里拿到的就是当前循环的那个值，完全不会串：

  for (let i = 0; i < 5; i++) {
    // 比如用setTimeout模拟异步函数调用
    setTimeout(() => {
      console.log("当前循环变量：", i); // 会依次输出0、1、2、3、4
    }, 100);
  }
  

• 兼容老环境：用立即执行函数（IIFE）包裹
  把当前循环的变量作为参数传给IIFE，强制创建一个独立的作用域保存变量值，这样函数就能拿到当前循环的正确值：

  for (var i = 0; i < 5; i++) {
    (function(currentI) {
      setTimeout(() => {
        console.log("当前循环变量：", currentI); // 依次输出0-4
      }, 100);
    })(i);
  }
  

• 另一种思路：用bind绑定参数
  把循环变量作为参数绑定到函数上，让函数执行时固定拿到这个参数值：

  function printNum(num) {
    console.log("当前循环变量：", num);
  }
  
  for (var i = 0; i < 5; i++) {
    setTimeout(printNum.bind(null, i), 100);
  }
  

哈哈，这个问题和问题1是同一个根源！我先猜一下你的代码大概是这样的（是不是戳中了？）：

// 错误示例：弹窗里的i永远是循环结束后的值
var selects = document.querySelectorAll('select');
for (var i = 0; i < selects.length; i++) {
  selects[i].onchange = function() {
    alert(`你选中了：${this.value}，当前索引是：${i}`);
  };
}

问题出在哪？ #

因为你用var声明的i是函数级/全局作用域，所有select的onchange事件函数都共享同一个i的引用。当你触发select的change事件时，循环早就跑完了，i已经变成了selects.length（比如有3个select，i最后就是3），所以弹窗里的i永远是这个最终值，不是你期望的当前选项的索引。

解决办法给你三种，按需选： #

1. 最简单的方案：把var换成let
   还是用块级作用域的特性，让每次循环的i都是独立的：

   var selects = document.querySelectorAll('select');
   for (let i = 0; i < selects.length; i++) {
     selects[i].onchange = function() {
       alert(`你选中了：${this.value}，当前索引是：${i}`);
       // 现在i就是当前循环的正确索引啦
     };
   }
   

2. 用立即执行函数包裹事件处理
   给每个事件函数单独创建作用域，把当前i存成局部变量：

   var selects = document.querySelectorAll('select');
   for (var i = 0; i < selects.length; i++) {
     (function(currentI) {
       selects[currentI].onchange = function() {
         alert(`你选中了：${this.value}，当前索引是：${currentI}`);
       };
     })(i);
   }
   

3. 换用forEach循环
   forEach的回调函数本身就有独立作用域，每个元素对应的index都是专属的，完全不用操心变量共享：

   var selects = document.querySelectorAll('select');
   selects.forEach(function(select, index) {
     select.onchange = function() {
       alert(`你选中了：${this.value}，当前索引是：${index}`);
     };
   });
   

另外提一句：如果你只是想显示选中的值，其实直接用this.value就够了，但如果确实需要用到循环的索引i，上面的方法都能帮你解决问题～

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