一篇文章带你了解JavaScript switch

Switch是与if ... else ...相同的条件语句，不同之处在于switch语句允许根据值列表测试变量是否相等。switch 语句用于根据不同的条件执行不同的操作。

一、Switch 语句

使用switch语句选择要执行的多个代码块中的一个。

1. 语法

1
2switch(expression) {
3    case n:
4        code block
5        break;
6    case n:
7        code block
8        break;
9    default:
10        default code block
11}

2. 工作原理

switch 表达式求值一次。表达式的值与每个case的值进行比较。如果有匹配，则执行相关的代码块。

getDay() 方法返回一周0到6之间的数字。(Sunday=0, Monday=1, Tuesday=2 ..)。

3. 案例

使用的工作日数计算星期的名称：

1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <title>项目</title>
6</head>
7<body>
8
9  <p id="demo"></p>
10
11  <script>
12    var day;
13    switch (new Date().getDay()) {
14        case 0:
15            day = "Sunday";
16            break;
17        case 1:
18            day = "Monday";
19            break;
20        case 2:
21            day = "Tuesday";
22            break;
23        case 3:
24            day = "Wednesday";
25            break;
26        case 4:
27            day = "Thursday";
28            break;
29        case 5:
30            day = "Friday";
31            break;
32        case  6:
33            day = "Saturday";
34    }
35    document.getElementById("demo").innerHTML = "今天是：" + day;
36</script>
37
38
39</body>
40</html>

二、关键字

1. break 关键字

原理：当找到一个匹配，工作完成后，它跳出。如果没有，继续进行更多的测试。

一个break可以节省大量的执行时间，因为它忽略了break开关块中所有其他代码都要执行。在最后一个case块中没有必要使用break，因为无论如何它都会退出。

1
2<script>
3function myFunc() {
4var num = Number(document.querySelector("input").value);
5var text;
6switch (num) {
7   case 1:
8    text = "您输入的号码是 1";
9   case 2:
10    text = "您输入的号码是 2";
11   case 3:
12    text = "您输入的号码是 3";
13   case 4:
14    text = "您输入的号码是 4";
15   case 5:
16    text = "您输入的号码是 5";
17        braek;
18   default:
19    text = "执行默认语句";
20}
21
22document.getElementById('para').innerHTML = text;
23}
24</script>

2. default 关键字

default 关键字指定在没有匹配的情况下运行的代码:

getDay() 方法返回一周0到6之间的数字。

1
2switch (new Date().getDay()) {
3    case 6:
4        text = "星期六;
5        break;
6    case 0:
7        text = "星期天";
8        break;
9    default:   /*如果今天不是星期六（6），也不是星期日（0），写一个default信息*/
10        text = "其他星期";
11}

default 不一定放到最后一个语句块：

1
2switch (new Date().getDay()) {
3    default:
4        text = "其他星期";
5        break;
6    case 6:
7        text = "星期六;
8        break;
9    case 0:
10        text = "星期天";
11}

测试时，是星期四，返回其他星期。

注：

如果default不是开关块中的最后一个实例，请记住以break结束默认情况。

三、相同的代码块（优化）

有时你会希望不同的开关情况下使用相同的代码。

在本例中，案例4和5共享相同的代码块，而0和6共享另一个代码块:

1
2<script>
3            var text;
4            switch (new Date().getDay()) {
5                case 4:
6                case 5:
7                    text = "很快是周末";
8                    break;
9                case 0:
10                case 6:
11                    text = "这是周末";
12                    break;
13                default:
14                    text = "期待周末";
15            }
16            document.getElementById("demo").innerHTML = text;
17</script>

四、总结

本文基于JavaScript 基础，介绍了switch语句的相关使用。通过工作原理的分析案例的代码的解析，对于关键字的难点都做了详细的讲解。同时对代码进行了整合和优化。

代码很简单，希望能够帮助你学习。

-------------------********************************** End **********-------------**-----********-**********************************

往期精彩文章推荐：

欢迎各位大佬点击链接加入群聊【helloworld开发者社区】：https://jq.qq.com/?_wv=1027&k=mBlk6nzX进群交流IT技术热点。