jQuery/React嵌套循环中无法访问变量的问题排查

嘿，我一眼就看出问题出在哪了——你内层forEach用的是普通函数回调，这会导致变量作用域的绑定异常，让你访问不到外部的el。别担心，有个简单的修复方法：

问题根源 #

你在each的回调里用var el = element声明了变量，但内层forEach的普通函数会创建独立的执行上下文，再加上var的函数作用域特性，实际执行中容易出现变量访问失效的情况。

修复方案：用箭头函数替代普通函数 #

箭头函数不会创建自己的this和作用域，它会直接继承外层的词法作用域，这样就能轻松访问到外部的el了。同时建议把var换成let，块级作用域更清晰，能避免不少变量提升带来的意外问题：

populateSelect2Filters(key) { 
  var _this = this 
  $(`#multi-filter-${key}`).find('option').each(function(index, element){ 
    let el = element; // 用let替代var，块级作用域更安全
    _this.refs.table.filter.currentFilter[`${key}`].value.forEach((simon) => { 
      // 现在可以正常访问el啦！
      console.log(el);
      // 在这里编写你的业务逻辑
    }) 
  }) 
  $(`#multi-filter-${key}`).trigger("change"); // 补全你未写完的触发代码
}

其他可选方案 #

如果你不想用箭头函数，也可以通过bind绑定作用域，或者把el作为额外参数传递，但箭头函数是最简洁直观的方式：

// 用bind绑定作用域的写法
_this.refs.table.filter.currentFilter[`${key}`].value.forEach(function(simon){ 
  console.log(el);
}.bind(this)) // 绑定外部函数的作用域

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