全面解析JavaScript中“&&”和“||”操作符(总结篇)

1、||（逻辑或）,

从字面上来说，只有前后都是false的时候才返回false，否则返回true。

alert(true||false); // truealert(false||true); // truealert(true||true); // truealert(false||false); // false

这个傻子都知道~~

但是，从深层意义上来说的话，却有另一番天地，试下面代码

alert(0||1);//1

显然，我们知道，前面0意味着false,而后面1意味着true,那么上面的结果应该是true,而事实返回的结果是1。再看下面代码：

alert(2||1);//2

我们知道，前面2是true,后面1也是true,那返回结果又是什么呢？测试结果是2,继续看：

alert('a'||1);//'a'

同样，前面'a'是true，后面1也是true;测试结果是'a',下面

alert(''||1);//1

由上，我们知道前面”是false,后面1是true,而返回结果是1。再看下面

alert('a'||0);//'a'

前面'a'是true，而后面0是false,返回结果是'a'，继续下面

alert(''||0);//0

前面”是false,后面0同样是false,返回结果是0

alert(0||'');//''

前面0是false，后面”是false，返回结果是”

这就意味

1、只要“||”前面为false,不管“||”后面是true还是false，都返回“||”后面的值。

2、只要“||”前面为true,不管“||”后面是true还是false，都返回“||”前面的值。

我称这种为短路原理： 知道了前面第一个的结果就知道后的输出，如果为第一个为：true，则取第一个的值，如果第一个为false，则取第二个的值。

js必须牢记的6个蛋蛋： 请你一定要记住：在js逻辑运算中，0、”“、null、false、undefined、NaN都会判为false，其他都为true（好像没有遗漏了吧，请各位确认下）。这个一定要记住，不然应用||和&&就会出现问题。

这里顺便提下：经常有人问我，看到很多代码if(!!attr)，为什么不直接写if(attr)；

其实这是一种更严谨的写法：
请测试 typeof 5和typeof !!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。

2.&&（逻辑与）

从字面上来说，只有前后都是true的时候才返回true，否则返回false。

alert(true&&false); // falsealert(true&&true); // truealert(false&&false); // falsealert(false&&true); // false

然后，根据上面经验，我们看看“&&”号前后，不单单是布尔类型的情况。

alert(''&&1);//''

结是返回”,“&&”前面”是false,后面是1是true。

alert(''&&0);//''

结是返回”,“&&”前面”是false,后面是0也是false。

alert('a'&&1);//1