12.逻辑运算符与、或、非、双感叹号、双问号

逻辑运算符、||、&&、!、!!、??

---

章节目录
上一篇：《if else》
下一篇：《空值合并，??运算符》

---

算术运算符用于连接（计算）算术表达式，计算产生算术结果。理论上，逻辑运算符用于连接（计算）逻辑表达式，也就是条件表达式，返回Boolean类型的结果。

之所以说以上论述属于理论上，是因为，在JavaScript中，逻辑运算符可以参与任何类型的计算，而不仅仅是Boolean，同样的，产生的结果也是多种多样的。

可能一部分同学已经开始困惑了，一会行一会不行，到底闹哪样？别急，本文将详细论述JavaScript中逻辑运算符的运算原理，相信你在读完本文后，一定可以掌控雷电！

JavaScript中有四种逻辑运算符：&&（与）、||（或）、!（非）、??（空值合并运算符），??运算符下节再讲。

或运算符||

双竖线组成的||就是或运算符，在学术上，或运算符只能操作Boolean类型的表达式，如下：

let r = true || false; //true

或运算符左右两侧任意一个表达式的结果为true，那么整个或表达式的结果就是true，总共包括如下四种情况：

let r1 = true || true;		//true
let r2 = true || false;		//true
let r3 = false || true;		//true
let r4 = false || false;	//false

以上四种情况，只有当左右两侧表达式都是false的时候，||表达式才会返回false。

或表达式更为常见的用法是结合if使用，用于判断给定的表达式是否有true存在，如下：

let val = prompt('请输入一个数字',0);
if (val % 2 == 0 || val % 3 == 0){
	alert(`${val}不是2的倍数就是3的倍数！`);
}else{
	alert(`${val}既不是2的倍数，又不是3的倍数。`);
}

以上使用方法都是传统的，符合常规的使用方法，比较容易理解和使用。

但是，在JavaScript中，为了增强逻辑运算符的计算能力，赋予了更强大的特性，下面就详细介绍JavaScript中的||运算规则。

寻找第一个真（true）值

语法：

let r = exp1 || exp2 || exp3 ||...;
alert(r);

或运算符的运算符规则：

1. 从左往右计算表达式exp1、exp2、exp3、… ；
2. 计算表达式exp后，将其转换为Boolean，如果是true，停止计算并返回exp表达式的值；
3. 如果所有的表达式都计算过后，没有true值，则返回最后一个表达式的计算结果；

返回值的类型不会做转换，所以||可以返回任何类型的值。

参与或运算的表达式组成了一个表达式链，或运算符从中找到第一个真值并返回，否则返回最后一个值。

举个栗子：

let r1 = 1 || 0;//1
let r2 = 'str' || false;//'str'
let r3 = null || '' || 1; // 1
let r4 = null || undefined;// undefined
let r5 = null || NaN;//NaN

获取表达式列表中的第一个有意义值

例如，我们在高考报志愿的时候，有三个志愿，只有第一志愿没有录取，第二志愿才有机会，其次才是第三志愿，这个过程叫做滑档，也是找到第一个真值（录取志愿）的过程。

使用||表达以上滑档过程：

let first = "";
let secon = "";
let third = "北京大学";
alert(first || secon || third || "家里蹲");

以上代码展示了三个志愿依次录取的过程，如果三个志愿都没有录取（都为空、假），那么就会返回家里蹲。

短路计算

我们可以利用||表达式返回第一个真值的特性，选择想执行的代码段。

例如：

true || alert('不会执行');
false || alert('执行');

这么做的好处是，如果我们在做测试，又不想反复注释代码，就可以使用短路特性，选择性的执行某些代码。

例如，以上代码只会执行第二行，如果我们希望执行第一行，只需要把第一行的true改为false就好了。

实际上，更为常用的测试代码是：

1 || alert('不会执行');
0 || alert('执行');

这种短路的用法，实际上可以用其他方法代替，例如if语句。
这么使用的最大好处是，代码简介，且显得高端！

与运算符&&

两个&组成的&&就是与运算符，只有当&&两侧的表达式结果都是true时，与运算符才会返回true。

与运算符的四种使用情形如下：

let r1 = true && true;		//true
let r2 = true && false;		//false
let r3 = false && true;		//false
let r4 = false && false;	//false

和if语句结合使用的案例：

let val = prompt("请输入一个数字", 0);
if(val > 0 && val < 100){
	alert(`${val}大于0小于100`);
}

&&运算符同样被JavaScript赋予了其他特性。

寻找第一个假值

和||寻找第一个真值相反，&&可以找到多个表达式中的第一个假值，如下表达式：

let r = exp1 && exp2 && exp3 && ...;

&&表达式在运算时，执行过程如下：

1. 从左到右计算表达式exp1、exp2、exp3；
2. 在计算被一个表达式exp后，将计算结果转为Boolean类型，如果结果是false，停止计算并返回表达式结果；
3. 如果所有的表达式计算结果转型后，都是true，则返回最后一个表达式结果。

参与&&运算的表达式组成了一个表达式链，与运算符从中找到第一个假值并返回，否则返回最后一个值。

举个栗子：

let r1 = 1 && 0;//0
let r2 = 'str' && false;//false
let r3 = null && '' && 1; // null
let r4 = null && undefined;// null
let r5 = null && NaN;//null

不要试图简化if

因为&&、||具有一定的路径选择能力，可以作为简化if语句的一种选择。

举个栗子：

let x = 9;
x > 0 && alert(`${x}大于0`);

以上代码的效果等价于：

let x = 9;
if(x > 0){
	alert(`${x}大于0`);
}

虽然这样看起来更加简短，但是if语义更加明显，可读。所以建议按照每种语法设计之初的用途使用，避免写出神鬼莫测的代码。

非运算符！

英文的感叹号!表示逻辑非运算符，也就是把一个布尔值取反。

语法：

let r = !val;

!运算符的执行逻辑：

1. 将操作手转为Boolean类型；
2. 返回Boolean值的相反值；

例如：

let r1 = !false;//true
let r2 = !1;//false
let r3 = !'';//true
let r4 = !NaN;//true
let r5 = !undefined;//true

两个!!

两个!!可以用于将一个非Boolean类型的数据布尔化，这种用法和+把非数字类型转为数字类型有异曲同工之妙！！

例如：

let r1 = !!'str';//true
let r2 = !!0;//false

!!的执行原理也非常简单，第一个!将变量布尔化并取反，第二个!将取反后的布尔值再取反，也就是原值的布尔化。

这就和类型转换章节的Boolean()方法效果相同：

let r1 = Boolean('str');//true
let r2 = Boolean(0);//false

运算优先级

&&运算符的优先级高于||，a && b || c && d等价于(a && b) || (c && d)，就像乘除优先级高于加减一样。
!运算符在三者中拥有最高的运算优先级。

课后作业

1. 变量r的值？

let r = null || 996 || NaN;

2. 以下代码的执行结果？

alert(alert('哈哈') || true || alert('吼吼'));

---

章节目录
上一篇：《if else》
下一篇：《空值合并，??运算符》

---