最近重新翻开原生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
可见，逻辑运算符不是简单的返回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 减少代码量**
** 题目**：假设：如果a=5的时b=1，a=10的时b=2，a=12的时候b=3，其他情况b=0， 用代码怎么实现？
** 最简单的**
var b= 0;
if(a == 5){
b = 1;
}else if(a == 10){
b= 2;
}else if(a == 12){
b= 3;
}else {
b = 0;
}
** 稍好些的switch：**
var b = 0;
switch(a){
case 5 : b = 1; break;
case 10 : b = 2; break;
case 12 : b = 3; break;
default : b = 0; break;
}
更好的
var b = (a==5 && 1) || (a==10 && 2) || (a==12 && 3) || 0;
进阶
var b ={'5':1,'10':2,'12':3}[a] || 0;
等同于下面的代码：
var obj = {'5':1,'10':2,'12':3};
var b = json[a] || 0;
如果需求改成：
如果a>5的时b=1，a>10的时b=2，a>12的时候b=3，其他情况b=0， 用代码怎么实现？
var b = (a>12 && 3) || (a>10 && 2) || (a>5 && 1) || 0;
是不是发现代码一下子就少了很多，但需要注意的一点就是：
优点：js代码精简，能减少网络流量，尤其是大量应用的js。
缺点：代码可读性的降低，
推荐：如果是相对复杂的应用，请适当地写一些注释。
我们可以不使用这些技巧，但是我们一定要能看懂，因为这些技巧已经广泛应用，不理解这些你就很难看懂别人的代码。
关于！运算符
很多代码写if(!!a)，为什么不直接写if(a)；因为这样写更严谨
如下：
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。
先讲到这里，希望能帮助到一些人。
网友评论