如何用for循环在JS中加载多维数组？Battleblocks项目代码报错求助

嘿，我看到你的问题啦！页面出现"aw, snap!"错误的核心原因是无限循环——你的内层for循环没有正确更新循环变量r，导致浏览器一直执行循环直到资源耗尽，直接崩溃了。

问题出在哪里？ #

来看这段出问题的代码：

for (let r = 0; r <= 100; r + 10) { 
  rowsAr[count] = c + r; 
  count++; 
}

这里的r + 10只是做了加法运算，但没有把结果赋值回给r，所以r的值永远是初始的0，循环条件r <=100永远为真，浏览器会一直跑这个循环，最终扛不住就崩溃了。

修复后的列数组代码 #

把r + 10改成r += 10（等价于r = r + 10），这样每次循环都会更新r的值，循环就能正常结束。另外我们可以简化逻辑，不用额外的count变量，直接用数组的push方法更简洁：

// 先全局声明columnArray
let columnArray = [];

function loadColsArray() { 
  for (let c = 1; c <= 10; c++) { 
    const currentColumn = [];
    // 遍历每一行的起始偏移值：0,10,20...90
    for (let r = 0; r < 100; r += 10) { 
      currentColumn.push(c + r);
    }
    columnArray.push(currentColumn);
  }
  console.log(columnArray); 
}

loadColsArray();

顺便实现你需要的行数组rowArray #

既然你也需要行数组，这里提供一个逻辑更直观的实现方式：

let rowArray = [];

function loadRowsArray() {
  // 遍历每一行的起始数字：1,11,21...91
  for (let start = 1; start <= 100; start += 10) {
    const currentRow = [];
    // 填充当前行的10个连续数字
    for (let i = 0; i < 10; i++) {
      currentRow.push(start + i);
    }
    rowArray.push(currentRow);
  }
  console.log(rowArray);
}

loadRowsArray();

验证结果 #

运行修复后的代码，你会得到完全符合需求的数组：

• columnArray[0] = [1,11,21,...,91]，columnArray[1] = [2,12,22,...,92]，以此类推
• rowArray[0] = [1,2,...,10]，rowArray[1] = [11,12,...,20]，以此类推

这样就不会再出现页面崩溃的问题啦，祝你Battleblocks项目学习顺利！

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