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游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
Jquery选择子控件&quot;大于号&quot;和&quot; &quot;区别介绍及使用示例
Jun 25 Javascript
js验证电话号码与手机支持+86的正则表达式
Jan 23 Javascript
JS常用表单验证方法总结
May 22 Javascript
浅析JavaScript 箭头函数 generator Date JSON
May 23 Javascript
jQuery调用Webservice传递json数组的方法
Aug 06 Javascript
AngularJS+Bootstrap实现多文件上传与管理
Nov 08 Javascript
Vue父组件调用子组件事件方法
Feb 23 Javascript
Vue render深入开发讲解
Apr 13 Javascript
Vue Cli3 创建项目的方法步骤
Oct 15 Javascript
详解Vue中组件的缓存
Apr 20 Javascript
适合前端Vue开发童鞋的跨平台Weex的使用详解
Oct 16 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
用Json实现PHP与JavaScript间数据交换的方法详解
2013/06/20 PHP
php 修改、增加xml结点属性的实现代码
2013/10/22 PHP
php+ajax实现无刷新数据分页的办法
2015/11/02 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
jQuery实现数字加减效果汇总
2014/12/16 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
使用jQuery制作Web页面遮罩层插件的实例教程
2016/05/26 Javascript
jQuery插件WebUploader实现文件上传
2016/11/07 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
tablesorter.js表格排序使用方法(支持中文排序)
2017/02/10 Javascript
jQuery插件HighCharts绘制简单2D柱状图效果示例【附demo源码】
2017/03/21 jQuery
vue.js基于v-for实现批量渲染 Json数组对象列表数据示例
2019/08/03 Javascript
[59:00]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD BO3 第一场 3月7日
2021/03/11 DOTA
python端口扫描系统实现方法
2014/11/19 Python
在阿里云服务器上配置CentOS+Nginx+Python+Flask环境
2016/06/18 Python
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
python实现简单五子棋游戏
2019/06/18 Python
Python如何筛选序列中的元素的方法实现
2019/07/15 Python
Django自定义列表 models字段显示方式
2020/04/03 Python
Python使用Numpy模块读取文件并绘制图片
2020/05/13 Python
python中常见错误及解决方法
2020/06/21 Python
DOUGLAS荷兰:购买香水和化妆品
2020/10/24 全球购物
标记环介质访问控制协议
2016/03/27 面试题
内部类的定义、种类以及优点
2013/10/16 面试题
高中三年学习生活的自我评价
2013/10/10 职场文书
传播学专业毕业生自荐信
2013/11/04 职场文书
毕业生求职自荐信怎么写
2014/01/08 职场文书
高中运动会入场词
2014/02/14 职场文书
农林经济管理专业自荐信
2014/09/01 职场文书
小学竞选班长演讲稿
2014/09/09 职场文书
大一工商管理职业生涯规划:有梦最美,行动相随
2014/09/18 职场文书
党员批评与自我批评思想汇报
2014/10/08 职场文书
销售区域经理岗位职责
2015/04/10 职场文书
花田少年史观后感
2015/06/16 职场文书
2016年度基层党建工作公开承诺书
2016/03/25 职场文书
react合成事件与原生事件的相关理解
2021/05/13 Javascript