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的简单的列表导航菜单
Mar 02 Javascript
javascript学习笔记(三)显示当时时间的代码
Apr 08 Javascript
JavaScript计算两个日期时间段内日期的方法
Mar 16 Javascript
js实现图片点击左右轮播
Jul 08 Javascript
JS实现动态生成表格并提交表格数据向后端
Nov 25 Javascript
bootstrap提示标签、提示框实现代码
Dec 28 Javascript
JavaScript使用delete删除数组元素用法示例【数组长度不变】
Jan 17 Javascript
jQuery自定义多选下拉框效果
Jun 19 jQuery
Node.js 利用cheerio制作简单的网页爬虫示例
Mar 01 Javascript
mockjs+vue页面直接展示数据的方法
Dec 19 Javascript
微信小程序利用swiper+css实现购物车商品删除功能
Mar 06 Javascript
Nuxt的动态路由和参数校验操作
Nov 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
javascript 写类方式之十
2009/07/05 Javascript
通用javascript脚本函数库 方便开发
2009/10/13 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
2011/11/14 Javascript
Jquery实现鼠标移上弹出提示框、移出消失思路及代码
2013/05/19 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
jQuery中[attribute!=value]选择器用法实例
2014/12/31 Javascript
javascript伸缩菜单栏实现代码分享
2015/11/12 Javascript
利用Query+bootstrap和js两种方式实现日期选择器
2017/01/10 Javascript
基于JQuery和原生JavaScript实现网页定位导航特效
2017/04/03 jQuery
Nodejs 复制文件/文件夹的方法
2017/08/24 NodeJs
详解如何解决Vue和vue-template-compiler版本之间的问题
2018/09/17 Javascript
vue 实现input表单元素的disabled示例
2019/10/28 Javascript
Vue中的this.$options.data()和this.$data用法说明
2020/07/26 Javascript
[01:14:05]《加油DOTA》第四期
2014/08/25 DOTA
[01:01:25]DOTA2上海特级锦标赛B组资格赛#2 Fnatic VS Spirit第三局
2016/02/27 DOTA
使用python实现strcmp函数功能示例
2014/03/25 Python
使用Python实现一个简单的项目监控
2015/03/31 Python
Python中的rjust()方法使用详解
2015/05/19 Python
Python调用SQLPlus来操作和解析Oracle数据库的方法
2016/04/09 Python
pycharm配置当鼠标悬停时快速提示方法参数
2019/07/31 Python
一文轻松掌握python语言命名规范规则
2020/06/18 Python
Python中return函数返回值实例用法
2020/11/19 Python
为什么group by 和order by会使查询变慢
2014/05/16 面试题
教师找工作推荐信
2013/11/23 职场文书
厂长助理岗位职责
2013/12/27 职场文书
军训鉴定表自我鉴定
2014/02/13 职场文书
小学生元旦感言
2014/02/26 职场文书
劲霸男装广告词
2014/03/21 职场文书
公证书标准格式
2014/04/10 职场文书
消防志愿者活动方案
2014/08/23 职场文书
安全隐患整改报告
2014/11/06 职场文书
家长评语怎么写
2014/12/30 职场文书
2015年世界无车日活动总结
2015/03/23 职场文书
篮球赛闭幕式主持词
2015/07/03 职场文书
岗位聘任协议书
2015/09/21 职场文书
PyTorch 如何设置随机数种子使结果可复现
2021/05/12 Python