JavaScript中&&和||操作符的短路原理与实战应用

逻辑或（||）运算符详解

1、||（逻辑或）

从字面逻辑来看，只有当运算符两侧的值都为 false 时，结果才返回 false；否则返回 true。

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

这一基础概念看似简单明了。

然而，在 JavaScript 的实际运算中，其深层行为更为复杂。请参考以下代码示例：

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); // 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、像var Yahoo = Yahoo || {};这种是非常广泛应用的。获得初值的方式是不是很优雅？比if。。。。else…好很多，比？：也好不少。

3、callback&&callback()

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

综合实例与代码优化

4、综合实例

需求如图：

这里写图片描述

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

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

差一点的if，else：

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：

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强大的表现力吧：

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

更强大的，也更优的：

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

第二个需求：

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

以上所述是小编给大家介绍的全面解析JavaScript中“&&”和“||”操作符(总结篇)，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对本站网站的支持！