JavaScript - 循环控制

JavaScript 循环控制

JavaScript 提供对处理循环和 switch 语句的完全控制。可能存在您需要走出循环而没有到达其底部的情况。在某些情况下，您可能希望跳过代码块的一部分并开始循环的下一次迭代。

为了处理所有这些情况，JavaScript 提供了 break 和 continue 语句。这些语句分别用于立即从任何循环中出来或开始任何循环的下一次迭代。此外，JavaScript 允许开发人员使用标签来命名循环。

我们已经解释了下表中的关键字，这些关键字可用于控制循环。

关键词	解释
break	'break' 关键字用于从循环中出来。
continue	'continue' 关键字用于跳过循环的当前迭代。
label	'label' 不是关键字，但你可以使用任何标识符后跟冒号（:) 来为循环提供标签。之后，您可以使用标签通过 break 和 continue 关键字来定位特定循环。

在接下来的章节中，我们将详细学习 break、continue 和 label 语句。

break 语句

JavaScript break 语句（在 switch 语句中简要介绍）用于提前退出循环，从封闭的大括号中跳出。

流程图

break 语句的流程图如下所示 -

Break Statement

例

以下示例说明了如何将 break 语句与 while 循环一起使用。请注意，一旦 x 达到 5 并达到 - ，循环是如何提前中断的


<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...

continue 语句

JavaScript continue 语句告诉解释器立即开始循环的下一次迭代并跳过剩余的代码块。当遇到 continue 语句时，程序流会立即移动到循环检查表达式，如果条件保持为真，则开始下一次迭代，否则控件退出循环。

例

此示例说明了如何将 continue 语句与 while 循环一起使用。请注意，当变量 x 中保存的索引达到 5 时，如何使用 continue 语句跳过打印 -


<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...

使用标签控制流

从 JavaScript 1.2 开始，标签可以与 break 一起使用，并继续更精确地控制流。标签只是一个标识符，后跟一个冒号（:) 应用于语句或代码块。我们将看到两个不同的示例，以了解如何使用 break 和 continue 的标签。

'continue' 或 'break' 语句与其标签名称之间不允许换行。此外，标签名称和关联循环之间不应有任何其他语句。

请尝试以下两个示例，以便更好地了解 Labels。

示例 1

以下示例说明如何使用 break 语句实现 Label。

在下面的示例中，我们为循环提供了 'outerloop' 和 'innerloop' 标签。

我们在带有标签的嵌套循环中使用了 'break' 语句。在输出中，你可以看到它从内部循环中断开了外部循环。


<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!

示例 2

在下面的代码中，我们使用嵌套循环内带有标签的 continue 语句来跳过外部循环的当前迭代。当 q 的值变为 3 时，它会跳过当前迭代的剩余代码的执行，并开始新的迭代。


<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!

打印本页