JavaScript的Boolean逻辑运算探究

Posted 2020-06-16

相信每个用JS的人都会经常遇到巧用逻辑运算符简化代码的情形：

evnt=evnt || window.event;

...

var obj = unKnownObj1&&unKnownObj2&&unKnownObj3;

这些逻辑运算符的原理是什么呢？我动手测试了一下，做一个总结。

 

首先，需要把JS的类型转换机制引进来。其他数据类型ToBoolean的结果先放到这里：

• udefined、null结果是false。
• Number如果参数为 +0, -0 或 NaN，则结果为 false；否则为 true。
• String如果参数为空字符串，则结果为 false；否则为 true。
• Object结果都是true，注意空Object也是true。

然后，回顾一下逻辑运算符有哪几个，这肯定都不陌生，因为其他语言里都有，分别是与&&，或||，非！。

 

先说非！运算符，假变真，真变假，最后的结果是Boolean值，即true|false。

 

再来说剩下两个，他们的返回值不一定是true|false，有Object时返回结果更是五花八门的，网上总结各种规律也不太好记。其实从问题根本探究JS还是很按套路出牌的，产生迷惑的真正原因是&&和||返回值并没有做布尔转换，JS的类型转换是在运算时自动完成的，所以这种做法其实非常合理并且提供了很大灵活。

以&&为例，如何实现最后一个返回值代表整个表达式的值呢？那就是“返回遇到的第一个假值，如果都为真，返回最后一个值”。试试看是不是这样呢？

                console.log("sss"&&false); //false
                console.log(""&&true);     //""
                console.log("1"&&5);       //5

因为所有的Object都是true,所以带Object道理也是一样。

                console.log(obj&&false); //false
                console.log(1&&obj);     //obj
                console.log(obj&&obj2);  //obj2            

因此就可以利用&&实现判断元素不为空再取值（开头例子）。

 

||也是类似的，返回遇到的第一个真值，如果都为假，返回最后一个值。就不举例了。