Javascript 简明教程
JavaScript - Loop Control
JavaScript Loop Control
JavaScript提供对循环和switch语句的完全控制。在某些情况下，您可能需要退出循环而不到达其底部。另外，您可能需要跳过代码块的一部分并开始循环的下一次迭代。
JavaScript provides full control to handle loops and switch statements. There may be a situation when you need to come out of a loop without reaching its bottom. There may also be a situation when you want to skip a part of your code block and start the next iteration of the loop.
为了处理所有此类情况，JavaScript提供了 break 和 continue 语句。这些语句分别用于立即退出任何循环或开始任何循环的下一个迭代。此外，JavaScript允许开发人员使用标签对循环进行命名。
To handle all such situations, JavaScript provides break and continue statements. These statements are used to immediately come out of any loop or to start the next iteration of any loop respectively. Also, JavaScript allows developers to use labels to name the loop.
我们已经在下表中解释了关键字，该关键字可用于控制循环。
We have explained the keywords in the below table, which can be used to control the loop.
Keyword |
Explanation |
break |
The 'break' keyword is used to come out of the loop. |
continue |
The 'continue' keyword is used to skip the current iteration of the loop. |
label |
The 'label' is not a keyword, but you can use any identifier followed by a colon (:) to give a label to the loop. After that, you can use the label to target the particular loop with the break and continue keyword. |
在即将到来的章节中，我们将详细介绍break、continue和label语句。
In the upcoming chapters, we will learn in detail about the break, continue and label statements.
The break Statement
JavaScript break 语句在switch语句中简要介绍过，用于提前退出循环，跳出封闭的花括号。
The JavaScript break statement, which was briefly introduced with the switch statement, is used to exit a loop early, breaking out of the enclosing curly braces.
Example
以下示例说明了将 break 语句与while循环一起使用的情况。注意，一旦 x 达到5并达到时，循环就会提前中断 −
The following example illustrates the use of a break statement with a while loop. Notice how the loop breaks out early once x reaches 5 and reaches −
<html>
<body>
<div id = "output"> </div>
<script>
const coutput = document.getElementById("output");
let x = 1;
coutput.innerHTML = "Entering the loop<br> ";
while (x < 20) {
if (x == 5) {
break; // breaks out of loop completely
}
x = x + 1;
coutput.innerHTML += x + "<br>";
}
coutput.innerHTML += "Exiting the loop!<br> ";
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>Entering the loop
2
3
4
5
Exiting the loop!
Set the variable to different value and then try...The continue Statement
JavaScript continue 语句告诉解释器立即开始循环的下次迭代并跳过剩余的代码块。遇到 continue 语句时，程序流立即移至循环检查表达式，如果条件仍然为真，则开始下一次迭代，否则控制将退出循环。
The JavaScript continue statement tells the interpreter to immediately start the next iteration of the loop and skip the remaining code block. When a continue statement is encountered, the program flow moves to the loop check expression immediately and if the condition remains true, then it starts the next iteration, otherwise the control comes out of the loop.
Example
此示例说明了将 continue 语句与while循环一起使用的情况。注意，当 x 变量中持有的索引达到5时，如何使用 continue 语句跳过打印 −
This example illustrates the use of a continue statement with a while loop. Notice how the continue statement is used to skip printing when the index held in variable x reaches 5 −
<html>
<body>
<div id = "output"> </div>
<script>
const coutput = document.getElementById("output");
let x = 1;
coutput.innerHTML = "Entering the loop<br> ";
while (x < 10) {
x = x + 1;
if (x == 5) {
continue; // skip rest of the loop body
}
coutput.innerHTML += x + "<br>";
}
coutput.innerHTML += "Exiting the loop!<br> ";
</script>
<p>Set the variable to different value and then try...</p>
</body>
</html>Entering the loop
2
3
4
6
7
8
9
10
Exiting the loop!
Set the variable to different value and then try...Using Labels to Control the Flow
从JavaScript 1.2开始，可以使用标签和 break 和 continue 来更精确地控制流。 label 只是表示符，后跟冒号（：），可以用到语句或代码块中。我们将看到两个不同的示例以理解如何将标签与break和continue结合使用。
Starting from JavaScript 1.2, a label can be used with break and continue to control the flow more precisely. A label is simply an identifier followed by a colon (:) that is applied to a statement or a block of code. We will see two different examples to understand how to use labels with break and continue.
尝试以下两个示例以更好地理解标签。
Try the following two examples for a better understanding of Labels.
Example 1
以下示例演示如何使用 break 语句实现标签。
The following example shows how to implement Label with a break statement.
在下面的示例中，我们已将“outerloop”和“innerloop”标签赋予循环。
In the example below, we have given the 'outerloop' and 'innerloop' labels to the loop.
我们在带有标签的嵌套循环中使用“break”语句。在输出中，您会看到它从内循环中打破了外循环。
We used the 'break' statement in the nested loop with the label. In the output, you can see that it breaks the outer loop from the inner loop.
<html>
<body>
<div id = "output"> </div>
<script>
const coutput = document.getElementById("output");
output.innerHTML = "Entering the loop!<br /> ";
outerloop: // This is the label name
for (let i = 0; i < 5; i++) {
output.innerHTML += "Outerloop: " + i + "<br />";
innerloop:
for (let j = 0; j < 5; j++) {
if (j > 3 ) break ; // Quit the innermost loop
if (i == 2) break innerloop; // Do the same thing
if (i == 4) break outerloop; // Quit the outer loop
output.innerHTML += "Innerloop: " + j + " <br />";
}
}
output.innerHTML += "Exiting the loop!<br /> ";
</script>
</body>
</html>Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 2
Outerloop: 3
Innerloop: 0
Innerloop: 1
Innerloop: 2
Innerloop: 3
Outerloop: 4
Exiting the loop!Example 2
在下面的代码中，我们在嵌套循环内使用带标签的 continue 语句来跳过外循环的当前迭代。每当 q 的值变为 3 时，它都会跳过当前迭代剩余代码的执行并开始一个新迭代。
In the below code, we use the continue statement with a label inside the nested loop to skip the current iteration of the outer loop. Whenever the value of q becomes 3, it skips the execution of the remaining code of the current iteration and starts a new iteration.
<html>
<head>
<title> JavaScript - Label statement </title>
</head>
<body>
<p id = "output"> </p>
<script>
let output = document.getElementById("output");
output.innerHTML += "Entering the loop!<br /> ";
outerloop: // This is the label name
for (let p = 0; p < 3; p++) {
output.innerHTML += "Outerloop: " + p + "<br />";
for (let q = 0; q < 5; q++) {
if (q == 3) {
continue outerloop;
}
output.innerHTML += "Innerloop: " + q + "<br />";
}
}
output.innerHTML += "Exiting the loop!<br /> ";
</script>
</body>
</html>Entering the loop!
Outerloop: 0
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 1
Innerloop: 0
Innerloop: 1
Innerloop: 2
Outerloop: 2
Innerloop: 0
Innerloop: 1
Innerloop: 2
Exiting the loop!