javascript - 为什么这些 Eloquent Javascript Chessboard 解决方案之一比另一个更好

Question

我从《Eloquent Javascript》一书中研究了棋盘难题，并在不查看提示的情况下设计了以下解决方案

var newline = "\n";
var counter = .5;
var string1 = " # # # #";
var string2 = "# # # # ";
while (counter <= 3.5){
  console.log(string1 + newline);
  console.log(string2 + newline);
  counter++
}

我原本写了太多行，所以只是将计数器更改为“半步”。查看其他人如何完成此操作，我找到了这个解决方案。

    var size = 8;
for (var i = 0; i < size; i++) {
  var line = "";
  for (var j = 0; j < size; j++) {
    var total = i + j;
    if (total % 2 == 0) { 
      line += '#';
    } else {
      line += ' ';
    }
  }
  console.log(line);
}

您能否解释为什么一个版本可能比另一个版本更好？此外，对第二个问题的简单英语解释也会有所帮助。我试图简单地评论它，让自己感到头疼。

Answer 1

第二个的简单英语解释 - var size = 8 将是棋盘的大小。第一个 for 循环声明 var 行并最终将其记录到控制台。如果您愿意，它会将每一行或每一行记录到控制台。

第二个 for 循环将实际构建行或行，并将行中的每一列添加到 var line 中。它不必像第一个版本中那样声明两个字符串，而是知道每行最终应如何基于一些变量和规则进行查找。规则是如果total能被2整除，则添加“#”，如果不能，则添加“”。 total 是通过添加 i 和 j 计算得出的。

因此，在第一行中，i 始终为 0，j 将为 0，然后是 1，然后是 2，等等...所以 total 能被 2 整除，然后不能被 2 整除，然后能被 2 整除，等等...然后在第二行中 i 将等于 1，并且 j再次将是 0，然后是 1，然后是 2，等等......所以现在 total 将首先不能被 2 整除，然后可以被 2 整除，然后不能被 2 整除，等等......对于第三行，i 将是 2，这基本上相当于 i 为 0，因为 0 和 2 除以 2 时都没有余数。这就是第二个 for 循环完成相同操作的方式作为您的 string1 和 string2。抱歉，这有点啰嗦，希望它有意义......我会在下面的实际代码中添加一些注释。

// sets size of board, since the first loop will run for this amount of
// times, and log a row to console each time, and the second loop will add   
// this many characters to the string to be logged.
var size = 8;

// first loop, which will run a number of times equal to the size
// variable, and log a row to console each time
for (var i = 0; i < size; i++) {

  // declares the string to be logged as the row
  var line = "";

  // this loop will run a number of times equal to the size
  // variable, and add a character to the line variable each time,
  // either a "#" or a " "
  for (var j = 0; j < size; j++) {

    // the total variable will be used to determine if the character added
    // to the line is a "#" or a " "
    // basically, any time i is 0 or divisible by 2, the row will
    // begin with a "#" and alternate from there as j changes, 
    // if i is not divisible by 2, the row will begin with a " " 
    // and alternate from there
    var total = i + j;

    // this if else statement actually uses total to added either "#" or " "
    if (total % 2 == 0) { 
      line += '#';
    } else {
      line += ' ';
    }
  }

  // this is outside of the second loop, and now the line variable is done
  // being added to, and the line is logged
  console.log(line);
}