你不得不知的逻辑或(||)与(&&)非(!)

       最近重新翻开原生JS,又得到很多不同的体会,虽然现在开发框架那么多,但很多思想都还是离不开原生的基础。今天呢,我就根据自己的学习总结一下逻辑与(&&)和(逻辑或(||)和逻辑非(!)。

      基本定义

      ||:逻辑或,只有表达式的值都为false,才返回false,其他情况返回true  比如:(8>5)&&(4<6),返回true;(8<5)&&(4<6),返回false

      &&:逻辑与,若两边表达式的值都为true,才返回true;比如: (8>5)&&(4<6),返回true;(8<5)&&(4<6),返回false

    !:逻辑非,若表达式的值为true,则返回false;若表达式的值为false,则返回true  比如:!(9>2),返回false;!(9<2),返回true,

      这是他们的基本定义,我们都再熟悉不过了,看似好像没有什么大用,其实这三个运算符在我们编写代码中所起到的重要作用。

 首先看几个例子

 var a = 0 || 1 || 2;// a = 1
 var b = 1 || 0 || 3;// b = 1
 var c = 0 || 0 || 0;// c = 0
 var a = 0 && 1 && 2;// a = 0
 var b = 1 && 0 && 3;// b = 0
 var c = 0 && 0 && 0;// c = 0
 var d = 1 || 2 || 4;// d = 1
OK.看完上面的栗子,你会发现逻辑运算符不是简单的返回true/false,而是返回了某一个内容,其实它的判断过程是这样的: 逻辑运算符是从前往后依次判断,判断到那个能得出最终结论的地方,就会停止往下判断返回最后判断的那个内容,不管它是真是假。(记住这句话就行 比如:||运算符,只要一个为真就为真,所以你可以认为它会从前往后一直按顺序在找真,找到真就返回那个真。找不到也返回最后一个判断的那个值。 0 || 1 || 2,判断到1就知道结果肯定是真,不再继续判断,返回1。 1 || 0 || 3, 判断到第一个就知道结果是真,不再继续判断,返回1。 0 || 0 || 0;一直判断到了最后一个,才知道结果为假,返回最后一个判断的0。 同理:&&运算符是只要一个为假就为假,所以它会从前往后一直找假的,返回最后一个判断的值。

实际应用

   1给函数参数定义默认值

 var a = a||2;  //判断过程:如果变量a是真就停止判断,返回a,如果a是假就继续判断,所以返回2. 实际上就是给a起了个默认值2。
 也等同于:
  if(a){
     a = a
  }else{
    a =2 
  }

//因为js不像php可以直接在型参数上定义func($attr=5)一个默认值,所以可以通过这种方法给参数定义默认值。(顺便提醒一下,最新的es6标准已经可以定义函数参数默认值了。)
可以看出用逻辑运算符既节省代码又实现功能

   2 大大减少代码量

  首先出个题:假设:成长速度为5显示1个箭头;成长速度为10显示2个箭头;成长速度为12显示3个箭头;其他都显示都显示0各箭头。

  用代码怎么实现?(例子来源于网上的一个贴吧里)

  最简单的

var add_level = 0;
if(add_step == 5){
   add_level = 1;
}else if(add_step == 10){
   add_level = 2;
}else if(add_step == 12){
   add_level = 3;
}else {
  add_level = 0;
}

 稍好些的switch:

var add_level = 0;
 switch(add_step){
    case 5 : add_level = 1;
    break;
    case 10 : add_level = 2;
    break;
    case 12 : add_level = 3;
    break;
    default : add_level = 0;
    break;
}

更好的

var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3)  || 0;

更更好的

var add_level={'5':1,'10':2,'12':3}[add_step] || 0;
等同于下面的代码:
var obj = {'5':1,'10':2,'12':3};
var add_level=json[add_step] || 0;

如果需求改成成长速度为>12显示4个箭头;成长速度为>10显示3个箭头;成长速度为>5显示2个箭头;成长速度为>0显示1个箭头;成长速度为<=0显示0个箭头。

var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;
console.log(add_level);

哇塞,是不是发现我们的代码一下子就少了很多,但需要注意的一点就是:一方面精简js代码,能实质性的减少网络流量,尤其是大量应用的js公用库。同时,也带来了代码可读性的降低,个人比较推荐的做法是:如果是相对复杂的应用,请适当地写一些注释。

我们可以不使用这些技巧,但是我们一定要能看懂,因为这些技巧已经广泛应用,不理解这些你就很难看懂别人的代码。

关于!运算符

很多代码写if(!!attr),为什么不直接写if(attr);其实这是一种更严谨的写法,如下:

console.log(typeof 5); //number
console.log(typeof !!5); //boolean

可以看出:!的作用是把一个其他类型的变量转成的bool类型。
        不管!后面是什么类型,逻辑非都会将它转成布尔类型

&& (逻辑与) 和||(逻辑或)的优先级

混合使用的时候要注意他们的优先级:&& (逻辑与) 优先级高于||(逻辑或)

return a && b || c 

先算a&&b,a 是 false ,a&&b就是返回a,再算a||c,则肯定返回 c;如果a是true ,则要看B,自己想想吧。。。

 

另附:JS运算符优先级(从高到低列出)

 运算符 描述
. [] () 字段访问、数组下标、函数调用以及表达式分组
++ -- - ~ ! delete new typeof void 一元运算符、返回数据类型、对象创建、未定义值
* / % 乘法、除法、取模
+ - + 加法、减法、字符串连接
<< >> >>> 移位
< <= > >= instanceof 小于、小于等于、大于、大于等于、instanceof
== != === !== 等于、不等于、严格相等、非严格相等
& 按位与
^ 按位异或
| 按位或
&& 逻辑与
|| 逻辑或
?: 条件
= oP= 赋值、运算赋值
, 多重求值

 

 

 

 

 

 

 

 

 

 

 

 

如有错误,欢迎指正。

 

posted @ 2017-04-15 13:41  全凭一口仙气儿活着  阅读(5665)  评论(4编辑  收藏  举报