原生JS | 逻辑操作符的短路问题

HTML5学堂-码匠：短路，并不仅仅存在于物理学当中，JavaScript中的逻辑操作符也有短路问题，这个问题时常作为前端的考点出现哦！

面试真题

var a = 1, b = 0, c = 'HTML5学堂';
a || b && (c = '码匠');
console.log(c);
var a = 1, b = 0, c = 'HTML5学堂';
(a || b) && (c = '码匠');
console.log(c);

案例来源于某大型互联网公司的面试真题

考查的主要知识为“操作符的运算顺序”、“赋值操作符”以及“逻辑操作符的短路问题”。

运行结果：

'HTML5学堂'

'码匠'

逻辑操作符的短路问题

短路问题

短路问题，主要出现在逻辑与、逻辑或这两个操作符当中。

逻辑与（ && ）

当逻辑与（&&）前面是0（false）时，&&后面的表达式并不会执行。

逻辑或（ || ）

当逻辑或（||）前面的表达式结果“非0”（真）时，||符号后面的表达式并不会执行。

案例分析

var a = 1, b = 0, c = 'HTML5学堂';
a || b && (c = '码匠');
console.log(c);

案例解析：

a || b && (c='码匠');

该表达式当中有“逻辑与”和“逻辑或”这两种操作符，逻辑与的优先级要优于逻辑或，因此该表达式，等价于 a || ( b && (c=‘码匠’))。

由于a的值为1，在布尔值当中会被转换为true，对于逻辑或（||），一真必真，当第一个表达式为真时，第二个表达式就不再执行了，因此并没有执行（b&& (c='码匠')）这句代码，c也就没有被赋值了。

var a = 1, b = 0, c = 'HTML5学堂';
(a || b) && (c = '码匠');
console.log(c);

案例解析：

(a || b) && (c='码匠');

该表达式，先计算（a || b），该表达式的结果为true，对于逻辑与（&&）来说，只有两个表达式均为真，最终结果才能够为真。因此，当第一个表达式为真时，需要进行第二个表达式的执行。

因此，c='码匠';会被执行，c也被赋值为'码匠'。

相关案例练习

可以尝试以下案例，加强或测试一下自己的知识。

习题1

var a = 4, b = 3;

c = (a < b) && (a = 5);

console.log(a);

习题2

var a = 2, b = 3;

c = (a < b) || (a = 5);

console.log(a);

参考答案

习题1 运行结果：

4

习题2运行结果：

2

相关知识说明

操作符优先级（由高到低）

逻辑非

前置递增和前置递减

算术操作符

关系操作符

逻辑与 逻辑或

条件操作符

赋值操作符