Question

我的目标是为每次点击都会计算的点击事件创建一个函数，并将该计数器用作数组索引，以便在数组中递增。有人可以帮助我理解为什么第一个代码块产生了所需的结果，但第二个代码块没有。我觉得它与变量范围有关，但这是我的第一个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。

这意味着：

如果有其他内容使用i，则会破坏click中使用的值，
在您第一次使用click的最后一次调用所设置的i值或{{1}之外的任何内容时调用click之后}}。

在第二个版本中，click功能只有i本地。当方法完成时，它被初始化，使用和丢弃。

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

即使第一个工作（目前）有一个名为innerHTML的全局变量也很危险，而且很脆弱。你最好封装问题索引。

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

希望这有帮助！

用FOR和IF循环理解变量范围

4 个答案: