JavaScript中switch判断容易犯错的一个细节


Posted in Javascript onAugust 27, 2014

switch语句与if语句的关系最为密切,也是其它编程语言中普遍使用的一种流程控制语句,但switch的匹配是全等模式,如果不注意这个细节则写程序时往往会出错。

代码:

var n = '5';
switch(n){
    case 5:
        alert('执行case分支');
        break;
    default:
        alert('执行default分支');
}

结果:

JavaScript中switch判断容易犯错的一个细节

可能很多人会误以为以上程序会走case分支,结果却走了default分支。难道它们两个不相等吗?我们使用if语句看看。

代码:

var n = '5';
if(n==5){
    alert('真 分支');
}else{
    alert('假 分支');
}

结果:

JavaScript中switch判断容易犯错的一个细节

在if语句里可以匹配,但为何在switch语句里不能匹配呢?

这是因为在switch语句里的case使用全等模式,也就相当于if里的使用三个等号类似。我们把case的代码改写一下

代码:

var n = '5';
switch(n){
    case '5': // 把原来的 case 5 改写成 case '5'
        alert('执行case分支');
        break;
    default:
        alert('执行default分支');
}

结果:

JavaScript中switch判断容易犯错的一个细节

改写了以后就能走case分支了,就像我们if里使用三个全等号一样

代码:

var n = '5';
if(n===5){
    alert('真 分支');
}else{
    alert('假 分支');
}

结果:

JavaScript中switch判断容易犯错的一个细节

因为使用全等,所以字符串5不等于数字5,结果走了假分支。

由以上例子说明在 switch中使用的是全等匹配模式,特别是数字与字符串匹配的时候需要注意的一个问题

Javascript 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
基于jQuery试卷自动排版系统
Jul 18 Javascript
jQuery验证插件validate使用详解
May 11 Javascript
JS中使用apply方法通过不同数量的参数调用函数的方法
May 31 Javascript
jQuery事件绑定用法详解
Sep 08 Javascript
vue2.0 子组件改变props值,并向父组件传值的方法
Mar 01 Javascript
vue cli2.0单页面title修改方法
Jun 07 Javascript
vue中的inject学习教程
Apr 24 Javascript
jQuery实现简易QQ聊天框
Feb 10 jQuery
keep-alive不能缓存多层级路由菜单问题解决
Mar 10 Javascript
js代码实现轮播图
May 04 Javascript
解决vue中el-tab-pane切换的问题
Jul 19 Javascript
JavaScript中使用arguments获得函数传参个数实例
Aug 27 #Javascript
JavaScript中输出标签的方法
Aug 27 #Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 #Javascript
JavaScript实现的使用键盘控制人物走动实例
Aug 27 #Javascript
JavaScript截取字符串的2个函数介绍
Aug 27 #Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 #Javascript
jQuery中的read和JavaScript中的onload函数的区别
Aug 27 #Javascript
You might like
分享微信扫码支付开发遇到问题及解决方案-附Ecshop微信支付插件
2015/08/23 PHP
Yii2.0框架behaviors方法使用实例分析
2019/09/30 PHP
Javascript 读书笔记索引贴
2010/01/11 Javascript
使用JavaScript动态设置样式实现代码及演示动画
2013/01/25 Javascript
动态添加option及createElement使用示例
2014/01/26 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
关于JS数组追加数组采用push.apply的问题
2014/06/09 Javascript
escape函数解决js中ajax传递中文出现乱码问题
2014/10/30 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
jQuery中next方法用法实例
2015/04/24 Javascript
javascript实现倒计时并弹窗提示特效
2015/06/05 Javascript
Javascript生成全局唯一标识符(GUID,UUID)的方法
2016/02/27 Javascript
BootStrap实现邮件列表的分页和模态框添加邮件的功能
2016/10/13 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
2016/11/16 Javascript
AngularJS基于provider实现全局变量的读取和赋值方法
2017/06/28 Javascript
vue实现绑定事件的方法实例代码详解
2019/06/20 Javascript
vue中 数字相加为字串转化为数值的例子
2019/11/07 Javascript
微信小程序scroll-view点击项自动居中效果的实现
2020/03/25 Javascript
小程序实现左滑删除的效果的实例代码
2020/10/19 Javascript
python抓取网页时字符集转换问题处理方案分享
2014/06/19 Python
Python学习思维导图(必看篇)
2017/06/26 Python
OPENCV去除小连通区域,去除孔洞的实例讲解
2018/06/21 Python
PyTorch的Optimizer训练工具的实现
2019/08/18 Python
python 操作hive pyhs2方式
2019/12/21 Python
Python数组并集交集补集代码实例
2020/02/18 Python
python GUI库图形界面开发之PyQt5动态(可拖动控件大小)布局控件QSplitter详细使用方法与实例
2020/03/06 Python
浅析python 字典嵌套
2020/09/29 Python
Pytorch1.5.1版本安装的方法步骤
2020/12/31 Python
详解使用CSS3的@media来编写响应式的页面
2017/11/01 HTML / CSS
html5使用canvas压缩图片的示例代码
2018/09/11 HTML / CSS
《浅水洼里的小鱼》听课反思
2014/02/28 职场文书
团队会宣传标语
2014/10/09 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
什么是检讨书?检讨书的格式及范文
2019/11/05 职场文书
SQL实战演练之网上商城数据库商品类别数据操作
2021/10/24 MySQL