JavaScript break语句怎么用?

文章导读
Previous Quiz Next JavaScript 中的 break 语句用于终止 loop 或 switch case 语句。当在 loop 中使用 break 语句时,控制流将跳出 loop 并继续执行其他代码。
📋 目录
  1. 语法
  2. 流程图
  3. 示例 (for loop 中的 break 语句)
  4. 示例 (while loop 中的 break 语句)
  5. 带有嵌套循环的 break 语句
  6. 与 switch case 语句一起使用的 break 语句
A A

JavaScript - Break 语句



Previous
Quiz
Next

JavaScript 中的 break 语句用于终止 loop 或 switch case 语句。当在 loop 中使用 break 语句时,控制流将跳出 loop 并继续执行其他代码。

break 语句还可以在指定的 labeled statement 中用于跳转到该 labeled statement。它是控制 JavaScript 代码执行流程的有用工具。

语法

JavaScript 中 break 语句的语法如下 −

break;
OR
break [label];

break 语句中的 label 是可选的。

Note 在下一章中,我们将学习在 loop 中与 label 一起使用 break 语句。

流程图

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

Break Statement

示例 (for loop 中的 break 语句)

在下面的示例中,我们使用 for loop 进行迭代。在 loop 中使用 'if' 语句添加了条件表达式。当 'x' 的值为 5 时,将使用 break 语句 'break' 该 loop。

下面的代码仅在输出中打印 1 到 4 的值。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      output.innerHTML += "Entering the loop. <br /> ";
      for (let x = 1; x < 10; x++) {
         if (x == 5) {
            break;   // 完全跳出 loop
         }
            output.innerHTML += x + "<br />";
      }
      output.innerHTML += "Exiting the loop!<br /> ";
   </script>
</body>
</html>

输出

Entering the loop.
1
2
3
4
Exiting the loop!

示例 (while loop 中的 break 语句)

下面的代码演示了带有 'break' 语句的 while loop。在 while loop 中,每当 x 的值为 3 或 7 时,将使用 'break' 语句终止 loop。

在代码中,我们在检查条件后更新值。因此,它将首先打印 3,然后在下一次迭代中终止 loop。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      var x = 1;
      output.innerHTML += "Entering the loop. <br /> ";
      while (x < 10) {
         if (x == 3 || x == 7) {
            break;   // 完全跳出 loop
         }
         x = x + 1;
         output.innerHTML += x + "<br />";
      }
      output.innerHTML += "Exiting the loop!<br /> ";
   </script>
</body>
</html>

输出

Entering the loop.
2
3
Exiting the loop!

带有嵌套循环的 break 语句

当你有嵌套循环时,可以使用 'break' 语句跳出任意循环。例如,如果你将 'break' 语句与父循环一起使用,代码也会终止嵌套循环的所有迭代。将 'break' 语句与嵌套循环一起使用只会终止嵌套循环。

示例

在下面的示例中,x 是父循环的循环变量,y 是子循环的循环变量。

在嵌套循环中,每当 y 变为 3 时,它会跳出该循环;在外部循环中,每当 x 变为 3 时,它会跳出该循环。你不会在输出中看到 x > 3 或 y > 2。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      output.innerHTML += "Entering the loop. <br /> ";
      for (let x = 1; x < 10; x++) {
         for (let y = 1; y < 10; y++) {
            if (y == 3) {
               break; // 跳出内层循环
            }
            output.innerHTML += x + " " + y + "<br />";
         }
         if (x == 3) {
            break; // 跳出外层循环
         }
      }
      output.innerHTML += "Exiting the loop!<br /> ";
   </script>
</body>
</html>

输出

Entering the loop.
1 1
1 2
2 1
2 2
3 1
3 2
Exiting the loop!

与 switch case 语句一起使用的 break 语句

switch case 语句根据条件表达式从多个代码块中执行其中一个。'break' 语句在匹配一个或多个 case 与条件表达式的值后终止 switch case 语句。

示例

在下面的代码中,我们在每个 case 中使用了 'break' 语句。这里,变量 p 的值作为 switch case 语句的条件表达式。它匹配 'case 10'。因此,代码将执行该特定代码块,并使用 'break' 语句终止 switch case 语句。

<html>
<head>
   <title> JavaScript - Break statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      var p = 10;
      switch (p) {
         case 10:
            output.innerHTML = "p is 10";
            break;
         case 20:
            output.innerHTML = "p is 20";
            break;
         case 30:
            output.innerHTML = "p is 30";
            break;
         default:
            output.innerHTML = "p is not 10, 20 or 30";
      }
   </script>
</body>
</html>

输出

p is 10