JS中try-catch执行流程理论解释及扫雷代码疑问解答

实现背景 #

用两个二维数组实现基础版5x5扫雷游戏，功能正常，但对try-catch的行为有疑问：

• Array1为模板数组：地雷位置设为1，无地雷设为0。
• Array2根据Array1生成：每个单元格显示周围8格地雷数，通过if条件判断实现。

处理角落单元格时出现Uncaught TypeError（因单元格超出数组范围导致undefined），通过捕获错误解决问题，但有两个疑问：

1. 处理catch中的错误后，程序似乎回到try块执行下一行代码，而非继续执行catch之后的内容，这是为什么？我认为Java中并非如此。
2. 必须使用两个try-catch块分别检测上一行和下一行的地雷，若放在同一个try块中会报错，明明是相同错误，这是为什么？另外，同一行的if判断（array1[i]相关）不会报错，我猜测是因为涉及array1[i-1]或array1[i+2]这类计算。

附实现代码 #

array1 = new Array();

array1[0] = new Array(0, 1, 0, 0, 0);
array1[1] = new Array(0, 0, 1, 0, 0);
array1[2] = new Array(0, 0, 1, 0, 0);
array1[3] = new Array(0, 1, 0, 0, 1);
array1[4] = new Array(0, 0, 0, 0, 0);

let array2 = new Array();

array2[0] = new Array(0, 0, 0, 0, 0);
array2[1] = new Array(0, 0, 0, 0, 0);
array2[2] = new Array(0, 0, 0, 0, 0);
array2[3] = new Array(0, 0, 0, 0, 0);
array2[4] = new Array(0, 0, 0, 0, 0);

let cont = 0;

//Row loop ARRAY1
for (let i = 0; i < array1.length; i++) {

    //Column loop ARRAY1
    for (let j = 0; j < array1[i].length; j++) {

        /*Current cell: It goes through cell by cell of ARRAY1, if a 1 (MINA) is found,
         an X is drawn in ARRAY2 (same position)*/

        if (array1[i][j] == 1) {

            array2[i].splice(j, 1, 'x');

        } else {

            //Current row
            if (array1[i][j - 1] == 1) { cont++; }
            if (array1[i][j + 1] == 1) { cont++; }

            try {
                //+1 Row
                if (array1[i + 1][j - 1] == 1) { cont++; }
                if (array1[i + 1][j] == 1) { cont++; }
                if (array1[i + 1][j + 1] == 1) { cont++; }
            } catch (e) {}

            try {
                //-1 Row
                if (array1[i - 1][j - 1] == 1) { cont++; }
                if (array1[i - 1][j] == 1) { cont++; }
                if (array1[i - 1][j + 1] == 1) { cont++; }
            } catch (e) {}

            array2[i].splice(j, 1, cont);
            cont = 0;
        }
    }
}

console.log(array2);

疑问解答 #

1. try-catch执行逻辑的误解 #

JS的try-catch逻辑和Java本质一致：当try块内某一行抛出错误，错误行之后的try块代码会立即终止，程序跳转到对应的catch块执行错误处理；catch块执行完成后，会继续执行整个try-catch结构之后的代码，不会回到try块。

你觉得“回到try块下一行”是误解——比如当array1[i+1][j-1]越界报错，catch捕获后，try块里剩下的array1[i+1][j]和array1[i+1][j+1]根本不会执行，程序直接进入catch，执行完后继续走后面的第二个try-catch和array2赋值流程。可能是代码执行的统计结果让你产生了“没跳过”的错觉。

2. 为什么要分开两个try-catch？ #

• 放在同一个try块会出问题的原因：只要try块内任意一行抛出错误，整个try块的剩余代码都会终止。比如当i=0时，i-1=-1，array1[i-1]是undefined，访问array1[i-1][j-1]会报错，此时try块里的下行（i+1）判断代码还没执行就被终止，导致下行的地雷数没被统计，最终array2的数值错误（看起来像“报错”，实际是逻辑错误）。分开两个try-catch后，即使上行的try块报错，下行的try块仍会正常执行，不会遗漏统计。
• 同一行判断不报错的原因：array1[i]是存在的（i在0-4范围内），访问array1[i][j-1]或array1[i][j+1]时，即使索引越界（比如j=0时j-1=-1），JS只会返回undefined，undefined == 1的结果是false，不会抛出TypeError。而访问array1[i-1][j-1]时，i-1=-1导致array1[i-1]是undefined，再访问undefined的索引属性才会触发TypeError——这是两者的核心区别。

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