JS中的或和与

##  一、||（逻辑或）
从字面上来说，只有前后都是false的时候才返回false，否则返回true。
```javascript
alert(true||false); // true
alert(false||true); // true
alert(true||true); // true
alert(false||false); // false

看下面示例中 '' 和 0 是表示 false
alert(0||1);//返回的结果是1
alert(2||1);//返回的结果是2
alert('a'||1);//返回的结果是'a'
alert(''||1);//返回的结果是1
alert('a'||0);//返回的结果是'a'
alert(''||0);//返回的结果是0
alert(0||'');//返回的结果是''
这就意味
1、只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。
2、只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

短路（省力）原理： 知道了前面第一个的结果就知道后的输出，如果为第一个为：true，则取第一个的值，如果第一个为false，则取第二个的值。

js必须牢记的6个蛋蛋： 请你一定要记住：在js逻辑运算中，0、”“、null、false、undefined、NaN都会判为false，其他都为true

```

很多代码if(!!attr)，为什么不直接写if(attr)；
其实这是一种更严谨的写法：
请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。
## 二、&&（逻辑与）
从字面上来说，只有前后都是true的时候才返回true，否则返回false。
```javascript
alert(true&&false); // false
alert(true&&true); // true
alert(false&&false); // false
alert(false&&true); // false

alert(''&&1);//''
alert(''&&0);//''
alert('a'&&1);//1
alert('a'&&0);//0
alert('a'&&'');//''
alert(0&&'a');//0
alert(0&&''); //0

短路原理
1、只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
2、只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;
```

## 综合实例
需求：
假设对成长速度显示规定如下：
成长速度为5显示1个箭头；
成长速度为10显示2个箭头；
成长速度为12显示3个箭头；
成长速度为15显示4个箭头；
其他都显示都显示0各箭头。
用代码怎么实现？

差一点的if，else
```javascript
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 if(add_step == 15){ 
add_level = 4; 
} 
else { 
add_level = 0; 
}

```
稍好些的switch
```javascript
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; 
case 15 : add_level = 4; 
break; 
default : add_level = 0; 
break;
}

```
那么你有没有想过用一行就代码实现呢？
ok，让我们来看看js强大的表现力吧：
```javascript
var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) || (add_step==15 && 4) || 0;

```
更强大的，也更优的：
```javascript
var add_level={'5':1,'10':2,'12':3,'15':4}[add_step] || 0;

```

如果需求改成：
成长速度为>12显示4个箭头；
成长速度为>10显示3个箭头；
成长速度为>5显示2个箭头；
成长速度为>0显示1个箭头；
成长速度为<=0显示0个箭头。
那么用switch实现起来也很麻烦了。
```javascript
var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) || (add_step>0 && 1) || 0;

```

参考：[JS中或者(或 or ||)与并且(与 and &&)](https://blog.csdn.net/weixin_44384778/article/details/99946372 "JS中或者(或 or ||)与并且(与 and &&)")