js 中的switch表达式使用示例


Posted in Javascript onJune 03, 2020

前言

switch 语句用于基于不同条件执行不同动作。

JavaScript Switch 语句

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

switch(表达式) {
   case n:
    代码块
    break;
   case n:
    代码块
    break;
   default:
    默认代码块
}

代码解释:

计算一次 switch 表达式
把表达式的值与每个 case 的值进行对比
如果存在匹配,则执行关联代码
实例
getDay() 方法返回 0 至 6 之间的周名数字(weekday number)。

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

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

switch (new Date().getDay()) {
  case 0:
    day = "星期天";
    break;
  case 1:
    day = "星期一";
     break;
  case 2:
    day = "星期二";
     break;
  case 3:
    day = "星期三";
     break;
  case 4:
    day = "星期四";
     break;
  case 5:
    day = "星期五";
     break;
  case 6:
    day = "星期六";
}

结果将是:

今天是星期三

break 关键词

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

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

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

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

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

default 关键词

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

实例

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

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

switch (new Date().getDay()) {
  case 6:
    text = "今天是周六";
    break; 
  case 0:
    text = "今天是周日";
    break; 
  default: 
    text = "期待周末~";
}

text 的结果是:

期待周末~

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

实例

switch (new Date().getDay()) {
  default: 
    text = "期待周末!";
     break;
  case 6:
    text = "今天是周六";
    break; 
  case 0:
    text = "今天是周日";
}

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

常见的代码块

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

在本例中,case 4 和 5 分享相同的代码块,而 0 和 6 分享另一段代码块:

实例

switch (new Date().getDay()) {
  case 4:
  case 5:
    text = "周末快到了:)";
    break; 
  case 0:
  case 6:
    text = "今天是周末~";
     break;
  default: 
    text = "期待周末!";
}

Switching 的细节

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

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

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

严格的比较

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

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

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

在这个例子中,x 将不匹配:

实例

var x = "0";
switch (x) {
 case 0:
  text = "Off";
  break;
 case 1:
  text = "On";
  break;
 default:
  text = "No value found";
}

语法switch 这种表达式在很多语言中都有,比如java, C等待, 使用switch比使用if else 来得方便,来得清晰。

使用语法很简单:

switch(n) 
{ 
case 1: 
执行代码块 1 
break; 
case 2: 
执行代码块 2 
break; 
default: 
n 与 case 1 和 case 2 不同时执行的代码 
}

各种语言的使用基本类似。

需要特别提出的时,在java 1.6 及以下版本, 变量(n)只能是整型。在java 7 之后支持String类型了。

在js 中, 是可以直接使用String 类型。

使用实例

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
<script> 
function funcSwitch(sFlag) 
{ 
switch(sFlag) 
{ 
case "Test1": 
alert("Test1"); 
break; 
case "Test2": 
alert("Test2"); 
break; 
default:; 
} 
} 

funcSwitch("Test2"); 
</script> 
</HEAD> 

<BODY> 

</BODY> 
</HTML>

逻辑很简单, 代码很简单。 直接使用string 来区分。

Case 对应的条件值也是变量

如果case 后面对应的不是一个字符串,而是一个变量的话。可以结合RegExp 达成。

<!--Add by oscar999--> 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> 
<HTML> 
<HEAD> 
<TITLE> New Document </TITLE> 
<META NAME="Author" CONTENT="oscar999"> 
<script> 
var str1 = "Test1"; 
var str2 = "Test1"; 
function funcSwitch(sFlag) 
{ 
var regExp = new RegExp(sFlag); 
switch(true) 
{ 
case regExp.test(str1): 
alert("Test1"); 
break; 
case regExp.test(str2): 
alert("Test2"); 
break; 
default:; 
} 
} 

funcSwitch("Test1"); 

</script> 
</HEAD> 

<BODY> 

</BODY> 
</HTML>
Javascript 相关文章推荐
让新消息在网页标题闪烁提示的jQuery代码
Nov 04 Javascript
在jquery boxy中添加百度地图坐标拾取注意流程
Apr 03 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
sso跨域写cookie的一段js脚本(推荐)
May 25 Javascript
利用jquery实现验证输入的是否是数字、小数,包含保留几位小数
Dec 07 Javascript
jQuery中的100个技巧汇总
Dec 15 Javascript
详解使用fetch发送post请求时的参数处理
Apr 05 Javascript
javascript浏览器用户代理检测脚本实现方法
Oct 27 Javascript
Vue 将后台传过来的带html字段的字符串转换为 HTML
Mar 29 Javascript
javascript实现blob加密视频源地址的方法
Aug 08 Javascript
JavaScript隐式类型转换代码实例
May 29 Javascript
解决vue 退出动画无效的问题
Aug 09 Javascript
javascript实现促销倒计时+fixed固定在底部
Sep 18 #Javascript
jquery等宽输出文字插件使用介绍
Sep 18 #Javascript
使用indexOf等在JavaScript的数组中进行元素查找和替换
Sep 18 #Javascript
JSON 数字排序多字段排序介绍
Sep 18 #Javascript
json数据与字符串的相互转化示例
Sep 18 #Javascript
如何让DIV可编辑、可拖动示例代码
Sep 18 #Javascript
jQuery extend 的简单实例
Sep 18 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
PHP+MySQL 制作简单的留言本
2009/11/02 PHP
深入了解 register_globals (附register_globals=off 网站打不开的解决方法)
2012/06/27 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
Yii中的relations数据关联查询及统计功能用法详解
2016/07/14 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JavaScript在IE中“意外地调用了方法或属性访问”
2008/11/19 Javascript
Jquery 学习笔记(一)
2009/10/13 Javascript
jQuery AJAX回调函数this指向问题
2010/02/08 Javascript
javascript 类型判断代码分析
2010/03/28 Javascript
js对数字的格式化使用说明
2011/01/12 Javascript
js使用循环清空某个div中的input标签值
2014/09/29 Javascript
全面详细的jQuery常见开发技巧手册
2016/02/21 Javascript
通用无限极下拉菜单的实现代码
2016/05/31 Javascript
js中document.referrer实现移动端返回上一页
2017/02/22 Javascript
浅谈原型对象的常用开发模式
2017/07/22 Javascript
浅谈vux之x-input使用以及源码解读
2018/11/04 Javascript
在vue项目中引入vue-beauty操作方法
2019/02/11 Javascript
[03:39]这就是刀塔,我们是冠军!燃情短片讲述我们的DOTA故事
2019/07/02 DOTA
Python中的ceil()方法使用教程
2015/05/14 Python
浅谈python函数之作用域(python3.5)
2017/10/27 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
详解Python二维数组与三维数组切片的方法
2019/07/18 Python
浅谈Python_Openpyxl使用(最全总结)
2019/09/05 Python
pytorch 多分类问题,计算百分比操作
2020/07/09 Python
Notino匈牙利:购买香水和化妆品
2019/04/12 全球购物
幼儿园中秋节活动方案
2014/02/06 职场文书
行政文秘岗位职责范本
2014/02/10 职场文书
社区党务公开实施方案
2014/03/18 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
毕业生银行实习自我鉴定
2014/10/14 职场文书
单位介绍信格式范文
2015/05/04 职场文书
2015年党员发展工作总结
2015/05/13 职场文书
行政二审代理词
2015/05/25 职场文书
Django实现在线无水印抖音视频下载(附源码及地址)
2021/05/06 Python