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 相关文章推荐
return false,对阻止事件默认动作的一些测试代码
Nov 17 Javascript
extjs 初始化checkboxgroup值的代码
Sep 21 Javascript
jQuery插件实现屏蔽单个元素使用户无法点击
Apr 12 Javascript
Jquery使用Firefox FireBug插件调试Ajax步骤讲解
Dec 02 Javascript
jquery.gridrotator实现响应式图片展示画廊效果
Jun 23 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
Bootstrap企业网站实战项目4
Oct 14 Javascript
Vue.js 2.0中select级联下拉框实例
Mar 06 Javascript
Angular.JS内置服务$http对数据库的增删改使用教程
May 07 Javascript
修改 bootstrap table 默认detailRow样式的实例代码
Jul 21 Javascript
对vue事件的延迟执行实例讲解
Aug 28 Javascript
详解使用mocha对webpack打包的项目进行&quot;冒烟测试&quot;的大致流程
Apr 27 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留言本实例代码
2010/05/09 PHP
PHP下获取上个月、下个月、本月的日期(strtotime,date)
2014/02/02 PHP
php 模拟 asp.net webFrom 按钮提交事件实例
2014/10/13 PHP
PHP制作万年历
2015/01/07 PHP
javascript 放大镜效果js组件 qsoft.PopBigImage.v0.35 加入了chrome支持
2009/04/07 Javascript
js编写trim()函数及正则表达式的运用
2013/10/24 Javascript
jquery submit ie6下失效的原因分析及解决方法
2013/11/15 Javascript
js实现的光标位置工具函数示例
2016/10/03 Javascript
Java与JavaScript中判断两字符串是否相等的区别
2017/03/13 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
vue中用动态组件实现选项卡切换效果
2017/03/25 Javascript
详解Vue 非父子组件通信方法(非Vuex)
2017/05/24 Javascript
jQuery事件_动力节点Java学院整理
2017/07/05 jQuery
ES6 Promise对象的应用实例分析
2019/06/27 Javascript
webpack DllPlugin xxx is not defined解决办法
2019/12/13 Javascript
js实现简单点赞操作
2020/03/17 Javascript
[31:55]完美世界DOTA2联赛循环赛 IO vs GXR BO2第一场 11.04
2020/11/05 DOTA
Python中一些自然语言工具的使用的入门教程
2015/04/13 Python
Python如何获取系统iops示例代码
2016/09/06 Python
Python实现发送QQ邮件的封装
2017/07/14 Python
python实现简单淘宝秒杀功能
2018/05/03 Python
django 修改server端口号的方法
2018/05/14 Python
python实现飞机大战
2018/09/11 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
Python 继承,重写,super()调用父类方法操作示例
2019/09/29 Python
CSS3截取字符串实例代码【推荐】
2018/06/07 HTML / CSS
css3+jq创作含苞待放的荷花
2014/02/20 HTML / CSS
大学生物业管理求职信
2013/10/24 职场文书
春节联欢晚会主持词
2014/03/24 职场文书
党员服务承诺书
2014/05/28 职场文书
审计班子对照检查材料
2014/08/27 职场文书
教师四风自我剖析材料
2014/09/30 职场文书
化工厂员工工作总结
2015/10/15 职场文书
为什么不建议在go项目中使用init()
2021/04/12 Golang
PyTorch梯度裁剪避免训练loss nan的操作
2021/05/24 Python
解决vue自定义组件@click点击失效问题
2022/04/30 Vue.js