javascript “||” 和 “&&” 小技巧

javascript中有很多小技巧，可以让代码变得简洁、易读、易懂。

我们今天先来看看 “||” 和 “&&” 小技巧吧。

我们来举我们在实际工作当中经常遇到的一些情况吧：

打比方说我们去服务端请求一个用户的头像的地址的字段（face），如果用户设置过我们直接使用用户的头像地址，如果没有设置过我们设置一个默认的头像

这个时候很多人可能会这样写

if(face === ''){
  face = '默认头像'//使用默认头像
}

这样写虽然没有问题但是简单的一行代码被写成了多行，如果项目越来越庞大 代码冗余就会越来越多，代码也会越来越难读

当遇到这种情况的时候我们完全可以使用下面这种简便写法来达到上面同样的效果

face = face || '默认头像'

这句代码的意思是 当“face”有值的时候，把值赋值给“face”，如果没有我们把“默认头像”赋值给“face”

解释

表达式a || 表达式b :   计算表达式a（也可以是函数）的运算结果，

如果为 Fasle, 执行表达式b（或函数），并返回b的结果；

如果为 True，返回a的结果；

表达式a && 表达式b :  计算表达式a（也可以是函数）的运算结果，

如果为 True, 执行表达式b（或函数），并返回b的结果；

如果为 False，返回a的结果；

举例

var a = 1 || 2 //1
var a = 0 || 2 //2
var a = 0 || false || 2 //2
var a = 1 || false || 2 //1
var a = 0 || 2 || 3 // 2

var a = 1 && 2 // 2
var a = 1 && 2 && 3 // 3
var a = 1 && 0 && 3 // 0
var a = 1 && 3 && 0 // 0

如果有多个“||”或者“&&”的时候，我们完全可以把它看成多个表达式

打比方“var a = 1 && 0 && 3”为什么结果是0

我们可以先执行“1 && 0” 因为1转换成布尔类型是true所以得到的结果是0，我再用“0 && 3”，因为0转换成布尔类型是false所以直接返回0

还有一种比较简单的得到结果的方法

当遇到“||”我们从左往右看如果如果值为false，我们看下一项（如果是下一项是最后一项，不管值是false还是true我都直接返回它）；如果值为true则直接返回这个值

当遇到“&&”我们也从左往右看如果值为true，我们看下一项（如果是下一项是最后一项，不管值是false还是true我都直接返回它）；如果值为false则直接返回这个值