JavaScript循环中动态命名变量及jQuery事件绑定的技术问询

嗨，我来帮你搞定这两个前端常见的小问题！

一、动态命名变量的实现 #

你想生成value_from_db_0、value_from_db_1这类动态变量，其实不推荐直接创建全局变量（容易污染全局环境，还可能和其他变量冲突），更优雅的方式是用一个对象来存储这些值：

// 创建一个专门的对象来存这些动态值
const dbValueStore = {};
for (var i = 0; i < arrayLength; i++) {
  // 用模板字符串拼接键名
  dbValueStore[`value_from_db_${i}`] = array[i].value;
}

// 之后访问的时候可以这样写：
console.log(dbValueStore.value_from_db_0); // 取第0个值
console.log(dbValueStore[`value_from_db_${2}`]); // 动态取第2个值

如果因为特殊需求必须创建全局变量（真的不推荐），可以借助window对象：

for (var i = 0; i < arrayLength; i++) {
  window[`value_from_db_${i}`] = array[i].value;
}
// 之后直接用value_from_db_0就能访问

二、事件绑定中array[i].value的取值异常问题 #

这个是经典的闭包作用域陷阱：用var声明的i是函数作用域的变量，循环结束后i的值会变成arrayLength，当change事件触发时，array[i]已经不存在了，所以会取到undefined。给你三种解决方法：

方法1：用let代替var声明i #

let是块级作用域，每次循环都会创建一个独立的i变量，完美解决问题：

for (let i = 0; i < arrayLength; i++) { 
  if( array[i].condition == '0' ) { 
    jQuery("#username").on('change', function() { 
      const value = this.value; 
      if( value === array[i].value ) { 
        // 这里的i就是当前循环对应的那个i，取值正常
        // 写你的业务逻辑
      }
    });
  }
}

方法2：用立即执行函数（IIFE）保存当前值 #

把当前循环的array[i].value封装到一个独立的作用域里：

for (var i = 0; i < arrayLength; i++) { 
  if( array[i].condition == '0' ) { 
    // 用IIFE把当前值传进去，形成独立作用域
    (function(currentDbValue) {
      jQuery("#username").on('change', function() { 
        const value = this.value; 
        if( value === currentDbValue ) { 
          // 逻辑代码
        }
      });
    })(array[i].value); // 传入当前循环的value
  }
}

方法3：用forEach循环替代普通for循环 #

forEach的回调函数本身就是独立作用域，不会有变量共享的问题：

array.forEach(item => {
  if(item.condition === '0') {
    jQuery("#username").on('change', function() {
      const value = this.value;
      if(value === item.value) {
        // 逻辑代码
      }
    });
  }
});

⚠️ 额外提醒：如果循环多次绑定change事件，会导致事件触发多次！建议绑定前先解绑：

// 先解绑再绑定，避免重复绑定
jQuery("#username").off('change').on('change', function() {
  // ...你的逻辑
});

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