JavaScript矩阵遍历出现TypeError: Cannot read property '0' of undefined错误求助

问题代码 #

定义的矩阵 #

var game = [
    [0,0,0,0,0],
    [0,0,0,0,0],
    [0,1,1,1,0],
    [0,0,0,0,0],
    [0,0,0,0,0]
];

循环逻辑 #

y = 0
x = 0

while (x <= 3){
    while (y <= 3) {
        if (game[x+1][y+1] == 1 && game[x][y] + game[x][y+1] + game[x][y+2] + game[x+1][y] + game[x+1][y+2] + game[x+2][y] + game[x+2][y+1] + game[x+2][y+2] <= 1 || game[x][y] + game[x][y+1] + game[x][y+2] + game[x+1][y] + game[x+1][y+2] + game[x+2][y] + game[x+2][y+1] + game[x+2][y+2] >= 4) 
        {
            after[x][y] = 0
        }
        if (game[x+1][y+1] == 0 && game[x][y] + game[x][y+1] + game[x][y+2] + game[x+1][y] + game[x+1][y+2] + game[x+2][y] + game[x+2][y+1] + game[x+2][y+2] == 3) 
        {
            after[x][y] = 1
        }
        y++
    }
    y = 0
    x++
}

报错信息 #

TypeError: Cannot read property '0' of undefined，错误指向类似game[x+2][y]的位置。

错误原因 #

game是一个5行5列的二维数组，数组索引从0开始，行和列的有效索引范围是0到4：

• 外层循环条件设为x <= 3，当x取最大值3时，x+2 = 5，此时game[5]属于数组外的未定义项，访问game[5][y]就会抛出报错。
• 内层循环条件y <= 3同理，当y取最大值3时，y+2 = 5，game[x][5]超出数组有效列范围，同样触发同类错误。

解决方法 #

方法一：调整循环边界 #

修改循环终止条件，确保x+2和y+2不超过数组最大索引4：

• 外层循环条件改为x <= 2（x最大为2时，x+2=4，刚好是数组最后一行索引）
• 内层循环条件改为y <= 2（y最大为2时，y+2=4，刚好是数组最后一列索引）

修改后的循环代码：

y = 0
x = 0

while (x <= 2){
    while (y <= 2) {
        if (game[x+1][y+1] == 1 && game[x][y] + game[x][y+1] + game[x][y+2] + game[x+1][y] + game[x+1][y+2] + game[x+2][y] + game[x+2][y+1] + game[x+2][y+2] <= 1 || game[x][y] + game[x][y+1] + game[x][y+2] + game[x+1][y] + game[x+1][y+2] + game[x+2][y] + game[x+2][y+1] + game[x+2][y+2] >= 4) 
        {
            after[x][y] = 0
        }
        if (game[x+1][y+1] == 0 && game[x][y] + game[x][y+1] + game[x][y+2] + game[x+1][y] + game[x+1][y+2] + game[x+2][y] + game[x+2][y+1] + game[x+2][y+2] == 3) 
        {
            after[x][y] = 1
        }
        y++
    }
    y = 0
    x++
}

方法二：添加边界安全判断（更健壮） #

写一个辅助函数，访问数组元素前先检查索引是否在有效范围内，超出则返回0（模拟边界外为死细胞），避免因数组尺寸变化再次出错：

function getCellValue(grid, row, col) {
    if (row < 0 || row >= grid.length || col < 0 || col >= grid[0].length) {
        return 0;
    }
    return grid[row][col];
}

然后替换原代码中的直接数组访问，简化逻辑的同时提升健壮性：

y = 0
x = 0

while (x <= 3){
    while (y <= 3) {
        const center = getCellValue(game, x+1, y+1);
        const neighbors = getCellValue(game, x, y) + getCellValue(game, x, y+1) + getCellValue(game, x, y+2) +
                          getCellValue(game, x+1, y) + getCellValue(game, x+1, y+2) +
                          getCellValue(game, x+2, y) + getCellValue(game, x+2, y+1) + getCellValue(game, x+2, y+2);

        if (center === 1 && (neighbors <= 1 || neighbors >= 4)) {
            after[x][y] = 0;
        }
        if (center === 0 && neighbors === 3) {
            after[x][y] = 1;
        }
        y++
    }
    y = 0
    x++
}

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