javascript中if和switch,==和===详解


Posted in Javascript onJuly 30, 2015

今天改插件BoxScroll的时候,因为if里面的条件判断多于两个,于是立马想着改写switch。改到一半,忽然记起来JSHint等代码质量检测工具中的一个要求,用===替换==,不用不可靠的强制转型。然后忽然猜想,改成switch是不是会降低效率啊?switch里面的实际判断是==还是===?

有了想法,赶紧举个栗子,好一口吃掉:

var a = '5';
switch (a) {
  case 5:
    console.log('==');
    break;
  case "5":
    console.log('===');
    break;
  default:
}

最后控制台显示的是===,看来可以放心的用。找了下以前的学习笔记,嗯,高三里面确实也说switch判断是全等运算符,因此不会发生类型转换。这里小结一下

1.if和switch

if 是用得最多的,没什么太多好说。值得注意的一点是:if 其实和 || 很像,如果if (conditionA){} else {} 中的conditionA为true,然后它执行完else之前的代码块后就看都不会看else里面的代码。和 || 前面为true的时候后面会被忽略一样,即便里面有再多的错误。基于这个性质,当然把可能用得最多的代码块放在前面,减少判断次数。另一方面,如果有很多的 if 判断,而且可能执行的次数分布比较均匀,那么后面的判断语句每次都要把前面的判断一个一个执行完,不利于优化。比较好的做法是将一层判断语句变成两层判断语句,如

if (a > 0 && a <= 1) {
  //do something
} else if (a > 1 && a <= 2) {

} else if (a > 2 && a <= 3) {

} else if (a > 3 && a <= 4) {

} else if (a > 4 && a <= 5) {

} else if (a > 5 && a <= 6) {

}...

变为

if (a > 0 && a <= 4) {
  if (a <= 1) {
    //do something
  } else if (a > 1 && a <= 2) {

  } else if (a > 2 && a <= 3) {

  } else if (a > 3 && a <= 4) {

  }
} else if (a > 4 && a <= 8) {
  //
}..

虽然前面的每个判断都多加了一次,但是后面的判断就都减少了(4-1)*n次,还是满赚的。忽然觉得这种方式和嵌套循环有点像,循环次数少的放在外面有助于性能优化,如何分成两层甚至多层就要看具体情况了。

switch是 if 最亲密的战友,每次 if 忙不过来的时候就过来搭把手。switch和 if 互转估计没什么好说的,而且switch和if一样,都是顺序从上往下执行判断的,有所不同的是 if 中的else在switch里面可不管用,它有自己的小弟:break。如果没有遇到break,switch会继续往下执行,如

var a = 2;
switch (a) {
  case 1:
    console.log("1");
    //break miss
  case 2:
    console.log("2");
  case 3:
    console.log("3");
  default:
    console.log('no break');
}

最后控制台显示 2,3,no break 。其实也蛮好理解,break是提示程序跳出内部执行体到下一个case 判断,如果没有了,相当于 if(condition){A}{B},没有了else,A和B当然都要执行啦。还有两个小tip,一是switch和case中可以写任何表达式,如

switch (A + B) {
  case a * b:
    console.log("1");
    break;
  case a / b + c:
    break;
    //...
  default:
    console.log('no break');
}

实际上的比较是 (A+B)===(a*b)和(A+B)===(a/b+c)。二是switch有一种特殊的用法,如

switch (true) {
  case condition1:
    //do something
    break;
  case condition2:
    break;
    //...
  default:
    //..
    ;
}

此时switch中的每一个case都会按照顺序判断执行。至于switch(false)?并没有什么卵用。

2.==与===

一句话搞定,除了在比较之前不转换操作数之外,全等和不全等操作符与相等和不相等操作符并没有什么不同。

最经典的案例

var a = "5",
  b = 5;
a == b     //true
a === b     //false
var a = "ABC",
  b = "AB" + "C";
a === b     //true

下面的显示true的原因其实和string类型不可变是分不开的。表面看上去b只是简单的拼接一个字符串,但实际上它已经和原来的b没有关系。每一个字符串都存在内存池中特定的地方,当b="AB"+"C"执行完的时候,字符串AB和C就已经被销毁,而b指向内存池中ABC的位置。由于在指向前在内存池中发现了字符串ABC(因为a引用着它,所以存在),所以b就和a指向同一块区域,全等判断相等。如果在b之前没有任何变量指向字符串ABC,那么内存池中没有,就会在里面划一块地方给ABC,并将b指向ABC。

