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 相关文章推荐
Javascript实例教程(19) 使用HoTMetal(3)
Dec 23 Javascript
JavaScript入门教程(9) Document文档对象
Jan 31 Javascript
JQuery Study Notes 学习笔记(一)
Aug 04 Javascript
Internet Explorer 11 浏览器介绍:别叫我IE
Sep 28 Javascript
使用jQuery仿苹果官网焦点图特效
Dec 23 Javascript
JavaScript错误处理
Feb 03 Javascript
jQuery+css实现的tab切换标签(兼容各浏览器)
Jan 28 Javascript
jQuery改变form表单的action,并进行提交的实现代码
May 25 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
jQuery模拟淘宝购物车功能
Feb 27 Javascript
JQuery扩展对象方法操作示例
Aug 21 jQuery
vue 引用自定义ttf、otf、在线字体的方法
May 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 中执行系统外部命令
2006/10/09 PHP
PHP图片加水印实现方法
2016/05/06 PHP
Ajax和PHP正则表达式验证表单及验证码
2016/09/24 PHP
PHP对象相关知识总结
2017/04/09 PHP
PHP超全局变量实现原理及代码解析
2020/09/01 PHP
javascript中的new使用
2010/03/20 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
Jquery实现Div上下移动示例
2014/04/23 Javascript
JS实现关键字搜索时的相关下拉字段效果
2014/08/05 Javascript
一个JavaScript操作元素定位元素的实例
2014/10/29 Javascript
jQuery.each使用详解
2015/07/07 Javascript
jQuery实现滚动切换的tab选项卡效果代码
2015/08/26 Javascript
使用javaScript动态加载Js文件和Css文件
2015/10/24 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
JS制作适用于手机和电脑的通知信息效果
2016/10/28 Javascript
JavaScript自动点击链接 防止绕过浏览器访问的方法
2017/01/19 Javascript
JavaScript实现的选择排序算法实例分析
2017/04/14 Javascript
实例解析ES6 Proxy使用场景介绍
2018/01/08 Javascript
Vue基于iview table展示图片实现点击放大
2020/08/05 Javascript
通过实例了解Render Props回调地狱解决方案
2020/11/04 Javascript
[51:26]DOTA2上海特级锦标赛主赛事日 - 2 胜者组第一轮#3Secret VS OG第二局
2016/03/03 DOTA
浅谈Python 对象内存占用
2016/07/15 Python
用Python将动态GIF图片倒放播放的方法
2016/11/02 Python
Python 多进程和数据传递的理解
2017/10/09 Python
python的re正则表达式实例代码
2018/01/24 Python
Python反转序列的方法实例分析
2018/03/21 Python
解决pycharm 误删掉项目文件的处理方法
2018/10/22 Python
苹果中国官方网站:Apple中国
2016/07/22 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
幼儿园毕业寄语
2014/04/03 职场文书
标准的毕业生自荐信
2014/04/20 职场文书
热爱祖国的演讲稿
2014/05/04 职场文书
个人融资协议书范本两则
2014/10/15 职场文书
暑期工社会实践报告
2015/07/13 职场文书
2016年党课培训学习心得体会
2016/01/07 职场文书