JavaScript - switch case 语句

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

您可以像上一章那样使用多个if...else…if语句来执行多路分支。但是，这并不总是最佳解决方案，特别是当所有分支都依赖于单个变量的值时。

从 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 语句的表达式不匹配时，它将执行 default 代码块。

示例

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

示例

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

对于成绩 'A'，它在输出中打印 'Good job' 并终止 switch case 语句，因为我们使用了 break 语句。

<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 语句中的 OR 条件非常相似。

在下述代码中，我们对案例A和B，以及C和D执行相同的代码块。您可以尝试更改grade变量的值并观察输出。

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

打印页面