javascript - JQuery 未将正确的值附加到无序列表

Question

function endGame(num) {
    var total = Object.keys(abvMap).length;

    $("#result").empty();

    if(num == total) {
        // you won
        $("#result").append("<h4>YOU WON!</h4><p>You got all " + total + " states!</p>");
    } else {
        console.log(states);
        // didn't get all 51 states
        $("#result").append("<h4>ALMOST!</h4><p>You got " + num + " out of " + total +" states!</p><h3>Missing states:</h3><ul id=\"missing-states-list\"></ul>");
        for(var key in abvMap) {
            if(($.inArray(key, states)) == -1) {
                console.log(key);
                $.get("https://api.census.gov/data/2013/language?get=EST,LANLABEL,NAME&for=state:" + abvMap[key] + "&LAN=625", function(data) {
                    $("#missing-states-list").append("<li><div class=\"tooltip\">" + key + "<span class=\"tooltiptext\">" + data[1][0] + " spanish speakers</span></div></li>");
                });
            }
        }
    }
}

此文件的详细信息无关紧要。这里的问题出在 for 循环中，字典 abvMap 中的每个 key 都被循环遍历。 states 是一个全局数组，其中包含已经找到的状态，例如州 = [“马里兰州”、“德克萨斯州”]。 abvMap 是一个包含所有 51 个州的字典。我正在检查已经找到的 key 状态的 for 循环的每次迭代。如果没有，我会进行 API 调用并将该状态(以及来自 API 的一些数据)附加到列表 #missing-states-list。

根据 console.log() 输出判断。 states 或 key 绝对没有问题，它完美地循环了字典中的每个状态。甚至 API 调用也是正确的。但是，附加到 #missing-states-list 的始终是 Wyoming，它是 abvMap 中的最后一个条目。我知道为什么。

Answer 1

问题原因:缺乏对范围的理解

检查此示例以了解问题:

var 创建函数作用域

var funcs = []

for (var i = 0; i < 10; i++) {
  funcs.push(function() {
    console.log(i)
  })
}

funcs.forEach(function(func) {
  func()
})

虽然您可能期望此 forEach 循环会打印数字 0 到 9，但您会得到十次 10 。造成这种情况的原因是使用 var 关键字声明变量 i，这会创建一个通向每个 函数的函数作用域 code> 在 funcs 中，保存对相同 i 变量的引用。在执行 forEach 循环时，前一个 for 循环已结束，并且 i 值为 10(距离上次迭代为 9++) .

比较一下 ES6 的 let(它创建 block 作用域而不是函数作用域)在这方面的行为:

let(ES6 或正式的ES2015)创建 block 作用域:

var funcs = []

for (let i = 0; i < 10; i++) {
  funcs.push(function() {
    console.log(i)
  })
}

funcs.forEach(function(func) {
  func()
})

因为 let 创建 block 作用域，所以 for 循环的每次迭代都有其“自己的”变量 i .

使用 IIFE 包装器的 ES5 解决方案

如果您需要 ES5 解决方案，则需要 IIFE(i立即i调用f函数e表达式)包装器将是可行的方法:

var funcs = []

for (var i = 0; i < 10; i++) {
  funcs.push((function(value) {
    return function() {
      console.log(value)
    }
  }(i)))
}

funcs.forEach(function(func) {
  func()
})

这里，i 作为参数传递给每个存储其自己的副本值的函数。

对于 for..in 循环也是如此:

var funcs = [],
  obj = {
    first: "first",
    last: "last",
    always: "always"
  }
  
for (var key in obj) {
  funcs.push(function() {
    console.log(key)
  })
}

funcs.forEach(function(func) { // outputs: "always", "always", "always"
  func()
})

同样，funcs 中的所有函数都保留对同一 key 的引用，因为 var key 创建了一个函数作用域位于 for..in 循环之外。再说一次，let 会产生您可能更期望的结果:

var funcs = [],
  obj = {
    first: "first",
    last: "last",
    always: "always"
  }
  
for (let key in obj) {
  funcs.push(function() {
    console.log(key)
  })
}

funcs.forEach(function(func) {
  func()
})

还比较优秀的(!)书

Nicholas C. Zakas: "Understanding ES6", no starch press, p. 8-9.

示例取自其中。