为什么我的 Javascript 循环只运行一次？答案

【问题标题】：Why does my Javascript loop only run once?为什么我的 Javascript 循环只运行一次？
【发布时间】：2021-11-23 00:40:28
【问题描述】：

var board = ''
for (i=1;i<5;i++){
  for (i=1;i<9;i++){
    if (i%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
  for (i=0;i<8;i++){
    if (i%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
}
console.log(board);

当我尝试运行这段代码时，输出是

O#O#O#O#
#O#O#O#O

预期的输出是

O#O#O#O#
#O#O#O#O
O#O#O#O#
#O#O#O#O
O#O#O#O#
#O#O#O#O
O#O#O#O#
#O#O#O#O

我尝试在第一个 for 语句之后添加一个console.log(i)，它只返回“1”，这意味着循环只运行一次。为什么会这样？

*编辑：当我将两个内部 for 循环包装在一个函数中并调用它时，它会按预期工作

【问题讨论】：

提示：你有 2 个循环，都使用 i

标签： javascript loops for-loop

【解决方案1】：

你是

为每个循环使用相同的变量名：i
没有为那些带有let 的迭代变量使用块范围

因此，您的代码中对i 的所有引用都指向同一个绑定。

在第二个内循环结束时 - 在for (i=0;i<8;i++){ 之后 - i 是 8。然后，外循环：

for (i=1;i<5;i++){

看到i不小于5，所以停止。

为每个循环使用不同的变量名（例如i、j 和k），并使用let 声明变量。两者都可以解决，但实现 both 是个好主意。

【讨论】：

谢谢！我从来没想过！为我解决了问题

【解决方案2】：

我认为问题在于您在不同的循环语句中重用了相同的变量 i，因此内部循环正在修改该变量的值。

例如。下面我使用不同的变量名。


var board = ''
// Main loop. This loop has two inner loops that writes a pair of lines in every iteration: the odd lines and pair lines.
// Note that the declared variable 'j' will be a available in the scope of this loop and any inner loop.
// Be aware that the variable 'j' will be used in this scope,
// but any modification (like reusing in another loop) will modify the variable value of 'j'.
// For this reason another variable are declared in the inner loops.
for (var j=1;j<5;j++){

  // The first inner loop add the characters of the odd lines. 
  // To not modify the variable 'j' this loop declares another variable 'i'.
  // This 'i' variable will be used for the columns of the odd lines.
  for (var i=1;i<9;i++){    
    if (i%2 == 0){      
      board += "#";
    }
    else{      
      board += "O";
    }
  }

  board += "\n"

  // The second inner loop add the characters of the pair lines.
  // To not modify the variable 'j' this loop declares another variable 'k'.
  // This 'k' variable will be used for the columns of the pair lines.
  for (var k=0;k<8;k++){
    if (k%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
}
console.log(board);

【讨论】：

如果您可以将有用的 cmets 添加到您的代码中，可能会更好。将使读者受益。

【解决方案3】：

var board = ''
for (j=1;i<5;i++){
  for (i=1;i<9;i++){
    if (i%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
  for (i=0;i<8;i++){
    if (i%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
}
console.log(board);

有两个循环，都是索引的“i”。把一个换成'j'

【讨论】：

也许您可以在代码中添加额外的 cmets 以使读者总体受益，作为最佳实践。

【解决方案4】：

我尝试过使用代码进行实验，结果如下：

var board = ''
for (i1=0;i1<4;i1++){
  for (i2=0;i2<8;i2++){
    if (i2%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
  for (i3=0;i3<8;i3++){
    if (i3%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
}
console.log(board);

给我：

#O#O#O#O
#O#O#O#O
#O#O#O#O
#O#O#O#O
#O#O#O#O
#O#O#O#O
#O#O#O#O
#O#O#O#O

问题是相同的变量 (i) 被重用，这意味着每个循环都会重置该变量。相反，我在初始 i 之后添加了数字。

【讨论】：