通过FOR和IF循环了解变量作用域

Question

我的目标是为click事件创建一个函数，该函数将在每次点击时计数，并将该计数器用作数组索引，以便在整个数组中递增。 有人可以帮助我理解为什么第一个代码块产生了预期的结果，而第二个却没有。 我觉得它与可变范围有关，但这是我的第一个JavaScript项目。 谢谢。

var i = 0;

function click(){
if(i < Questions.length-1){
            i++;
            div.innerHTML = Questions[i].question;
        }
    }

不产生它们会将结果保存为以下代码：

function click(){
   for(var i = 0; i < Questions.length-1; i++){
        div.innerHTML = Questions[i].question;
    }
}

Answer 1

它与范围无关。

第一种方法是正确的，因为在每次单击时， i都会增加一次，并显示第i个问题。

在第二种方法中，每单击一次，您就可以一次遍历所有问题。 因此，最后只将最后一个问题打印在div中。

Answer 2

在第一个中，您有一个全局i 。

这意味着：

1. 如果什么都使用i会揍使用的价值click ，和
2. 首次调用click之后，您将使用上次click调用所设置的i值，或在click之外进行的任何修改。

在第二个中，您只有局部于click功能的i 。 方法完成后，将对其进行初始化，使用和丢弃。

您将innerHTML设置为所有问题，最后一组将是您看到的问题。

即使第一个（目前） 起作用 ，具有名为i的全局变量也非常危险且脆弱。 最好封装问题索引。

Answer 3

Javascript数组从索引0开始，因此您需要在递增计数器之前访问该数组。 例如，您的第一个代码应类似于：

var i = 0;

function click(){
    if (i <= Questions.length-1) {
        div.innerHTML = Questions[i].question;
        i++;
    }
}

甚至更好（更简洁）：

var i = 0;

function click(){
    if (i <= Questions.length-1) {
        div.innerHTML = Questions[i++].question;
    }
}

请注意<=而不是=因为如果您的数组大小为2，则索引1是正确的（实际上是最后一个条目）。

您的第二个代码在每次单击时遍历整个数组（然后仅显示数组中的最后一个问题），而第一个代码仅在单击元素时递增。

Answer 4

这是一种解释。 不知道这就是您要找的东西。 该代码块与javascript无关。

第一个块仅将i递增一次，第二个循环遍历它直到数组结束。

以下是我的Chrome控制台的摘录：

var i=0;
function callMe(){
if (i < arr.length-1){
i++;
console.log(arr[i]);
}
}

arr = ["one", "two", "three", "four"]

function callMe2(){
for (var j=0; j < arr.length; j++){
console.log(arr[j]);
}
}

接着..

callMe()
two 

callMe()
three 

callMe()
four 

callMe()
<blank>

callMe2()
one
two
three
four 

希望这可以帮助！