全面解析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 相关文章推荐
FLASH 广告之外的链接
Dec 16 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
客户端 使用XML DOM加载json数据的方法
Sep 28 Javascript
ajax处理php返回json数据的实例代码
Jan 24 Javascript
JavaScript面向对象分层思维全面解析
Nov 22 Javascript
Three.js基础部分学习
Jan 08 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
Jun 23 jQuery
JavaScript之浏览器对象_动力节点Java学院整理
Jul 03 Javascript
ES6 javascript的异步操作实例详解
Oct 30 Javascript
jQuery实现的点击按钮改变样式功能示例
Jul 21 jQuery
Javascript如何递归遍历本地文件夹
Aug 06 Javascript
如何使用CocosCreator对象池
Apr 14 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
DISCUZ 论坛管理员密码忘记的解决方法
2009/05/14 PHP
PHP MemCached高级缓存配置图文教程
2010/08/05 PHP
超级实用的7个PHP代码片段分享
2012/01/05 PHP
CodeIgniter配置之config.php用法实例分析
2016/01/19 PHP
php抽奖概率算法(刮刮卡,大转盘)
2020/04/17 PHP
CI框架使用composer安装的依赖包步骤与方法分析
2016/11/21 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
9个JavaScript评级/投票插件
2010/01/18 Javascript
js获得当前时区夏令时发生和终止的时间代码
2014/02/23 Javascript
最简单的tab切换实例代码
2016/05/13 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
利用yarn代替npm管理前端项目模块依赖的方法详解
2017/09/04 Javascript
基于游标的分页接口实现代码示例
2018/11/12 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
Node 使用express-http-proxy 做api网关的实现
2020/10/15 Javascript
antd日期选择器禁止选择当天之前的时间操作
2020/10/29 Javascript
[47:21]Liquid vs TNC Supermajor 胜者组 BO3 第一场 6.4
2018/06/05 DOTA
利用 Monkey 命令操作屏幕快速滑动
2016/12/07 Python
Python urls.py的三种配置写法实例详解
2017/04/28 Python
python深度优先搜索和广度优先搜索
2018/02/07 Python
Python使用logging模块实现打印log到指定文件的方法
2018/09/05 Python
Python数据分析:手把手教你用Pandas生成可视化图表的教程
2018/12/15 Python
python utc datetime转换为时间戳的方法
2019/01/15 Python
Python BeautifulReport可视化报告代码实例
2020/04/13 Python
django的autoreload机制实现
2020/06/03 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
什么是java序列化,如何实现java序列化
2012/11/14 面试题
Java模拟试题
2014/11/10 面试题
中式结婚主持词
2014/03/14 职场文书
幼儿园春季开学寄语
2014/04/03 职场文书
学校领导班子成员查摆问题及整改措施
2014/10/28 职场文书
民事答辩状格式范文
2015/05/21 职场文书
事业单位工作人员2015年度思想工作总结
2015/10/15 职场文书
2016秋季运动会前导词
2015/11/25 职场文书
MySQL系列之六 用户与授权
2021/07/02 MySQL