附以前的总结图两张:

javascript中if和switch,==和===详解

javascript中if和switch,==和===详解

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
Javascript中拼接大量字符串的方法
Feb 05 Javascript
jquery form表单获取内容以及绑定数据
Feb 24 Javascript
jQuery实现的导航动画效果(附demo源码)
Apr 01 Javascript
jQuery实现鼠标悬停3d菜单展开动画效果
Jan 19 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
bootstrap table 多选框分页保留示例代码
Mar 08 Javascript
基于vue组件实现猜数字游戏
May 28 Javascript
JS实现快递单打印功能【推荐】
Jun 21 Javascript
Vue移动端实现图片上传及超过1M压缩上传
Dec 23 Javascript
JavaScript的垃圾回收机制与内存管理
Aug 06 Javascript
vue 手机物理监听键+退出提示代码
Sep 09 Javascript
用javascript实现自动输出网页文本
Jul 30 #Javascript
理解javascript中的原型和原型链
Jul 30 #Javascript
原生js与jQuery实现简单的tab切换特效对比
Jul 30 #Javascript
文字垂直滚动之javascript代码
Jul 29 #Javascript
如何使用jQuery技术开发ios风格的页面导航菜单
Jul 29 #Javascript
如何用javascript计算文本框还能输入多少个字符
Jul 29 #Javascript
详解JavaScript的Polymer框架中的通知交互
Jul 29 #Javascript
You might like
JS与PHP向函数传递可变参数的区别实例代码
2011/05/18 PHP
php循环table实现一行两列显示的方法
2015/06/04 PHP
反射调用private方法实践(php、java)
2015/12/21 PHP
微信支付开发维权通知实例
2016/07/12 PHP
如何打开php的gd2库
2017/02/09 PHP
php实现的表单验证类完整示例
2019/08/13 PHP
childNodes.length与children.length的区别
2009/05/14 Javascript
JavaScript字符串String和Array操作的有趣方法
2012/12/18 Javascript
jQuery+CSS 半开折叠效果原理及代码(自写)
2013/03/04 Javascript
extjs 3.31 TreeGrid实现静态页面加载json到TreeGrid里面
2013/04/02 Javascript
javascript处理表单示例(javascript提交表单)
2014/04/28 Javascript
javascript实现字符串反转的方法
2015/02/05 Javascript
js钢琴按钮波浪式图片排列效果代码分享
2015/08/26 Javascript
Bootstrap如何创建表单
2016/10/21 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
Vue表单及表单绑定方法
2018/09/04 Javascript
JS/HTML5游戏常用算法之追踪算法实例详解
2018/12/12 Javascript
如何在vue项目中嵌入jsp页面的方法(2种)
2020/02/06 Javascript
js中调用微信的扫描二维码功能的实现代码
2020/04/11 Javascript
[01:52]2014DOTA2西雅图邀请赛 V社开大会你不知道的小秘密
2014/07/08 DOTA
[47:03]完美世界DOTA2联赛PWL S3 access vs LBZS 第一场 12.20
2020/12/23 DOTA
老生常谈进程线程协程那些事儿
2017/07/24 Python
python如何压缩新文件到已有ZIP文件
2018/03/14 Python
django2.0扩展用户字段示例
2019/02/13 Python
python抓取搜狗微信公众号文章
2019/04/01 Python
django使用多个数据库的方法实例
2021/03/04 Python
使用CSS3来制作消息提醒框
2015/07/12 HTML / CSS
《石榴》教学反思
2014/03/02 职场文书
幼儿园父亲节活动方案
2014/03/11 职场文书
母亲节演讲稿
2014/05/27 职场文书
2014年党务公开工作总结
2014/12/09 职场文书
师德先进个人事迹材料
2014/12/19 职场文书
停水通知
2015/04/16 职场文书
Python使用永中文档转换服务
2022/05/06 Python
向Spring IOC 容器动态注册bean实现方式
2022/07/15 Java/Android