逻辑运算符及短路运算妙用

JavaScript 里有三个逻辑运算符：||（或），&&（与），!（非）。这些运算符却可以被应用于任意类型的值，而不仅仅是布尔值。他们的结果也同样可以是任意类型。关于他们的运算规则很简单，望名知意。

基本用法：

• ||（或）

如下，a 或者 b 有一个为真，就会执行打印语句。

let a = 0,b = 2;
if(a || b){
    console.log(a, b);
}

• &&（与）

如下，a 和 b 必须都为真，才会执行打印语句。

let a = 0, b = 2;
if (a && b) {
    console.log(a, b);
}

• !（非）

如下，对 a 的值取反，为真时才会执行打印语句。

let a = 0;
if (!a) {
    console.log(a);
}

补充：在使用非运算时建议用!!代表true，!代表false，!! 代表强制转化成true，这样做的目的就是保证值只能在true/false中取。

let a = 1;
if (!!a) {//!!a 强制转换为布尔值"true",打印语句被执行
    console.log(a);
}
if (!a) {//!a 是一个假值，打印语句不执行
    console.log(a);
}

以上是基本用法。。。。

下面来说一说"&&"和"||"产生的短路运算

先来看一波打印语句中的逻辑运算执行结果

console.log( false && true ); // false
console.log( true && false); // false
console.log( 123 && '中国'); // 中国
console.log(1 && 0); // 0
console.log( undefined && 0); // undefined 
console.log(null && 1); // null
console.log(1 && 0 && 2);;//0

在&&的运算中，代码从左往右执行，如果都为真，则返回最后一个值，当遇到假值的时候，就会发生短路，并且返回这个假值，代码不再往下执行。

console.log( true || true ); // true
console.log( 123 || '中国'); // 123
console.log( false || true ); // true
console.log( true || false); // true
console.log(1 || 0); // 1
console.log( undefined || 0); // 0 
console.log(null || 1); // 1
console.log(0 || 1 || 2);//1

在||的运算中，代码从左往右执行，如果都为假，则返回最后一个假值，当遇到真值的时候，就会发生短路，并且返回这个真值，代码不再往下执行。

由上可得：

if(a > = 5){
  alert(“hello world”);
}
//可以写成：
a > = 5 && alert(“hello world”);

于是就有了一些疯狂的想法

先听需求：

假设对成长速度显示规定如下： 成长速度为5显示1个箭头； 成长速度为10显示2个箭头； 成长速度为12显示3个箭头； 成长速度为15显示4个箭头； 其他都显示都显示0各箭头。

普通条件语句写法

var add_level = "" ;    

if(add_step == 5){    
    add_level = 1 ; 
}    
else if(add_step == 10){    
  add_level = 2 ;     
}    
else if(add_step == 12){    
     add_level = 3 ; 
}    
else if(add_step == 15){    
     add_level = 4 ;  
}    
else {    
      add_level = 0 ;   
}  
//另外就是用switch写了

但是如果用短路运算的原理，一行就能够解决掉了！！！

let add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;     

附赠一个数组替换的🌰

let arr = [1, 2, 3, 4, 5]
let newArr=arr.map(item => { return item && "🐶" })
console.log(newArr);//[ '🐶', '🐶', '🐶', '🐶', '🐶' ]