这个特定的嵌套 for 循环在 vanilla JavaScript 中如何工作？

Question

我在全栈 Web 开发在线课程中遇到了一个测验问题，内容如下：

let sum = 0;
for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 2; j++) {
        sum = sum + i + j;
        continue;
    }
}
console.log(sum);

现在，根据小测验的答案，该问题的正确答案是25，但我不知道它是如何得出25的？当我把它写在纸上以尝试可视化时，我得到的最接近的是 15 / 16。

有人可以写一个可视化图，让我更清楚地了解这个嵌套循环是如何达到 25 的吗？

提前致谢。

Answer 1

秒后添加一个控制台，您应该会看到可视化效果

let sum = 0;
for (let i = 0; i < 5; i++) {
    for (let j = 0; j < 2; j++) {
        console.log(`sum=${sum} i=${i} j=${j}`)
        sum = sum + i + j;
        continue;
    }
}
console.log(sum);

//output
// sum=0 i=0 j=0
// sum=0 i=0 j=1 
// sum=1 i=1 j=0 
// sum=2 i=1 j=1 
// sum=4 i=2 j=0 
// sum=6 i=2 j=1 
// sum=9 i=3 j=0 
// sum=12 i=3 j=1
// sum=16 i=4 j=0
// sum=20 i=4 j=1
// 25

Answer 2

这个循环是这样计算的

(1+2+3+4) * 2 = 20 (0+1) * 5 = 5

所以总和 = 20 + 5 = 25

Answer 3

这里是循环的所有迭代，以及每次之后 sum 的值。

i = 0 j = 0 sum = 0 + 0 + 0 = 0
i = 0 j = 1 sum = 0 + 0 + 1 = 1
i = 1 j = 0 sum = 1 + 1 + 0 = 2
i = 1 j = 1 sum = 2 + 1 + 1 = 4
i = 2 j = 0 sum = 4 + 2 + 0 = 6
i = 2 j = 1 sum = 6 + 2 + 1 = 9
i = 3 j = 0 sum = 9 + 3 + 0 = 12
i = 3 j = 1 sum = 12 + 3 + 1 = 16
i = 4 j = 0 sum = 16 + 4 + 0 = 20
i = 4 j = 1 sum = 20 + 4 + 1 = 25

Answer 4

也许这会让您更直观地了解正在发生的事情：

let sum = 0;
for (let i = 0; i < 5; i++) {
console.log("loop start");
console.log("i", i);
    for (let j = 0; j < 2; j++) {
console.log("sum", sum);
console.log("j", j);
        sum = sum + i + j;
        continue;
    }
console.log("loop end");
}
console.log(sum);

Answer 5

左边是i和j的值：

0 // i
0 1 // j  // sum = 0 | sum = 1 + (0) <-- () is previous value of sum
        
1
0 1       // sum = 1 + (1) | sum = 2 + (2)
     
2
0 1       // sum = 2 + (4) | sum = 3 + (6)

3
0 1       // sum = 3 + (9) | sum = 4 + (12)

4
0 1       // sum = 4 + (16)| sum = 5 + (20)

这个特定的嵌套 for 循环在 vanilla JavaScript 中如何工作？

How does this specific nested for loop work in vanilla JavaScript?

javascript

for-loop

code-visualization

nested-for-loop