for循环的问题

Question

var num = 0;
outermost:
for(var i =0;i<10;i++){
   for(var j = 0;j<10;j++){
    if(i==5&&j==5){
      continue outermost;
    }
num++;
 }
}
console.log(num);
      
// 95

这个结果是怎么得出来的?循环的时候是内层循环从0到9循环完毕后再外层循环吗？求解，嵌套循环的原理是怎样的，求助。谢谢

Answer 1

你这个循环，因为内循环后面没有语句，所以其实可以不用 lable，改成这样就好理解多了

var num = 0;
for (var i = 0; i < 10; i++) {
    for (var j = 0; j < 10; j++) {
        if (i == 5 && j == 5) {
            break;
        }
        num++;
    }
}

多一点思考

把你的问题提升一下，在内循环后加一句话再讨论就热闹了

var num = 0;
var n = 0;
outermost:
    for (var i = 0; i < 10; i++) {
        for (var j = 0; j < 10; j++) {
            if (i == 5 && j == 5) {
                continue outermost;
            }
            num++;
        }
        n++;
    }
console.log(num, n);

然后来看怎么去掉 label

加个变量来记录状态

因为在 i == 5 && j == 5 的时候，直接继续了外层循环，跳过了内层循环后面的 n++，所以很容易想到在 break 记个状态，之后外循环根据状态来判断是否执行后面的语句

var num = 0;
var n = 0;
for (var i = 0; i < 10; i++) {
    var isIgnored = false;
    for (var j = 0; j < 10; j++) {
        if (i == 5 && j == 5) {
            isIgnored = true;
            break;
        }
        num++;
    }

    if (!isIgnored) {
        n++;
    }
}
console.log(num, n);

当然，如果 n++ 那里语句比较多，可以改成

if (isIgnored) {
    break;
}

n++

然后这种方法看起来结构比较复杂。如果把内循环作为独立的逻辑，封装成 function，逻辑就简单一些。

把内循环封装成 function

很幸运，javascript 可以在任意位置定义 function。我们通过 function 的返回值来决定是否继续后面的内容

var num = 0;
var n = 0;
for (var i = 0; i < 10; i++) {
    function innerLoop() {
        for (var j = 0; j < 10; j++) {
            if (i == 5 && j == 5) {
                return false;
            }
            num++;
        }
        return true;
    }

    if (innerLoop()) {
        n++;
    }
}
console.log(num, n);

把 function 提出来

也许这样看还是不够清楚，因为在循环内部定义 function 涉及到变量作用域贯穿的问题，当然它也让大循环的代码变长了，所以把 function 提出来。

可以发现内部 function 只用到了外循环中的变量 i，所以把 i 作为一个参数传入

var num = 0;
var n = 0;

function innerLoop(i) {
    for (var j = 0; j < 10; j++) {
        if (i == 5 && j == 5) {
            return false;
        }
        num++;
    }
    return true;
}

for (var i = 0; i < 10; i++) {
    if (innerLoop(i)) {
        n++;
    }
}

console.log(num, n);

这样就清楚多了

Answer 2

当i==5 && j==5的时候，会跳出第二个for循环，所以相当于55，56，57，58，59这5次没有执行num++。
另外，很少有人在代码中用label了吧？

Answer 3

打断点调试吧