js if和switch,==和===

  今天改插件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。

  附以前的总结图两张:

时间: 2024-08-08 05:44:23

js if和switch,==和===的相关文章

运用js脚本语言switch实现一个求一个日期是一年中的第几天,考虑润年

运用js脚本语言实现一个求一个日期是一年中的第几天,考虑润年 我们需要在网页中弹出框输入年月日,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <!-- 通过switch结构实现计算一个日期是一年中的第几天,考虑润年 --> <script t

js中使用Switch

语法 switch(n) { case 1: 执行代码块 1 break; case 2: 执行代码块 2 break; default: n 与 case 1 和 case 2 不同时执行的代码 } 工作原理:首先设置表达式 n(通常是一个变量).随后表达式的值会与结构中的每个 case 的值做比较.如果存在匹配,则与该 case 关联的代码块会被执行.请使用 break 来阻止代码自动地向下一个 case 运行. 实例 显示今日的周名称.请注意 Sunday=0, Monday=1, Tue

js循环 if+switch break判断,while +do while循环

if else循环 var num=prompt("请输入一个数:"); else后面不可加判断条件,else在多条件中最后输出 if(num>=80&&num<=100) { alert("你学的不错,加油!"); } else if(num>=60&&num<80) { alert("良好"); } else if(num>=50&&num<60) { ale

JS中的switch中default的用法

default什么时候会执行?default的位置对执行结果有影响吗? default只有在case匹配失败的时候才会执行         int a=4; switch (a){ case 1: System.out.println("1"); break; case 2: System.out.println("2"); break; case 3: System.out.println("3"); break; default: Syste

为React Native开发写的JS和React入门知识

来自Leo的原创博客,转载请著名出处 我的stackoverflow 前言 想来想去,还是需要写一篇文章来介绍下JavaScript和React的基本知识.最初开发ReactNative的时候,完全没接触过React,大学那会简单学了点JS.毕业后一直在某五百强外企上班.做的东西也乱七八糟的,搞过大数据,搞过物联网,不过看我博客的同学应该知道,我对iOS和Android还是比较喜欢的.所以,博客都是写的都是移动端的东西.好像扯的有点多了,本文的目的就是为了那些JS和React小白提供一个快速入门

了解 JavaScript (3)- 马上开始

之前演示了一个 Hello World 程序,而后讲解了一些基础概念,下面开始一些基础工作. 将脚本放在哪里 脚本可以放置在两个位置 <head></head>之间,头脚本(header script) <body></body>之间,体脚本(body script) 通过示例学习一些知识,请认真看注释哟. <!doctype html> <html> <head> <meta charset="utf-8

javascript语句

javascript与html的结合方式: 内部方式<script type="text/javascript"> js代码 </script> 外部方式 首先建一个js文件 里面写js代码 然后在html页面通过<script type="text/javascript" src="js文件的路径"></script> 语句:      if while do...while switch    

开关控件在主流前端框架中的使用方法

本文仅介绍使用方法,后续再介绍实现方案及优劣对比. jquerymobile jqm可以使用checkbox和select模拟switch控件,只需要增加data-role='flipswitch'即可: 默认开关控件: <input type="checkbox" data-role="flipswitch" /> 若要变为选中状态,只需要增加一个checked属性即可,如下: <input type="checkbox" d

jade学习

jade安装? nodeJs中输入以下命令 sudu npm install jade -g jade -h jade工具 推荐:online official online html2jade jade语法 标签 以p标签为例 p 会转换为: <p></p> jade能自动识别自闭和标签: input 会转换为: <input/> 文本 标签中添加文本 p 欢迎加入wandoujia-fe 会转换为: <p>欢迎加入wandoujia-fe</p&g