如何在JavaScript中使用switch语句
介绍
条件语句是所有编程语言中最有用和最常见的特性之一。 How To Write Conditional Statements in JavaScript描述了如何使用if
、else
和else if
关键字来控制基于不同的程序的流程条件,在 JavaScript 中通常是用户输入的结果。
除了 if...else
之外,JavaScript 还有一个称为 switch
语句的功能。 switch
是一种条件语句,它将针对多个可能的情况评估表达式并根据匹配的情况执行一个或多个代码块。 switch
语句与包含许多 else if
块的条件语句密切相关,它们通常可以互换使用。
在本教程中,我们将学习如何使用 switch
语句,以及如何使用相关的关键字 case
、break
和 default
。 最后,我们将介绍如何在 switch
语句中使用多个案例。
转变
switch
语句计算表达式并根据匹配的情况执行代码。 基本语法类似于 if
语句。 它将始终使用 switch () {}
编写,括号中包含要测试的表达式,大括号中包含要执行的潜在代码。
下面是一个带有两个 case
语句和一个称为 default
的备用语句的 switch
语句示例。
switch (expression) { case x: // execute case x code block break; case y: // execute case y code block break; default: // execute default code block }
按照上面代码块的逻辑,这是将发生的事件序列:
- 表达式被评估。
- 第一个
case
、x
将针对表达式进行测试。 如果匹配,代码将执行,break
关键字将结束switch
块。 - 如果不匹配,将跳过
x
并针对表达式测试y
情况。 如果y
匹配表达式,代码将执行并退出switch
块。 - 如果所有情况都不匹配,则
default
代码块将运行。
让我们按照上面的语法制作一个 switch
语句的工作示例。 在此代码块中,我们将使用 new Date()
方法查找星期几,然后 getDay()
打印对应于当前日期的数字。 0
代表星期日,一直到 6
代表星期六。 我们将从设置变量开始。
const day = new Date().getDay();
使用 switch
,我们将在一周的每一天向控制台发送一条消息。 该程序将按从上到下的顺序运行以查找匹配项,一旦找到匹配项,break
命令将停止 switch
块继续评估语句。
周.js
// Set the current day of the week to a variable, with 0 being Sunday and 6 being Saturday const day = new Date().getDay(); switch (day) { case 0: console.log("It's Sunday, time to relax!"); break; case 1: console.log("Happy Monday!"); break; case 2: console.log("It's Tuesday. You got this!"); break; case 3: console.log("Hump day already!"); break; case 4: console.log("Just one more day 'til the weekend!"); break; case 5: console.log("Happy Friday!"); break; case 6: console.log("Have a wonderful Saturday!"); break; default: console.log("Something went horribly wrong..."); }
Output'Just one more day 'til the weekend!'
此代码在星期四进行了测试,对应于 4
,因此控制台输出为 Just one more day 'til the weekend!
。 根据您测试代码的一周中的哪一天,您的输出会有所不同。 我们在末尾包含了一个 default
块以在出现错误时运行,在这种情况下不应发生错误,因为一周中只有 7 天。 例如,我们也可以只打印周一到周五的结果,而 default
块可能在周末有相同的消息。
如果我们在每条语句中都省略了 break
关键字,那么其他 case
语句都不会计算为真,但程序会继续检查直到结束。 为了使我们的程序更快更高效,我们包含了 break
。
开关范围
在某些情况下,您可能需要评估 switch
块中的一系列值,而不是上面示例中的单个值。 我们可以通过将表达式设置为 true
并在每个 case
语句中执行操作来做到这一点。
为了使这更容易理解,我们将使用一个熟悉的示例。 在 条件语句 教程中,我们制作了一个评分应用程序,它将获取一个数字分数并将其转换为字母等级,具有以下要求。
- 90及以上等级为A
- 80 到 89 的等级是 B
- 70 到 79 的等级是 C
- 60 到 69 的等级是 D
- 59或以下等级为F
现在我们可以把它写成 switch
语句。 由于我们正在检查一个范围,我们将在每个 case
中执行操作以检查每个表达式是否计算为 true
然后在满足 [X195X 的要求时退出该语句] 已经很满意了。
成绩.js
// Set the student's grade const grade = 87; switch (true) { // If score is 90 or greater case grade >= 90: console.log("A"); break; // If score is 80 or greater case grade >= 80: console.log("B"); break; // If score is 70 or greater case grade >= 70: console.log("C"); break; // If score is 60 or greater case grade >= 60: console.log("D"); break; // Anything 59 or below is failing default: console.log("F"); }
Output'B'
在此示例中,要计算的括号中的表达式是 true
。 这意味着任何计算结果为 true
的 case
都将是匹配项。
就像 else if
一样,switch
是从上到下计算的,第一个真正的匹配将被接受。 因此,即使我们的 grade
变量是 87
,因此 C 和 D 的计算结果也为 true
,第一个匹配项是 B,这将是输出。
多个案例
您可能会遇到多个案例应该具有相同输出的代码。 为了实现这一点,您可以为每个代码块使用多个 case
。
为了对此进行测试,我们将制作一个将当前月份与适当季节相匹配的小型应用程序。 首先,我们将使用 new Date()
方法找到与当前月份对应的数字,并将其应用于 month
变量。
const month = new Date().getMonth();
new Date().getMonth()
方法将输出从 0
到 11
的数字,其中 0
为一月,11
为十二月。 在本文发布时,月份是 9 月,对应于 8
。
为简单起见,我们的应用程序将输出具有以下规格的四个季节:
- 冬季:一月、二月、三月
- 春季:四月、五月、六月
- 夏季:七月、八月和九月
- 秋季:10 月、11 月和 12 月
下面是我们的代码。
季节.js
// Get number corresponding to the current month, with 0 being January and 11 being December const month = new Date().getMonth(); switch (month) { // January, February, March case 0: case 1: case 2: console.log("Winter"); break; // April, May, June case 3: case 4: case 5: console.log("Spring"); break; // July, August, September case 6: case 7: case 8: console.log("Summer"); break; // October, November, December case 9: case 10: case 11: console.log("Autumn"); break; default: console.log("Something went wrong."); }
当我们运行代码时,我们将收到基于上述规范识别当前季节的输出。
OutputSummer
发布时的当前月份是 8
,它对应于具有 "Summer"
季节输出的 case
语句之一。
结论
在本文中,我们回顾了 switch
语句,这是一种 条件语句 ,它评估表达式并根据匹配结果输出不同的值。 我们使用范围和多个 case
语句查看了 switch
语句。
要了解有关 switch
的更多信息,您可以在 Mozilla 开发者网络 上查看它。