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 相关文章推荐
Firefox window.close()的使用注意事项
Apr 11 Javascript
jQeury淡入淡出需要注意的问题
Sep 08 Javascript
关于 文本框默认值 的操作js代码
Jan 12 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
Jan 15 Javascript
使用JS读秒使用示例
Sep 21 Javascript
php利用curl获取远程图片实现方法
Oct 26 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
Bootstrap3 内联单选和多选框
Dec 29 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
使用vue-aplayer插件时出现的问题的解决
Mar 02 Javascript
小程序云开发初探(小结)
Oct 24 Javascript
解决element ui select下拉框不回显数据问题的解决
Feb 20 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/04/28 PHP
从php核心代码分析require和include的区别
2011/01/02 PHP
使用JSON实现数据的跨域传输的php代码
2011/12/20 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
PHP常用技巧汇总
2016/03/04 PHP
php5.2的curl-bug 服务器被php进程卡死问题排查
2016/09/19 PHP
php使用include 和require引入文件的区别
2017/02/16 PHP
PHP实现的随机红包算法示例
2017/08/14 PHP
通过PHP的Wrapper无缝迁移原有项目到新服务的实现方法
2020/04/02 PHP
拖拉表格的JS函数
2008/11/20 Javascript
js操作输入框提示信息且响应鼠标事件
2014/03/25 Javascript
jQuery中prop()方法用法实例
2015/01/05 Javascript
在Node.js中使用Javascript Generators详解
2016/05/05 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
原生js实现无缝轮播图效果
2017/01/11 Javascript
20行js代码实现的贪吃蛇小游戏
2017/06/20 Javascript
原生JS实现的放大镜特效示例【测试可用】
2018/12/08 Javascript
Python中random模块用法实例分析
2015/05/19 Python
栈和队列数据结构的基本概念及其相关的Python实现
2015/08/24 Python
JavaScript中的模拟事件和自定义事件实例分析
2018/07/27 Python
Django使用paginator插件实现翻页功能的实例
2018/10/24 Python
用Python和WordCloud绘制词云的实现方法(内附让字体清晰的秘笈)
2019/01/08 Python
jupyter notebook更换皮肤主题的实现
2021/01/07 Python
让IE支持CSS3的不完全兼容方案
2014/09/19 HTML / CSS
HTML5学习心得总结(推荐)
2016/07/08 HTML / CSS
提供世界各地便宜的机票:Sky-tours
2016/07/21 全球购物
德国百年厨具品牌WMF美国站:WMF美国
2016/09/12 全球购物
纯净、自信、100%的羊绒服装:360Cashmere
2021/02/20 全球购物
小学二年级学生评语
2014/04/21 职场文书
销售经理工作失职检讨书
2014/10/24 职场文书
办公室岗位职责
2015/02/04 职场文书
爱国影片观后感
2015/06/18 职场文书
大学生入党自传2015
2015/06/26 职场文书
2016教师给学生的毕业寄语
2015/12/04 职场文书
Python中threading库实现线程锁与释放锁
2021/05/17 Python
MySQL数据库索引的最左匹配原则
2021/11/20 MySQL