这是如何运作的？ （嵌套for循环）

Question

我不明白为什么这会回来55？任何解释将不胜感激。 此代码段摘自“适用于Web开发人员的专业JavaScript”。到目前为止，我已经理解了这本书的大部分内容，但对这个概念略有挣扎。在继续之前我想清楚它。这只是为了我的理解。

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

Answer 1

下面，我添加了一些跟踪调试，以帮助您了解正在进行的操作：

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

这是控制台输出：

outermost: {i:0, num:0}
innermost: {i:0, j:0, num:0}
innermost: {i:0, j:1, num:1}
innermost: {i:0, j:2, num:2}
innermost: {i:0, j:3, num:3}
innermost: {i:0, j:4, num:4}
innermost: {i:0, j:5, num:5}
innermost: {i:0, j:6, num:6}
innermost: {i:0, j:7, num:7}
innermost: {i:0, j:8, num:8}
innermost: {i:0, j:9, num:9}
outermost: {i:1, num:10}
innermost: {i:1, j:0, num:10}
innermost: {i:1, j:1, num:11}
innermost: {i:1, j:2, num:12}
innermost: {i:1, j:3, num:13}
innermost: {i:1, j:4, num:14}
innermost: {i:1, j:5, num:15}
innermost: {i:1, j:6, num:16}
innermost: {i:1, j:7, num:17}
innermost: {i:1, j:8, num:18}
innermost: {i:1, j:9, num:19}
outermost: {i:2, num:20}
innermost: {i:2, j:0, num:20}
innermost: {i:2, j:1, num:21}
innermost: {i:2, j:2, num:22}
innermost: {i:2, j:3, num:23}
innermost: {i:2, j:4, num:24}
innermost: {i:2, j:5, num:25}
innermost: {i:2, j:6, num:26}
innermost: {i:2, j:7, num:27}
innermost: {i:2, j:8, num:28}
innermost: {i:2, j:9, num:29}
outermost: {i:3, num:30}
innermost: {i:3, j:0, num:30}
innermost: {i:3, j:1, num:31}
innermost: {i:3, j:2, num:32}
innermost: {i:3, j:3, num:33}
innermost: {i:3, j:4, num:34}
innermost: {i:3, j:5, num:35}
innermost: {i:3, j:6, num:36}
innermost: {i:3, j:7, num:37}
innermost: {i:3, j:8, num:38}
innermost: {i:3, j:9, num:39}
outermost: {i:4, num:40}
innermost: {i:4, j:0, num:40}
innermost: {i:4, j:1, num:41}
innermost: {i:4, j:2, num:42}
innermost: {i:4, j:3, num:43}
innermost: {i:4, j:4, num:44}
innermost: {i:4, j:5, num:45}
innermost: {i:4, j:6, num:46}
innermost: {i:4, j:7, num:47}
innermost: {i:4, j:8, num:48}
innermost: {i:4, j:9, num:49}
outermost: {i:5, num:50}
innermost: {i:5, j:0, num:50}
innermost: {i:5, j:1, num:51}
innermost: {i:5, j:2, num:52}
innermost: {i:5, j:3, num:53}
innermost: {i:5, j:4, num:54}
innermost: {i:5, j:5, num:55}

如您所见，内循环执行完全10次，直到i变为5，然后内循环执行5次。

Answer 2

理解这里发生的事情的最好方法是在发生时显示一些信息，如下所示：

var num = 0;
outermost: 
for (var i = 0; i < 10; i++) {
    console.log('i = ' + i);
 for (var j=0; j <10; j++) {
    console.log('j = ' + j);
    if (i == 5 && j == 5) {
        break outermost;
    }
    num++;
    console.log('num = ' + num);
 }
}
alert(num);

Fiddle Demo