全面解析JavaScript中“&&”和“||”操作符(总结篇)
1、||（逻辑或）,
从字面上来说，只有前后都是false的时候才返回false，否则返回true。
alert(true||false);//true alert(false||true);//true alert(true||true);//true alert(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)；
其实这是一种更严谨的写法：
请测试typeof5和typeof!!5的区别。!!的作用是把一个其他类型的变量转成的bool类型。
2.&&（逻辑与）
从字面上来说，只有前后都是true的时候才返回true，否则返回false。
alert(true&&false);//false alert(true&&true);//true alert(false&&false);//false alert(false&&true);//false
然后，根据上面经验，我们看看“&&”号前后，不单单是布尔类型的情况。
alert(''&&1);//''
结是返回”,“&&”前面”是false,后面是1是true。
alert(''&&0);//''
结是返回”,“&&”前面”是false,后面是0也是false。
alert('a'&&1);//1
结是返回1,“&&”前面”a是true,后面是1也是true。
alert('a'&&0);//0
结是返回0,“&&”前面”a是true,后面是0是false。
alert('a'&&'');//''
结是返回”,“&&”前面”a是true,后面是”是false。
alert(0&&'a');//0
结是返回0,“&&”前面”0是false,后面是'a'是true。
alert(0&&'');//0
结是返回0,“&&”前面”0是false,后面是”也是false。
短路原理
1、只要“&&”前面是false，无论“&&”后面是true还是false，结果都将返“&&”前面的值;
2、只要“&&”前面是true，无论“&&”后面是true还是false，结果都将返“&&”后面的值;
3.在开发中的应用
下面三段代码等价：
a=a||"defaultValue";
if(!a){
a="defaultValue";
}
if(a==null||a==""||a==undefined){
a="defaultValue";
}
你愿意用哪一个呢？
2、像varYahoo=Yahoo||{};这种是非常广泛应用的。获得初值的方式是不是很优雅？比if。。。。else…好很多，比？：也好不少。
3、callback&&callback()
在回调中，经常这么写，更严谨，先判断callback是不是存在，如果存在就执行，这样写的目的是为了防止报错
如果直接写callback();当callback不存在时代码就会报错。
4、综合实例
需求如图：
这里写图片描述
假设对成长速度显示规定如下：
成长速度为5显示1个箭头；
成长速度为10显示2个箭头；
成长速度为12显示3个箭头；
成长速度为15显示4个箭头；
其他都显示都显示0各箭头。
用代码怎么实现？
差一点的if，else：
varadd_level=0;
if(add_step==5){
add_level=1;
}
elseif(add_step==10){
add_level=2;
}
elseif(add_step==12){
add_level=3;
}
elseif(add_step==15){
add_level=4;
}
else{
add_level=0;
}
稍好些的switch：
varadd_level=0;
switch(add_step){
case5:add_level=1;
break;
case10:add_level=2;
break;
case12:add_level=3;
break;
case15:add_level=4;
break;
default:add_level=0;
break;
}
如果需求改成：
成长速度为>12显示4个箭头；
成长速度为>10显示3个箭头；
成长速度为>5显示2个箭头；
成长速度为>0显示1个箭头；
成长速度为<=0显示0个箭头。
那么用switch实现起来也很麻烦了。
那么你有没有想过用一行就代码实现呢？
ok，让我们来看看js强大的表现力吧：
varadd_level=(add_step==5&&1)||(add_step==10&&2)||(add_step==12&&3)||(add_step==15&&4)||0;
更强大的，也更优的：
varadd_level={'5':1,'10':2,'12':3,'15':4}[add_step]||0;
第二个需求：
varadd_level=(add_step>12&&4)||(add_step>10&&3)||(add_step>5&&2)||(add_step>0&&1)||0;
以上所述是小编给大家介绍的全面解析JavaScript中“&&”和“||”操作符(总结篇)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！