JavaScript中switch语句的用法详解


Posted in Javascript onJune 03, 2015

 可以使用多个if... else if语句,如前面的章节,执行多路分支。然而,这并不总是最佳的解决方案,尤其是当所有分支的依赖单一的变量的值。

使用JavaScript1.2开始,你可以用它处理的正是这种情况,使用一个switch语句,它这样做更有效,如果不是反复地使用if... else if语句。
语法

switch语句的基本语法给出一个expression ,以评估计算几种不同的语句基于该表达式的值来执行。解释器检查对表达式的值的每一种情况,直到找到一个匹配。如果没有匹配,则缺省(default)条件将被使用。

switch (expression)
{
 case condition 1: statement(s)
          break;
 case condition 2: statement(s)
          break;
  ...
 case condition n: statement(s)
          break;
 default: statement(s)
}

break语句指示的解释器是特定情况下结束。如果它们被省略,则解释器将继续在以下每个情况(case)执行每个语句。

我们将解释break语句在循环控制这一章。
例子:

下面的例子说明了一个基本的while循环:

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
 case 'A': document.write("Good job<br />");
      break;
 case 'B': document.write("Pretty good<br />");
      break;
 case 'C': document.write("Passed<br />");
      break;
 case 'D': document.write("Not so good<br />");
      break;
 case 'F': document.write("Failed<br />");
      break;
 default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>

这将产生以下结果:

Entering switch block
Good job
Exiting switch block

 
例子:

考虑这样一种情况,如果不使用break语句:

<script type="text/javascript">
<!--
var grade='A';
document.write("Entering switch block<br />");
switch (grade)
{
 case 'A': document.write("Good job<br />");
 case 'B': document.write("Pretty good<br />");
 case 'C': document.write("Passed<br />");
 case 'D': document.write("Not so good<br />");
 case 'F': document.write("Failed<br />");
 default: document.write("Unknown grade<br />")
}
document.write("Exiting switch block");
//-->
</script>

这将产生以下结果:

Entering switch block
Good job
Pretty good
Passed
Not so good
Failed
Unknown grade
Exiting switch block
Javascript 相关文章推荐
原生Js页面滚动延迟加载图片实现原理及过程
Jun 24 Javascript
JS代码判断IE6,IE7,IE8,IE9的函数代码
Aug 02 Javascript
js实现匹配时换色的输入提示特效代码
Aug 17 Javascript
JS实现图片局部放大或缩小的方法
Aug 20 Javascript
javascript 初学教程及五子棋小程序的简单实现
Jul 04 Javascript
JQuery 获取Dom元素的实例讲解
Jul 08 jQuery
基于react组件之间的参数传递(详解)
Sep 05 Javascript
vue、react等单页面项目部署到服务器的方法及vue和react的区别
Sep 29 Javascript
js Array.slice的8种不同用法示例
Jul 10 Javascript
vue实现扫码功能
Jan 17 Javascript
手把手带你入门微信小程序新框架Kbone的使用
Feb 25 Javascript
vue-cli4项目开启eslint保存时自动格式问题
Jul 13 Javascript
jquery中添加属性和删除属性
Jun 03 #Javascript
JavaScript中的条件判断语句使用详解
Jun 03 #Javascript
简单介绍JavaScript的变量和数据类型
Jun 03 #Javascript
在HTML中插入JavaScript代码的示例
Jun 03 #Javascript
jQuery事件绑定on()、bind()与delegate() 方法详解
Jun 03 #Javascript
在浏览器中打开或关闭JavaScript的方法
Jun 03 #Javascript
浅谈javascript中基本包装类型
Jun 03 #Javascript
You might like
PHP利用pdo_odbc实现连接数据库示例【基于ThinkPHP5.1搭建的项目】
2019/05/13 PHP
laravel 5.5 关闭token的3种实现方式
2019/10/24 PHP
js 日期转换成中文格式的函数
2009/07/07 Javascript
关于JavaScript中的关联数组分析
2013/04/09 Javascript
js实现可得到不同颜色值的颜色选择器实例
2015/02/28 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
JavaScript中数组的22种方法必学(推荐)
2016/07/20 Javascript
JS实现图文并茂的tab选项卡效果示例【附demo源码下载】
2016/09/21 Javascript
AngularJS出现$http异步后台无法获取请求参数问题的解决方法
2016/11/03 Javascript
localStorage实现便签小程序
2016/11/28 Javascript
jQuery Ajax自定义分页组件(jquery.loehpagerv1.0)实例详解
2017/05/01 jQuery
vue2.0多条件搜索组件使用详解
2020/03/26 Javascript
浅谈react-native热更新react-native-pushy集成遇到的问题
2017/09/30 Javascript
五步轻松实现JavaScript HTML时钟效果
2020/03/25 Javascript
Vue中对比scoped css和css module的区别
2018/05/17 Javascript
使用RxJS更优雅地进行定时请求详析
2019/06/02 Javascript
Vue实现浏览器打印功能的代码
2020/04/17 Javascript
详解datagrid使用方法(重要)
2020/11/06 Javascript
使用Vant完成Dialog弹框案例
2020/11/11 Javascript
ant design的table组件实现全选功能以及自定义分页
2020/11/17 Javascript
[43:58]DOTA2上海特级锦标赛C组败者赛 Newbee VS Archon第二局
2016/02/27 DOTA
[54:43]DOTA2-DPC中国联赛 正赛 CDEC vs Dynasty BO3 第一场 2月22日
2021/03/11 DOTA
Django发送html邮件的方法
2015/05/26 Python
Windows下将Python文件打包成.EXE可执行文件的方法
2018/08/03 Python
Python OS模块实例详解
2019/04/15 Python
is_file和file_exists效率比较
2021/03/14 PHP
html5 Canvas画图教程(11)—使用lineTo/arc/bezierCurveTo画椭圆形
2013/01/09 HTML / CSS
澳大利亚设计的婴儿和女孩的衣服:Oobi
2018/12/16 全球购物
护士演讲稿范文
2014/01/05 职场文书
局火灾防控工作方案
2014/05/25 职场文书
企业委托书范本
2014/09/13 职场文书
思想政治表现评语
2015/01/04 职场文书
停水通知
2015/04/16 职场文书
初中同学会致辞
2015/08/01 职场文书
少儿励志名言(80句)
2019/08/14 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js