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 相关文章推荐
比较详细的关于javascript 解析json的代码
Dec 16 Javascript
javascript控制frame,iframe的src属性代码
Dec 31 Javascript
jQuery实现购物车多物品数量的加减+总价计算
Jun 06 Javascript
JS实现5秒钟自动封锁div层的方法
Feb 20 Javascript
使用纯javascript实现放大镜效果
Mar 18 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
Dec 03 Javascript
写给小白的JavaScript引擎指南
Dec 04 Javascript
Ionic默认的Tabs模板使用实例
Aug 29 Javascript
js实现手机拍照上传功能
Jan 17 Javascript
简易Vue评论框架的实现(父组件的实现)
Jan 08 Javascript
elementui的默认样式修改方法
Feb 23 Javascript
vue根据条件不同显示不同按钮的操作
Aug 04 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
手把手教你使用DedeCms的采集的图文教程
2007/03/11 PHP
Ha0k 0.3 PHP 网页木马修改版
2009/10/11 PHP
PHP函数用法详解【初始化、嵌套、内置函数等】
2020/06/02 PHP
在Javascript中定义对象类别
2006/12/22 Javascript
Prototype使用指南之range.js
2007/01/10 Javascript
javascript 打印内容方法小结
2009/11/04 Javascript
jQuery的运行机制和设计理念分析
2011/04/05 Javascript
stream.js 一个很小、完全独立的Javascript类库
2011/10/28 Javascript
JavaScript对象学习经验整理
2013/10/12 Javascript
Node.js中child_process实现多进程
2015/02/03 Javascript
纯javascript代码实现计算器功能(三种方法)
2015/09/07 Javascript
jQuery焦点图轮播插件KinSlideshow用法分析
2016/06/08 Javascript
bootstrap table实例详解
2017/01/06 Javascript
Bootstrap 填充Json数据的实例代码
2017/01/11 Javascript
JavaScript使用ZeroClipboard操作剪切板
2017/05/10 Javascript
js自定义trim函数实现删除两端空格功能
2018/02/09 Javascript
jQuery实现DIV响应鼠标滑过由下向上展开效果示例【测试可用】
2018/04/26 jQuery
详解js 创建对象的几种方法
2019/03/08 Javascript
非常实用的jQuery代码段集锦【检测浏览器、滚动、复制、淡入淡出等】
2019/08/08 jQuery
Vue 自定义标签的src属性不能使用相对路径的解决
2019/09/17 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
React实现阿里云OSS上传文件的示例
2020/08/10 Javascript
[01:01:51]EG vs VG Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
在Python中使用mechanize模块模拟浏览器功能
2015/05/05 Python
mac 安装python网络请求包requests方法
2018/06/13 Python
python利用Tesseract识别验证码的方法示例
2019/01/21 Python
基于h5py的使用及数据封装代码
2019/12/26 Python
CSS3地图动态实例代码(圆圈向外扩散)
2018/06/15 HTML / CSS
canvas实现扭蛋机动画效果的示例代码
2018/10/17 HTML / CSS
Etam德国:内衣精品店
2019/08/25 全球购物
本科生自荐信
2014/06/18 职场文书
社团活动总结怎么写
2014/06/30 职场文书
庆元旦演讲稿
2014/09/15 职场文书
四风问题个人自查剖析材料思想汇报
2014/09/21 职场文书
交通局领导班子群众路线教育实践活动对照检查材料思想汇报
2014/10/09 职场文书
政审证明范文
2015/06/19 职场文书