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


Posted in Javascript onJuly 18, 2016

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中“&&”和“||”操作符(总结篇),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 中的replace方法说明
Apr 13 Javascript
JavaScript入门教程(11) js事件处理
Jan 31 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 Javascript
JS验证逗号隔开可以是中文字母数字
Apr 22 Javascript
js从外部获取图片的实现方法
Aug 05 Javascript
详解基于vue-router的动态权限控制实现方案
Sep 28 Javascript
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
原生js实现仿window10系统日历效果的实例
Oct 31 Javascript
javascript Function函数理解与实战
Dec 01 Javascript
layui table数据修改的回显方法
Sep 04 Javascript
Vue中通过属性绑定为元素绑定style行内样式的实例代码
Apr 30 Javascript
全面介绍javascript实用技巧及单竖杠
Jul 18 #Javascript
Bootstrap 布局组件(全)
Jul 18 #Javascript
js验证真实姓名与身份证号,手机号的简单实例
Jul 18 #Javascript
Bootstrap零基础入门教程(三)
Jul 18 #Javascript
15位和18位身份证JS校验的简单实例
Jul 18 #Javascript
Bootstrap零基础入门教程(二)
Jul 18 #Javascript
Bootstrap插件全集
Jul 18 #Javascript
You might like
php中看实例学正则表达式
2006/12/25 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Laravel中七个非常有用但很少人知道的Carbon方法
2017/09/21 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
javascript 基础篇2 数据类型,语句,函数
2012/03/14 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
JS获取DropDownList的value值与text值的示例代码
2014/01/07 Javascript
在css加载完毕后自动判断页面是否加入css或js文件
2014/09/10 Javascript
使用Function.apply()的参数数组化来提高 JavaScript程序性能的技巧
2015/12/23 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
js实现3d悬浮效果
2017/02/16 Javascript
Bootstrap的popover(弹出框)在append后弹不出(失效)
2017/02/27 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Angular项目从新建、打包到nginx部署全过程记录
2017/12/09 Javascript
JavaScript设计模式之工厂模式简单实例教程
2018/07/03 Javascript
vue-cli 3.x 配置Axios(proxyTable)跨域代理方法
2018/09/19 Javascript
Element-UI中Upload上传文件前端缓存处理示例
2019/02/21 Javascript
[00:10]DOTA2 TI9勇士令状明日上线
2019/05/07 DOTA
Python迭代器与生成器用法实例分析
2018/07/09 Python
Python使用Pickle模块进行数据保存和读取的讲解
2019/04/09 Python
在django模板中实现超链接配置
2019/08/21 Python
python如何将两张图片生成为全景图片
2020/03/05 Python
pandas 像SQL一样使用WHERE IN查询条件说明
2020/06/05 Python
Python压缩模块zipfile实现原理及用法解析
2020/08/14 Python
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
军校制空专业毕业生自我鉴定
2013/11/16 职场文书
升职自荐书范文
2013/11/28 职场文书
中青班党性分析材料
2014/02/16 职场文书
节能环保标语
2014/06/12 职场文书
因个人原因离职的辞职信范文
2015/05/12 职场文书
被告代理词范文
2015/05/25 职场文书
三八节祝酒词
2015/08/11 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
SpringCloud项目如何解决log4j2漏洞
2022/04/10 Java/Android
Nginx使用ngx_http_upstream_module实现负载均衡功能示例
2022/08/05 Servers