前言

现代人的时间实在是太宝贵了，尤其是还要读枯燥无聊的技术文。所以，我的【3 mins】系列文章，都不会超过读者三分钟阅读时间。希望积少成多的知识，可以汇成汪洋大海~ 。

今天要聊的话题是：巧用布尔操作符

布尔操作符

布尔操作符有三个：非（NOT）,与（AND）,或（OR）

非（!）

这个操作符对于任何JS数据类型，都会返回一个布尔值。它首先将数据用Boolean()转化成布尔值，在求反。

为了后面的讲解，我把Boolean()的转化规则贴出来了：

数据类型 转化为true 转化为false

Boolean true false

String 任何非空字元串 『』 （空字元串）

Number 任何非零数值（包括无穷大） 0与NaN Object 任何对象 null(只有null转成false)Undefined 无 Undefined

根据上述规则，猜猜下面的输出

!null
!a
![]
!{}
!undefined

答案在控制台跑一跑就看到了，应该是 true, false, false, false,true

那如果数据test前面加!!呢？

仔细想想，其实就是对数据Boolean()处理之后求反在求反，所以用这个!!test跟使用Boolean(test)效果一样。

应用：

下回你想转化一个数据为Boolean的时候就不用那么麻烦的，直接用操作符!!解决~

而if条件语句会自动调用Boolean()这个函数转成布尔值，当然下面要讲的 || && 都会做这件事。

但是有个陷阱，就是判断某个参数是否传入的时候，有的人会这么写

function test (a) {
// 如果a没有传入
if(!a){
// statement 1
} else {
// statment 2
}
}

当a 传入 0 时候，if(!a)还是判定a 没有传入，执行了statement 1，发生错误。所以判断某个参数是否传入，我们最好用 if (typeof a === undefined)来判断。

与

var result = a && b;

属于短路操作，也就是先看第一个数据a，a为false，就不会去看第二个数据b，直接返回false；a为true, 第二个数据才有决定结果的机会。

应用：

简化下面代码

function sayHi() {};
if(test) {
sayHi();
}

可以简化为

test && sayHi();

实例：

比如在获得后台的json对象的时候result，有时候可能会丢栏位names(假设这是一个数组)，导致前端的报错。

// result = {}

const names = result.names.map(item => item.name)

当result.names为undefined的时候，就会导致页面报错。因为undefined 没有map方法，所以在使用数组的专有方法时，一定要注意兼容。

很多人会这么写：

if（result.name） {
const names = result.names.map(item => item.name)
}

可以简化为

const names = result.name && result.names.map(item => item.name)

或（OR）

var result = a || b；

a,b 有一个为true，返回true。所以也是短路操作符，当a为true，不再看b。

应用：

避免变数为null/ undefined，给变数赋默认值

还是上面那个问题，我们也可以用 || 先给result.names赋默认值：

let names = result.name || [];
names = names.map(item => item.name)

推荐阅读：

相关文章