js 中的switch表达式使用示例
前言
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>
相关文章
这篇文章主要源码解读了Bootstrap媒体对象、列表组和面板,具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
这篇文章主要介绍了JS实现自定义简单网页软键盘效果代码,可实现简单模拟键盘布局及响应鼠标点击按下键盘按键功能,简单实用,具有一定参考借鉴价值,需要的朋友可以参考下2015-11-11
JS遍历数组和对象的区别及递归遍历对象、数组、属性的方法详解
本文给大家js遍历数组和遍历对象的区别，一般来说for用来遍历数组对象而for-in用来遍历非数组对象。接下来小编给大家带来了js遍历数组和对象的区别及js递归遍历对象、数组、属性的方法详解，一起看下吧2016-06-06
在使用echarts绘制图表时,有的时候需要使用渐变色,下面这篇文章主要给大家介绍了关于echarts中几种渐变方式的具体实现方式,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了JavaScript实现修改伪类样式的方法以及代码实现过程，一起学习参考下吧。2017-11-11
这篇文章主要为大家详细介绍了微信小程序实现下拉菜单切换效果，筛选条件功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-11-11
本文将介绍一个工具--livereload。这是一款能根据你本地文件(html、css、js)的变化，自动跟踪刷新浏览器的实时刷新工具，有了这个工具，会大大减轻你刷新页面的工作量。下面跟着小编一起来看下吧2016-12-12
Bootstrap每天必学之日期控制，对Bootstrap日期控制感兴趣的小伙伴们可以参考一下2016-03-03
下面小编就为大家带来一篇通过构造函数实例化对象的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-06-06
这篇文章主要介绍了JavaScript对象原型链原理详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-02-02
最新评论