jQuery each函数内定义的变量执行后未定义的技术问询

你的问题核心在于变量作用域和var的变量提升特性，导致jQuery.each回调函数内部的变量无法在外部访问，甚至在内部逻辑里都出现了预期外的行为。

为什么会出现这个问题？ #

1. var的变量提升坑：你在if块里用var step1complete = false声明变量，由于JavaScript的变量提升机制，所有var声明会被自动提升到当前函数（也就是each的回调函数）的顶部。相当于：

jQuery.each($myObject, function(i, val) {
  var step1complete, step2complete, step3complete; // 所有var声明被提前到这里
  ce = $(this).attr('class');
  if (i === 0) {
    step1complete = true;
    if (/incomplete/i.test(ce)) {
      step1complete = false; // 这里只是赋值，不是重新声明
    }
    console.log('step1' + step1complete);
  }
  // ... 其他分支
});

这会导致你一开始给step1complete = true的赋值，在if块里被覆盖，但更关键的是——这些变量的作用域仅限于each的回调函数内部，函数执行完后，外部自然访问不到它们。

2. 函数作用域隔离：each的回调函数是一个独立的函数作用域，内部用var声明的变量被限制在这个作用域里，外部代码根本看不到这些变量。

解决方法 #

要让变量在each执行完后依然可访问，你需要在回调函数外部提前声明这些变量，然后在内部直接赋值（不要再用var重新声明）。如果你的环境支持ES6+，更推荐用let代替var，因为let是块级作用域，能避免变量提升带来的意外问题。

修改后的代码示例：

// 在each外部声明变量，让它们处于外部作用域
let step1complete = false;
let step2complete = false;
let step3complete = false;

jQuery.each($myObject, function(i, val) {
  const ce = $(this).attr('class'); // 用const声明不需要修改的变量，代码更严谨
  if (i === 0) {
    step1complete = true;
    if (/incomplete/i.test(ce)) {
      step1complete = false;
    }
    console.log('step1' + step1complete);
  } else if (i === 1) {
    step2complete = true;
    if (/incomplete/i.test(ce)) {
      step2complete = false;
    }
    console.log('step2' + step2complete);
  } else if (i === 2) {
    step3complete = true;
    if (/incomplete/i.test(ce)) {
      step3complete = false;
    }
    console.log('step3' + step3complete);
  }
});

// 现在each执行完后，外部可以正常访问这些变量了
console.log(step1complete, step2complete, step3complete);

额外优化建议 #

• 把重复的判断逻辑抽成一个小函数，减少代码冗余：

function checkStepComplete(className) {
  return !/incomplete/i.test(className);
}

// 在each里直接调用：
step1complete = checkStepComplete(ce);

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