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

Posted 2020-09-11 全凭一口仙气儿活着

       最近重新翻开原生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;// c = 4

 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=	赋值、运算赋值
,	多重求值

 

 

 

 

 

 

 

 

 

 

 

 

如有错误，欢迎指正。