From the previous study of loops, we know that by default the loop will automatically exit when the expression result is false, otherwise the loop will continue. In some cases, we do not need to wait for the loop to exit automatically, but can actively exit the loop. JavaScript provides two statements, break and continue, to exit the loop and exit (skip) the current loop.
1. continue statement
The continue statement is used to skip this loop and execute the next loop. When encountering the continue statement, the program will immediately re-test the conditional expression. If the expression result is true, the next loop will start. If the expression result is false, the loop will exit.
[Example 1] Use the continue statement to jump out of the for loop:
<script type="text/javascript">
for (var i = 1; i < 10; i++) {
if(i % 2 != 0) {
continue;
}
console.log(i);
}
</script> Analysis:
for (var i = 0; i < 10; i++){} statement can loop to obtain all numbers between 1 and 10.
The if(i % 2 != 0) statement is used to determine the value of i Can it be divisible by 2? If not, then the value in () is true, and continue; statement is executed.
In the loop body, use the if(i % 2 == 0) statement to make a judgment. If the value of i can be divided evenly by 2, use " console.log(i); " to output; if the value of i cannot be divided evenly by 2, trigger continue; statement, jump out of this loop (no output), and execute the next loop.
Output result:
2. Break statement
The break statement is used to jump out of the current syntax structure. It can terminate the code of the loop body and jump out of the current loop immediately, and execute the code after the loop (if any).
The difference between break and continue is that the continue statement only ends the current loop, while the break statement terminates the execution of the entire loop.
If we continue to use the code in Example 1 above and replace continue; with break; what will be output?
<script type="text/javascript">
for (var i = 1; i < 10; i++) {
if(i % 2 != 0) {
break;
}
console.log(i);
}
</script> The answer is: output nothing . Why is this happening? Let's analyze it:
At the beginning of the forx loop, i=1 , is 1 less than 10? Of course, then the if(i % 2 != 0) statement in the loop body starts to be executed;
then can 1 divide 2? Obviously it cannot, so if the value in () is true, the " break; " statement in the if is executed, jumping out of the entire loop directly, and there is no chance to execute the " console.log(i); " statement.
3. Nested For Loops
It is worth noting that both break and continue are only valid for the current loop. If we have nested loops, we have to be careful. Let's take a look at the following example:
for (let i = 0; i < 5; i++) {
if (i % 2 == 0) continue;
for (let j = 0; j < 5; j++) {
if (j == 2) break;
console.log(`i = ${i}, j = ${j}`);
}
}Here we have two loops, each executed 5 times (0~4). When i is an even number, the outer loop skips the current loop and executes the next one. That is to say, only when i is 1 or 3, the inner loop will be executed.
The inner loop terminates as long as the value of j is 2. Therefore, j only has 0 and 1.
The final result is as follows:
4. JavaScript tags
Starting from JavaScript 1.2, tags can be used in conjunction with break and continue to control program execution more accurately.
Tags in JavaScript are different from tags in HTML. A tag in JavaScript is an identifier (similar to a variable name) followed by a colon:. JavaScript tags can be declared before any statement or code block, and used in conjunction with break or continue to jump out of a specific loop. For example, when multiple loops are nested, simply using break can only jump out of the current loop, but not the outer loop. If you use break with labels, you can break out of multiple levels of loops at once.
The sample code is as follows:
<script type="text/javascript">
document.write("Start loop!<br /> ");
outerloop: //Define a label for (var i = 0; i < 5; i++) {
document.write("Outer loop: " + i + "<br />");
innerloop: // Define a label for (var j = 0; j < 5; j++) {
if (j > 3) break; // Break out of the inner loop if (i == 2) break innerloop; // Break out of the inner message if (i == 4) break outerloop; // Break out of the outer loop document.write( "Inner loop: " + j + " <br />");
}
}
document.write("End of loop!<br /> ");
</script> 
Note: There cannot be a newline between break or continue and the label. Additionally, no other code can appear between the label name and the associated loop.
[Recommended Learning: JavaScript Advanced Tutorial]
The above is the detailed content of JS loop learning: break and continue statements to jump out of the loop. For more information, please pay attention to other related articles on the PHP Chinese website!
