为什么我的JavaScript for循环仅运行一次？

问题根本原因 #

你所有循环共享了同一个全局作用域下的i变量，没有做变量隔离导致外层循环被提前终止：

• 最外层循环初始化i=1，满足i<5的条件进入循环体
• 第一个内层for循环直接修改同一个i，循环结束后i的值为9（循环条件是i<9，结束时i自增到9触发终止）
• 紧接着第二个内层for循环继续修改同一个i，循环结束后i的值为8（循环条件是i<8，结束时i自增到8触发终止）
• 回到最外层循环的迭代步骤，执行i++后i变成9，此时不满足i<5的条件，外层循环直接终止，所以只会执行1次，仅输出2行内容。

封装为函数后正常的原因 #

函数有独立的作用域，如果你在内层函数里声明了i变量，那内层循环的i是函数作用域的局部变量，不会修改外层循环的i，所以外层循环可以正常执行4次，输出预期的8行内容。

修复方案 #

最简单的方式是给每个循环的迭代变量用let声明，利用ES6的块级作用域隔离变量：

var board = ''
// 外层循环用let声明i，块级作用域仅在当前循环生效
for (let i=1;i<5;i++){
  // 内层循环也用let声明独立的i，不会互相干扰
  for (let i=1;i<9;i++){
    if (i%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
  // 第二个内层循环也用let声明独立的i
  for (let i=0;i<8;i++){
    if (i%2 == 0){
      board += "#";
    }
    else{
      board += "O";
    }
  }
  board += "\n"
}
console.log(board);

你也可以给不同层的循环用不同的变量名，比如外层用layer、内层用col，从根源上避免变量冲突。

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