这篇文章主要介绍了全面解析 JavaScript 中 "&&" 和 "||" 操作符 (总结篇) 的相关资料, 需要的朋友可以参考下
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
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);
其实这是一种更严谨的写法:
请测试 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 中 "&&" 和 "||" 操作符 (总结篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0305/264237.html