全面解析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 相关文章推荐
js 有框架页面跳转(target)三种情况下的应用
Apr 09 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
js和jquery如何获取图片真实的宽度和高度
Sep 28 Javascript
Bootstrap项目实战之首页内容介绍(全)
Apr 25 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
jquery中ajax请求后台数据成功后既不执行success也不执行error的完美解决方法
Dec 24 jQuery
浅谈Vue数据绑定的原理
Jan 08 Javascript
通过 JS 判断页面是否有滚动条的实现方法
Apr 05 Javascript
js实现购物车功能
Jun 12 Javascript
详解React之key的使用和实践
Sep 29 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
Nov 15 Javascript
vue 获取及修改store.js里的公共变量实例
Nov 06 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
根德Grundig S400/S500/S700电路分析
2021/03/02 无线电
支持oicq头像的留言簿(一)
2006/10/09 PHP
ThinkPHP关于session的操作方法汇总
2014/07/18 PHP
php session 写入数据库
2016/02/13 PHP
php微信公众平台开发之微信群发信息
2016/09/13 PHP
php中目录操作opendir()、readdir()及scandir()用法示例
2019/06/08 PHP
YII2框架中使用RBAC对模块,控制器,方法的权限控制及规则的使用示例
2020/03/18 PHP
JavaScript 获取用户客户端操作系统版本
2009/08/25 Javascript
Jquery 一次处理多个ajax请求的代码
2011/09/02 Javascript
JQuery 返回布尔值Is()条件判断方法代码
2012/05/14 Javascript
使用javascript做的一个随机点名程序
2014/02/13 Javascript
node.js 开发指南 ? Node.js 连接 MySQL 并进行数据库操作
2014/07/29 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
js实现分割上传大文件
2016/03/09 Javascript
浅谈Sticky组件的改进实现
2016/03/22 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
Angular之指令Directive用法详解
2017/03/01 Javascript
JS+html5制作简单音乐播放器
2020/09/13 Javascript
原生nodejs使用websocket代码分享
2018/04/07 NodeJs
详解Ant Design of React的安装和使用方法
2018/12/27 Javascript
js中的this的指向问题详解
2019/08/29 Javascript
Python实现简单http服务器
2018/04/12 Python
python实现多进程代码示例
2018/10/31 Python
python ---lambda匿名函数介绍
2019/03/13 Python
django rest framework serializers序列化实例
2020/05/13 Python
Python unittest如何生成HTMLTestRunner模块
2020/09/08 Python
html5 http的轮询和Websocket原理
2018/10/19 HTML / CSS
戴尔新加坡官网:Dell Singapore
2020/12/13 全球购物
会计电算化专业毕业生自荐信
2013/12/20 职场文书
五一劳动节活动记录
2014/03/23 职场文书
社区安全生产月活动总结
2014/07/05 职场文书
试用期工作表现自我评价
2015/03/06 职场文书
2015年保卫科工作总结
2015/05/14 职场文书
Python+uiautomator2实现自动刷抖音视频功能
2021/04/29 Python
javascript的setTimeout()使用方法总结
2021/11/20 Javascript
Golang 并发编程 SingleFlight模式
2022/04/26 Golang