全面解析JavaScript中“&&”和“||”操作符

1、||（逻辑或）,

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

1 2 3 4

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

这个傻子都知道~~

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

1	alert(0||1); //1

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

1	alert(2||1); //2

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

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

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

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

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

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

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

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

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

1	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。

1 2 3 4

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

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

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

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

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

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

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

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

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

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

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

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

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

结是返回0,“&&”前面”0是false,后面是'a'是true。

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

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

短路原理

1、只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;

2、只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;

3.在开发中的应用

下面三段代码等价：

1 2 3 4 5 6 7

a=a|| "defaultValue" ; if (!a){ a= "defaultValue" ; } if (a== null ||a== "" ||a==undefined){ a= "defaultValue" ; }

你愿意用哪一个呢？

2、 像var Yahoo = Yahoo || {};这种是非常广泛应用的。 获得初值的方式是不是很优雅？

比if。。。。else…好很多，比？：也好不少。

3、 callback&&callback()

在回调中，经常这么写，更严谨，先判断 callback 是不是存在，如果存在就执行，这样写的目的是为了防止报错
如果直接写 callback(); 当callback不存在时代码就会报错。

4、综合实例

需求如图：

这里写图片描述

假设对成长速度显示规定如下：

成长速度为5显示1个箭头；
成长速度为10显示2个箭头；
成长速度为12显示3个箭头；
成长速度为15显示4个箭头；
其他都显示都显示0各箭头。
用代码怎么实现？

差一点的if，else：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

var add_level = 0; if (add_step == 5){ add_level = 1; } else if (add_step == 10){ add_level = 2; } else if (add_step == 12){ add_level = 3; } else if (add_step == 15){ add_level = 4; } else { add_level = 0; }

稍好些的switch：

1 2 3 4 5 6 7 8 9 10 11 12 13

var add_level = 0; switch (add_step){ case 5 : add_level = 1; break ; case 10 : add_level = 2; break ; case 12 : add_level = 3; break ; case 15 : add_level = 4; break ; default : add_level = 0; break ; }

如果需求改成：

成长速度为>12显示4个箭头；
成长速度为>10显示3个箭头；
成长速度为>5显示2个箭头；
成长速度为>0显示1个箭头；
成长速度为<=0显示0个箭头。

那么用switch实现起来也很麻烦了。

那么你有没有想过用一行就代码实现呢？

ok，让我们来看看js强大的表现力吧：

1	var add_level = (add_step==5 && 1) || (add_step==10 && 2) || (add_step==12 && 3) ||  (add_step==15 && 4) || 0;

更强大的，也更优的：

1	var add_level={ '5' :1, '10' :2, '12' :3, '15' :4}[add_step] || 0;

第二个需求：

1	var add_level = (add_step>12 && 4) || (add_step>10 && 3) || (add_step>5 && 2) ||  (add_step>0 && 1) || 0;