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 相关文章推荐
Apply an AutoFormat to an Excel Spreadsheet
Jun 12 Javascript
JavaScript创建命名空间(namespace)的最简实现
Dec 11 Javascript
jQuery 动画基础教程
Dec 25 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
利用js实现前台动态添加文本框,后台获取文本框内容(示例代码)
Nov 25 Javascript
js简单设置与使用cookie的方法
Jan 22 Javascript
javascript的 {} 语句块详解
Feb 27 Javascript
JS字符串统计操作示例【遍历,截取,输出,计算】
Mar 27 Javascript
深入理解Node中的buffer模块
Jun 03 Javascript
详细分析jsonp的原理和实现方式
Nov 20 Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 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 isset()与empty()的使用区别详解
2010/08/29 PHP
几个实用的PHP内置函数使用指南
2014/11/27 PHP
js日历功能对象
2012/01/12 Javascript
采用call方式实现js继承
2014/05/20 Javascript
用简洁的jQuery方法toggleClass实现隔行换色
2014/10/22 Javascript
JavaScript实现表格点击排序的方法
2015/05/11 Javascript
Jquery幻灯片特效代码分享--打开页面随机选择切换方式(3)
2015/08/15 Javascript
JS运动相关知识点小结(附弹性运动示例)
2016/01/08 Javascript
jQuery中checkbox反复调用attr('checked', true/false)只有第一次生效的解决方法
2016/11/16 Javascript
js实现导航栏中英文切换效果
2017/01/16 Javascript
微信小程序 常用工具类详解及实例
2017/02/15 Javascript
js中setTimeout的妙用--防止循环超时
2017/03/06 Javascript
JSON对象转化为字符串详解
2017/08/11 Javascript
Angular数据绑定机制原理
2018/04/17 Javascript
Vue + Elementui实现多标签页共存的方法
2019/06/12 Javascript
layui使用表格渲染获取行数据的例子
2019/09/13 Javascript
[00:30]明星选手化身超级英雄!2018DOTA2亚洲邀请赛全明星赛来临!
2018/04/06 DOTA
Python如何为图片添加水印
2016/11/25 Python
python tensorflow学习之识别单张图片的实现的示例
2018/02/09 Python
Python学习笔记之open()函数打开文件路径报错问题
2018/04/28 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
Django文件存储 自己定制存储系统解析
2019/08/02 Python
Windows平台Python编程必会模块之pywin32介绍
2019/10/01 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
Python多分支if语句的使用
2020/09/03 Python
Html5 Geolocation获取地理位置信息实例
2016/12/09 HTML / CSS
美国批发零售网站:GearXS
2016/07/26 全球购物
Mio Skincare法国官网:身体紧致及孕期身体护理
2018/04/04 全球购物
Weblogc domain问题
2014/01/27 面试题
什么是serialVersionUID
2016/03/04 面试题
服务理念口号
2014/06/11 职场文书
未受刑事制裁公证证明
2014/09/20 职场文书
党员批评与自我批评发言稿
2014/10/14 职场文书
青年教师听课心得体会
2016/01/15 职场文书
Nginx配置并兼容HTTP实现代码解析
2021/03/31 Servers
利用python实时刷新基金估值(摸鱼小工具)
2021/09/15 Python