办公常用软件技术学习网

办公常用软件技术学习网、Excel技术学习、PPT技术学习、Word技术学习、AI技术学习、PS技术学习,开发技术,数据库开发,SEO教程

联系客服联系客服

您现在的位置是:首页>技术开发>一篇文章带你了解JavaScript switch

一篇文章带你了解JavaScript switch

2021-06-04 09:56 栏目:技术开发

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

一、Switch 语句

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

1. 语法

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

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

2. default 关键字

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

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

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

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

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

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

注:

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

三、相同的代码块(优化)

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

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

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

四、总结

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

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

【编辑推荐】

  1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
  2. 接入网究竟是个什么网
  3. 程序员年龄增大后的职业出路是什么?
  4. 从源码中来,到业务中去,React性能优化终极指南
  5. 等了这么久,谷歌终于推出Fuchsia OS了
  6. GC详解,看完这篇同事小勇都惊呆了

上一篇:如何用Java实现合同模板签署的功能,做完产品都说好

下一篇:鸿蒙轻内核M核源码分析系列十二事件Event