JavaScript - Switch Case 语句

JavaScript 中的 switch case 是一个条件语句，用于根据表达式的值执行不同的代码块。该表达式会被求值，如果其值与其中一个 case 标签的值匹配，则执行与该 case 关联的代码块。如果所有 case 标签的值均不匹配，则执行与 default 标签关联的代码块。

你可以使用多个 if...elseif 语句(如上一章所述)来执行多路分支。然而，这并非总是最佳解决方案，尤其是在所有分支都依赖于单个变量的值时。

从 JavaScript 1.2 开始，您可以使用 switch 语句来处理这种情况，并且它比重复的 if...else if 语句更高效。

流程图

以下流程图解释了 switch-case 语句的工作原理。

语法

switch 语句的目标是给出一个要计算的表达式，并根据该表达式的值执行几个不同的语句。解释器会根据表达式的值检查每个 case，直到找到匹配项。如果没有匹配项，则使用 default 条件。

switch (expression) {
   case condition 1: statement(s)
   break;
   
   case condition 2: statement(s)
   break;
   ...
   
   case condition n: statement(s)
   break;
   
   default: statement(s)
}

• break − 语句关键字指示特定 case 的结束。如果省略 break 语句，解释器将继续执行后续每个 case 中的每个语句。

• default − default 关键字用于定义默认表达式。当任何 case 不符合 switch-case 语句的表达式时，它将执行默认代码块。

示例

让我们通过一些示例详细了解 switch case 语句。

示例

在下面的示例中，我们有一个 grade 变量，并将其用作 switch case 语句的表达式。 switch case 语句用于根据 grade 变量的值执行不同的代码块。

对于成绩"A"，它会在输出中打印"Good job"，并像我们使用 break 语句一样终止 switch case 语句。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
	  let grade = 'A';
      output.innerHTML += "Entering switch block <br />";
      switch (grade) {
         case 'A': output.innerHTML += "Good job <br />";
            break;
         case 'B': output.innerHTML += "Passed <br />";
            break;
         case 'C': output.innerHTML += "Failed <br />";
            break;
         default: output.innerHTML += "Unknown grade <br />";
      }
      output.innerHTML += "Exiting switch block";
   </script>
</body>
</html>

输出

Entering switch block
Good job
Exiting switch block

Break 语句在 switch-case 语句中起着重要作用。请尝试以下示例，该示例使用了不带 break 语句的 switch-case 语句。

示例:不带 break 语句

当我们在 switch case 语句的任何 case 中未使用 break 语句时，它会继续执行下一个 case，而不会终止它。

在下面的代码中，我们没有在 case 'A' 和 'B' 中使用 break 语句。因此，对于等级 'A'，它将执行 case A、B 和 C 的语句，然后终止 switch case 语句的执行。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      let grade = 'A';
      output.innerHTML += "Entering switch block<br />";
      switch (grade) {
         case 'A': output.innerHTML += "Good job <br />";
         case 'B': output.innerHTML += "Passed <br />";
         case 'C': output.innerHTML += "Failed <br />";
         default: output.innerHTML += "Unknown grade <br />";
      }
      output.innerHTML += "Exiting switch block";
   </script>
</body>
</html>

输出

Entering switch block
Good job
Passed
Failed
Unknown grade
Exiting switch block

示例:通用代码块

有时，开发人员需要对表达式的多个值执行通用代码块。它与 if-else 语句中的"或"条件非常相似。

在下面的代码中，我们针对 A 和 B 以及 C 和 D 两种情况执行相同的代码块。您可以尝试更改等级变量的值并观察输出。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      let output = document.getElementById("output");
      var grade = 'C';
      output.innerHTML += "Entering switch block <br />";
      switch (grade) {
         case 'A':
         case 'B': output.innerHTML += "Passed <br />";
            break;
         case 'C':
         case 'D': output.innerHTML += "Failed! <br />";
            break;
         default: output.innerHTML += "Unknown grade <br />";
      }
      output.innerHTML += "Exiting switch block";
   </script>
</body>
</html>

输出

Entering switch block
Failed!
Exiting switch block

示例:严格比较

switch case 语句使用严格相等运算符将表达式值与 case 值进行比较。

以下代码中的"num"变量包含整数值。在 switch case 语句中，所有 case 都包含在字符串中。因此，代码执行 default 语句。

<html>
<head>
   <title> JavaScript - Switch case statement </title>
</head>
<body>
   <p id = "output"> </p>
   <script>
      const output = document.getElementById("output");
      let num = 10;
      switch (num) {
         case '10': output.innerHTML += "10 Marks!";
            break;
         case '11': output.innerHTML += "11 Marks!";
            break;
         default: output.innerHTML += "Input is not a string!";
      }
   </script>
</body>
</html>

输出

Input is not a string!