JavaScript二维数组报错求助：tiles.board[i]未定义问题排查

这是一个典型的循环变量笔误导致的错误，咱们来一步步拆解问题并解决：

错误根源 #

你在paintAll()函数的内层循环里，写错了循环增量的变量：

for(var j = 0; j < 21; i++) { // 这里误用了i++，应该是j++！

具体触发错误的逻辑是这样的：

1. 外层循环初始i=0，进入内层循环后，因为你写的是i++，j的值始终停在0，而i会不断递增
2. 当i增加到10时，tiles.board[10]就不存在了——毕竟你初始化的board只有10行，索引范围是0-9
3. 这时候访问tiles.board[10][0]，自然会抛出TypeError: tiles.board[i] is undefined，刚好对应你说的第11次访问（i从0到10共11次）

修正后的代码 #

只需要把内层循环的i++改成j++就能解决问题：

function paintAll() {
    for(var i = 0; i < 10; i++) {
        for(var j = 0; j < 21; j++) { // 这里修正为j++
            console.log(tiles.board[i][j]);
            ctx.fillStyle = tiles.board[i][j].color;
            ctx.fillRect(i*30, j*30, 30, 30);
        }
    }
}

额外小建议 #

为了避免这类低级笔误，你可以试试：

• 把循环变量命名得更清晰，比如用row代替i、col代替j，一眼就能区分行和列
• 写循环时先把for(初始值; 条件; 增量)的结构完整敲出来，再填充内部逻辑
• 开发时开启ESLint这类代码检查工具，能自动帮你发现这类变量误用的问题

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