JavaScript 中的 switch 语句是一种条件语句，用于根据表达式的值执行不同的代码块。表达式被评估，如果它的值与某个 case 标签的值匹配，则执行与该 case 关联的代码块。如果没有 case 标签与表达式的值匹配，则执行与 default 标签关联的代码块（如果有的话）。
你可以使用多个 if...else...if 语句来实现多路分支，就像在前面章节中讨论的一样。然而，这并不总是最佳解决方案，尤其是在所有分支都依赖于单一变量的值的情况下。
从 JavaScript 1.2 开始，你可以使用 switch 语句来处理这种情况，并且比重复使用 if...else if 语句更高效。
流程图
下面的流程图解释了 switch-case 语句的工作原理。
语法
switch 语句的目标是给定一个表达式来评估，并基于该表达式的值执行若干不同的语句。解释器检查每个 case 是否与表达式的值相匹配，直到找到一个匹配为止。如果没有匹配项，则使用默认条件。
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 变量的值执行不同的代码块。
对于 grade 为 'A' 的情况，它会在输出中打印 'Good job' 并终止 switch case 语句，因为我们使用了 break 语句。
<html>
<head>
<title>JavaScript - Switch case 语句</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 语句。
示例：没有 break 语句
当我们不在 switch case 语句的任何 case 中使用 break 语句时，它会继续执行下一个 case 而不终止。
在下面的代码中，我们没有在 case 'A' 和 case 'B' 中使用 break 语句。所以，对于 grade 为 'A' 的情况，它将执行 A, B, 和 C 的 case 语句，然后终止 switch case 语句的执行。
<html>
<head>
<title>JavaScript - Switch case 语句</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 语句</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 都是字符串形式的。因此，代码执行了默认语句。
<html>
<head>
<title>JavaScript - Switch case 语句</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!