如何在 JavaScript 中使用带有 break 语句的标签?

front end technologyjavascriptweb development

本教程将教我们在 JavaScript 中使用带有 break 语句label。标签和 break 语句在 JavaScript 中并不新鲜,你们中的许多人都熟悉它们。标签是一个唯一的字符串,我们可以使用它来为 JavaScript 中的代码块、循环、switch case 等赋予身份。

我们可以将 break 关键字与 label 语句一起使用。它会在中间停止代码的执行。

在本教程中,我们将学习将标签和 break 语句与循环和代码块一起使用。

以下是标签和 break 关键字的基本定义。

  • Label −它可以是任何字符串,用于为代码块提供名称或标签。

  • Break − 它用于终止代码块、循环或 switch 语句的执行。

语法

用户可以按照以下标签语法操作。

Label:
   语句 // 可以是循环、代码块等。

在循环中使用带有 break 关键字的标签语句

在本节中,我们将学习如何使用带有 break 关键字的标签语句。大多数程序员只在循环中使用 break 语句,但也许还会使用 label 语句。

如果我们在循环中使用 break 语句,它只会中断使用它的父循环,但如果我们想中断 break 关键字父循环的外循环,我们可以在这些条件下使用标签。

语法

用户可以按照以下语法使用标签和 break 关键字从子循环中中断父循环。

parentLoop: // 父循环的标签
   for ( ) {
      childLoop: 子循环的标签
   for () {
      // 子循环的主体
      break parentLoop; // 中断父循环
   }
}

示例 1

在下面的示例中,我们取了两个字符串。我们使用两个循环匹配并继续匹配字符串的每个字符。如果两个字符串中的任何字符相同,我们将使用 break 关键字和父循环的标签停止两个循环的执行。用简单的语言来说,我们将学习使用标签和 break 从子循环停止父循环的执行。

<html>
<head>
   <title> Using the label with break keyword. </title>
</head>
<body>
   <h2> Using the label with break keyword. </h2>
   <h4> Users can see the flow of for loops and when stops using break keyword.</h4>
   <div id="output"> </div>
   <script>
      let output = document.getElementById("output");
      let str1 = "abcd";
      let str2 = "cdef";
      parentLoop:
      for (let i = 0; i< str1.length; i++) {
         childLoop:
         for (let j = 0; j < str2.length; j++) {
            if (str2[j] == str1[i]) {
               break parentLoop;
            } else {
            output.innerHTML += " str1[ " + i + " ] = " + str1[i] + "    str2[ " + j + " ] = " + str2[j] + "<br/>";
            }
         }
      }
   </script>
</body>
</html>

在上面的输出中,用户可以看到,当 str1 和 str2 的第一个字符匹配时,我们将父循环与子循环分开,并停止打印字符串的字符。在我们的例子中,"c"是第一个匹配的字符。

示例 2

您可以尝试运行以下代码来了解如何使用 break 语句处理标签

<html>
<body>
   <script>
      document.write("Entering the loop!<br /> ");
      outerloop:
        for (var i = 0; i < 5; i++) {
          document.write("Outerloop: " + i + "<br />");
         innerloop:
         for (var j = 0; j < 5; j++) {
            if (j > 3) break; // 退出最内层循环
            if (i == 2) break innerloop; // 执行相同的操作
            if (i == 4) break outerloop; // 退出外循环
            document.write("Innerloop: " + j + " <br />");
         }
      }
      document.write("Exiting the loop!<br /> ");
   </script>
</body>
</html>

使用标签和 break 关键字与代码块

在本节中,我们将学习如何使用标签和 break 关键字与代码块。我们可以为代码块添加标签,就像我们在上一节中使用标签来循环一样。之后,我们可以停止执行特定代码块的代码。

语法

用户可以查看以下语法,以使用标签和 break 关键字与代码块。

parentBlock:
   {
      // 父块主体
      childBlock: {
         break childBlock;
         // 此行将不被执行
         }
         break parentBlock;
         // 父块中的此行代码将不被执行。
   }

示例 3

在下面的示例中,我们将使用父块和子块标签。我们将使用带有 break 关键字的各个块的标签来停止两个块的执行。

<html>
<body>
   <h2> Using the label with break keyword. </h2>
   <p> Stops the execution of childBlock and parentBlock using the break keyword and respective labels. </p>
   <div id="output"> </div>
   <script>
      let output = document.getElementById("output");
      parentBlock: {
         output.innerHTML = "parent Block execution started. <br/>";
         childBlock: {
            output.innerHTML += "Execution of the child block has been started. <br/> ";
            break childBlock;
            output.innerHTML += "This will not be executed. <br/>";
         }
         break parentBlock;
         output.innerHTML += "Parent block execution ended. <br/>"
      }
      output.innerHTML += "Outside the parent block. <br/>"
   </script>
</body>
</html>

在上面的输出中,用户可以看到,由于我们在子块和父块内使用了带有标签的 break 关键字,因此它不会完成两个块的执行,并且控制流超出了父块。

结论

我们已经学会了将标签与 break 关键字一起使用,并且我们已经了解了如何使用标签来中断除父循环之外的任何其他循环。此外,我们还将研究如何将标签与代码块一起使用。


相关文章