javascript - 这个 for 循环如何制作 8x8 板？

Question

var size = 8;

var board = "";

for (var y = 0; y < size; y++) {
  for (var x = 0; x < size; x++) {
    if ((x + y) % 2 == 0)
      board += " ";
    else
      board += "#";
  }
  board += "\n";
}

console.log(board);

现在我明白这会创建一个 8x8 板。我在理解第二个“for”循环如何以及做什么时遇到问题(我想了解它的行为)。据我所知，这两个循环创建了一个二维坐标系，第一个循环覆盖 y 轴，第二个循环覆盖 x 轴。我了解以下 block 的工作原理。

{
 if ((x + y) % 2 == 0)
    board += " ";
 else
    board += "#";
}

我不明白第二个 for 循环是如何覆盖 x 轴的。我开始阅读 eloquent javascript，这个问题作为练习给出。它提供了有关嵌套循环的简短信息，但没有说明这种复杂性。我搜索了以前的答案，但没有得到这方面的信息。有帮助吗？

Answer 1

“观察”变量的变化可能会让您更好地了解程序的工作原理:

var prog= [],
    table= document.querySelector('table'),
    sx= document.getElementById('x'),
    sy= document.getElementById('y'),
    smod= document.getElementById('mod');

function display(x, y, c) {
  prog.push([x,y,c]);
}

function runProgram() {
  var p= prog.shift();
  if(p) {
    var x= p[0], y= p[1], c= p[2], mod= (x+y) % 2;
    sx.innerHTML= x;
    sy.innerHTML= y;
    smod.innerHTML= mod;
    table.rows[y].cells[x].innerHTML= c;
    setTimeout(runProgram, 200);
  }
}

var size = 8;

var board = "";

for (var y = 0; y < size; y++) {
  for (var x = 0; x < size; x++) {
    if ((x + y) % 2 == 0) {
      board += " ";
      display(x, y, ' ');
    }
    else {
      board += "#";
      display(x, y, '#');
    }
  }
  board += "\n";
}
console.log(board);

runProgram();

th {
  height: 20px;
  width: 20px;
  border: 1px solid gray;
}

y= <span id="y"></span><br>
x= <span id="x"></span><br>
(x+y) % 2 = <span id="mod"></span>
<table>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
  <tr><th><th><th><th><th><th><th><th></tr>
</table>