JavaScript Switch 语句

switch 语句是 JavaScript 条件语句的一种,用于不同条件执行不同动作。switch 语句是 if 语句的兄弟语句。与 If Else 语句相比,在多条件的嵌套结构,更简洁的方法是使用 switch 语句。


JavaScript Switch 语句

请使用 switch 语句来选择多个需被执行的代码块之一。

  1. switch(表达式) {
  2. case n:
  3. 代码块
  4. break;
  5. case n:
  6. 代码块
  7. break;
  8. default:
  9. 默认代码块
  10. }
代码解释:

计算一次 switch 表达式

把表达式的值与每个 case 的值进行对比

如果存在匹配,则执行关联代码

getDay() 方法返回 0 至 6 之间的周名数字(weekday number)。

(Sunday=0, Monday=1, Tuesday=2 ..)

使用周名数字来计算周的名称:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <p id="demo"></p>
  5. <script>
  6. var day;
  7. switch (new Date().getDay()) {
  8. case 0:
  9. day = "周日";
  10. break;
  11. case 1:
  12. day = "周一";
  13. break;
  14. case 2:
  15. day = "周二";
  16. break;
  17. case 3:
  18. day = "周三";
  19. break;
  20. case 4:
  21. day = "周四";
  22. break;
  23. case 5:
  24. day = "周五";
  25. break;
  26. case 6:
  27. day = "周六";
  28. }
  29. document.getElementById("demo").innerHTML = "今天是" + day;
  30. </script>
  31. </body>
  32. </html>

break 关键词

如果 JavaScript 遇到 break 关键词,它会跳出 switch 代码块。

此举将停止代码块中更多代码的执行以及 case 测试。

如果找到匹配,并完成任务,则随机中断执行(break)。无需更多测试。

break 能够节省大量执行时间,因为它会“忽略” switch 代码块中的其他代码的执行。

不必中断 switch 代码块中的最后一个 case。代码块在此处会自然结束。


default 关键词

default 关键词规定不存在 case 匹配时所运行的代码:

getDay() 方法返回 0 至 6 的数字周名。

如果今日既不是周六(6)也不是周日(0),则输出一段默认消息:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript switch</h2>
  5. <p id="demo"></p>
  6. <script>
  7. var text;
  8. switch (new Date().getDay()) {
  9. case 6:
  10. text = "今天是周六";
  11. break;
  12. case 0:
  13. text = "今天是周日";
  14. break;
  15. default:
  16. text = "期待周末";
  17. }
  18. document.getElementById("demo").innerHTML = text;
  19. </script>
  20. </body>
  21. </html>

默认的 case 不必是 switch 代码块中最后一个 case:

  1. switch (new Date().getDay()) {
  2. case 6:
  3. text = "今天是周六";
  4. break;
  5. case 0:
  6. text = "今天是周日";
  7. break;
  8. default:
  9. text = "期待周末~";
  10. }

如果 default 不是 switch 代码块中最后一个 case,请记得用 break 结束默认 case。


常见的代码块

有时您会需要不同的 case 来使用相同的代码。

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript switch</h2>
  5. <p id="demo">
  6. <script>
  7. var text;
  8. switch (new Date().getDay()) {
  9. case 6:
  10. text = "今天是周六";
  11. break;
  12. case 0:
  13. text = "今天是周日";
  14. break;
  15. default:
  16. text = "期待周末";
  17. }
  18. document.getElementById("demo").innerHTML = text;
  19. </script>
  20. </body>
  21. </html>

Switching 的细节

如果多种 case 匹配一个 case 值,则选择第一个 case。

如果未找到匹配的 case,程序将继续使用默认 label。

如果未找到默认 label,程序将继续 switch 后的语句。


严格的比较

Switch case 使用严格比较(===)。

值必须与要匹配的类型相同。

只有操作数属于同一类型时,严格比较才能为 true。

在下面例子中,x 将不匹配:

  1. <!DOCTYPE html>
  2. <html>
  3. <body>
  4. <h2>JavaScript switch</h2>
  5. <p id="demo">
  6. <script>
  7. var text;
  8. switch (new Date().getDay()) {
  9. default:
  10. text = "期待周末";
  11. break;
  12. case 6:
  13. text = "今天是周六";
  14. break;
  15. case 0:
  16. text = "今天是周日";
  17. }
  18. document.getElementById("demo").innerHTML = text;
  19. </script>
  20. </body>
  21. </html>