【问题标题】：Why is my eloquent javascript solution crashing?为什么我雄辩的 javascript 解决方案崩溃了？
【发布时间】：2015-11-05 18:59:19
【问题描述】：

我正在尝试解决 Eloquent JavaScript 第 2 章中的最后一个问题。它在此页面的最底部：http://eloquentjavascript.net/02_program_structure.html

（我尝试复制粘贴，但主题标签符号不断弄乱格式）。

这是我崩溃的代码。似乎它陷入了无限循环或其他什么，但我不明白为什么！

var grid = "";
var bool = true;
var size = 8;

for(var i = 0; i < size; i++) {
  if(bool = true) {
     for(var i = 0; i < (size/2); i++) {
        grid += " #";
     }
     grid += "\n";
     bool = false;
  }
  else {
     for(var i = 0; i < (size/2); i++) {
        grid += "# ";
     }
     grid += "\n";
     bool = true;
  }
}
console.log(grid);

【问题讨论】：

您正在尝试与= 进行比较，= 是 assignment 运算符。您希望在您的 if 语句中使用 == 或 ===。
if(bool = true)! - 这将确保 bool 始终为真。
if (bool) 更好...但是调用 boolean bool 有点奇怪..您还真的需要重新组织操作顺序

标签： javascript loops eloquent infinite

【解决方案1】：

您正在使用赋值运算符 = 而不是比较器（ == 或 ===）。 I.d 可能会在第二个循环中更改变量的名称 for.. 它可能会与外部循环中的变量名称混淆

【讨论】：

【解决方案2】：

两个问题：

if(bool = true) 应该是 if(bool == true)（导致无限循环）
for(var i = 0; i < (size/2); i++) 应该是 for(var j = 0; j < (size/2); j++)（i 已经在外循环中使用）

建议：

将bool 更改为odd_row
如果要检查 boolean 变量是否为 true，则不需要比较：if(variable) 也可以

试试这个：https://jsfiddle.net/t3rxx9dk/

var grid = "";
var bool = true;
var size = 8;

for(var i = 0; i < size; i++) {
  if(bool == true) {
     for(var j = 0; j < (size/2); j++) {
        grid += " #";
     }
     grid += "\n";
     bool = false;
  }
  else {
     for(var j = 0; j < (size/2); j++) {
        grid += "# ";
     }
     grid += "\n";
     bool = true;
  }
}
console.log(grid)

【讨论】：

【解决方案3】：

你应该为你的迭代器使用另一个名字，你总是使用“i”，这可能会导致问题

【讨论】：

【解决方案4】：

代码的基本问题

var grid = "";
var bool = true;
var size = 8;

for(var i = 0; i < size; i++) {
  if(bool = true) {
 //       ^ -- trouble
     for(var i = 0; i < (size/2); i++) {
     //      ^  another piece of trouble
        grid += " #";
     }
     grid += "\n";
     bool = false;
  }
  else {
     for(var i = 0; i < (size/2); i++) {
        grid += "# ";
     }
     grid += "\n";
     bool = true;
  }
}
console.log(grid);

关于组织代码的更好方法

var grid = ""
var shiftLine = false;
var size = 8;

for(var i = 0; i < size; i++) {
   for(var k = 0; k < (size >> 1); k++) {
      grid += shiftLine? " #" : "# ";
   }
   shiftLine = !shiftLine;
   grid += "\n";
}

输出

# # # # 
 # # # #
# # # # 
 # # # #
# # # # 
 # # # #
# # # # 
 # # # #

练习

作为一个供您复习的练习... 这是一种在 javascript 中执行此操作的方法，该方法利用数组和字符串并演示了函数式编程的一些不同概念。

  var size = 8;
  var grid = 
   Array(size)
   .join(
         Array((size>>1)+1) // START HERE: create empty array of 1+ size/2 
                            // because we want to delimit it '# ' to get
                            // size/2 '#'s
           .join('# ')      // join its elements using "# "
                            //    this gives you a string "# # # # " 
           .trim() + '\n'   // trim off last space and add newline
    )                       // join these lines into an array of size (see Array(size) above)
   .trim()                  // trim off the empty element at the end (due to last new-line)
   .split('\n')             // split it up into array elements because we need to shift every second line
   .map(function(element, index, array) { // for each element (a line of # # # #) 
           if(index % 2 === 0)            // if its index is even
               return " " + element;      //   tack on a leading space
           else                           // otherwise
               return element;            //   leave it alone
    })
    .join('\n');                          // now join everything with a new line

   console.log(grid);

【讨论】：