全面解析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 DOM 学习第九章 选取范围的介绍
Feb 19 Javascript
JavaScript接口实现代码 (Interfaces In JavaScript)
Jun 11 Javascript
JS中处理与当前时间间隔的函数代码
May 23 Javascript
JavaScript中神奇的call()方法
Mar 12 Javascript
angular+bootstrap的双向数据绑定实例
Mar 03 Javascript
angularjs实现猜大小功能
Oct 23 Javascript
Es6 Generator函数详细解析
Feb 24 Javascript
js拖动滑块和点击水波纹效果实例代码
Oct 16 Javascript
微信运维交互机器人的示例代码
Nov 12 Javascript
微信小程序使用二次贝塞尔曲线画波浪
Dec 25 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
使用Vant完成DatetimePicker 日期的选择器操作
Nov 12 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将session信息存储到数据库的类实例
2015/03/04 PHP
PHP实现求两个字符串最长公共子串的方法示例
2017/11/17 PHP
PHP实现单文件、多个单文件、多文件上传函数的封装示例
2019/09/02 PHP
laravel框架实现敏感词汇过滤功能示例
2020/02/15 PHP
Jquery实现图片左右自动滚动示例
2013/09/25 Javascript
类似天猫商品详情随浏览器移动的示例代码
2014/02/27 Javascript
详解js中构造流程图的核心技术JsPlumb(2)
2015/12/08 Javascript
实例解析jQuery中proxy()函数的用法
2016/05/24 Javascript
js创建对象几种方式的优缺点对比
2016/09/28 Javascript
jquery+css3问卷答题卡翻页动画效果示例
2016/10/26 Javascript
javascript入门之数组[新手必看]
2016/11/21 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
vue实现element-ui对话框可拖拽功能
2018/08/17 Javascript
JavaScript设计模式--简单工厂模式定义与应用案例详解
2020/05/23 Javascript
mapboxgl区划标签避让不遮盖实现的代码详解
2020/07/01 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
在Python中使用异步Socket编程性能测试
2014/06/25 Python
解决pandas read_csv 读取中文列标题文件报错的问题
2018/06/15 Python
Django框架文件上传与自定义图片上传路径、上传文件名操作分析
2019/05/10 Python
使用Python计算玩彩票赢钱概率
2019/06/26 Python
python分数表示方式和写法
2019/06/26 Python
Python求正态分布曲线下面积实例
2019/11/20 Python
基于Python fminunc 的替代方法
2020/02/29 Python
python爬虫用mongodb的理由
2020/07/28 Python
详解如何修改jupyter notebook的默认目录和默认浏览器
2021/01/24 Python
用HTML5制作一个简单的弹力球游戏
2015/05/12 HTML / CSS
皮尔·卡丹巴西官方商店:Pierre Cardin
2017/07/21 全球购物
出门问问全球官方商城:Tichome音箱和TicWatch智能手表
2017/12/02 全球购物
美国亚洲时尚和美容产品的一站式网上商店:Stylevana
2019/09/05 全球购物
高三自我鉴定
2013/10/23 职场文书
给领导的检讨书
2014/02/16 职场文书
感谢信的格式
2015/01/21 职场文书
会议开幕词
2015/01/28 职场文书
副总经理岗位职责
2015/02/02 职场文书
三好学生个人总结
2015/02/15 职场文书
九大龙王魂骨,山龙王留下躯干骨,榜首死的最憋屈(被捏碎)
2022/03/18 国漫