Javascript 简明教程

JavaScript - Switch Case

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

您可以使用多个 if…else…if 语句（如上一章节中所示）执行多项分支。但这并不总是最佳解决方案，尤其是在所有分支都依赖于单个变量的值时。

从 JavaScript 1.2 开始，您可以使用 switch 语句处理这种情况，它的效率高于重复的 if…else if 语句。

Flow Chart

下方的流程图说明了 switch-case 语句的运行方式：

Syntax

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 − 语句关键字指示特定情况的结束。如果省略“break”语句，解释器将继续执行以下各个情况中的各个语句。
default − default 关键字用于定义默认表达式。当任何情况与 switch-case 语句的表达式不匹配时，它将执行默认代码块。

Examples

让我们在一些示例的帮助下详细了解 switch case 语句。

Example

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

对于成绩“A”，它在输出中打印“干得好”并终止 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 语句中起主要作用。尝试以下示例，该示例使用 switch-case 语句而不使用任何 break 语句。

Example: Without break Statement

当我们对 switch case 语句的任何情况都不使用“break”语句时，它会继续执行下一个情况而不终止它。

在下面的代码中，我们没有对情况’A’和’B’使用 break 语句。因此，对于成绩“A”，它将执行情况 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

Example: Common Code Blocks

有时，开发人员需要为表达式的多个值执行公共代码块。它与 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

Example: Strict Comparison

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

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

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