全面解析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 多浏览器分别判断代码
Apr 01 Javascript
JavaScript高级程序设计 客户端存储学习笔记
Sep 10 Javascript
腾讯UED 漂亮的提示信息效果代码
Sep 12 Javascript
js获得页面的高度和宽度的方法
Feb 23 Javascript
jquery控制页面部分刷新的方法
Jun 24 Javascript
移动开发之自适应手机屏幕宽度
Nov 23 Javascript
canvas 画布在主流浏览器中的尺寸限制详细介绍
Dec 15 Javascript
从零开始做一个pagination分页组件
Mar 15 Javascript
jQuery利用FormData上传文件实现批量上传
Dec 04 jQuery
详解微信小程序-扫一扫 wx.scanCode() 扫码大变身
Apr 30 Javascript
vue改变循环遍历后的数据实例
Nov 07 Javascript
taro 实现购物车逻辑的实例代码
Jun 05 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
ThinkPHP中U方法的使用浅析
2014/06/13 PHP
php中 ob_start等函数截取标准输出的方法
2015/06/22 PHP
PHP常用的排序和查找算法
2015/08/06 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
laravel + vue实现的数据统计绘图(今天、7天、30天数据)
2018/07/31 PHP
javascript StringBuilder类实现
2008/12/22 Javascript
javascript eval函数深入认识
2009/02/21 Javascript
jquery中ajax学习笔记一
2011/10/16 Javascript
Javascript操作cookie的函数代码
2012/10/03 Javascript
javascript写的异步加载js文件函数(支持数组传参)
2014/06/07 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery 调用WebService 实例讲解
2016/06/28 Javascript
JS 数字转换为大写金额的简单实例
2016/08/04 Javascript
如何在 Vue.js 中使用第三方js库
2017/04/25 Javascript
详解react如何在组件中获取路由参数
2017/06/15 Javascript
Vue多环境代理配置方法思路详解
2019/06/21 Javascript
JavaScript中跨域问题的深入理解
2021/03/04 Javascript
[52:37]完美世界DOTA2联赛循环赛 Forest vs DM BO2第一场 10.29
2020/10/29 DOTA
利用python实现冒泡排序算法实例代码
2019/12/01 Python
matplotlib 曲线图 和 折线图 plt.plot()实例
2020/04/17 Python
python:解析requests返回的response(json格式)说明
2020/04/30 Python
python输入一个水仙花数(三位数) 输出百位十位个位实例
2020/05/03 Python
解决pycharm安装第三方库失败的问题
2020/05/09 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
会计核算科岗位职责
2014/03/19 职场文书
中药学专业求职信
2014/05/31 职场文书
团队精神口号
2014/06/06 职场文书
中职生自荐信范文
2014/06/15 职场文书
服装设计专业自荐信
2014/06/17 职场文书
大学优秀学生主要事迹材料
2015/11/04 职场文书
python 下载文件的几种方式分享
2021/04/07 Python
基于Redis过期事件实现订单超时取消
2021/05/08 Redis
vue里使用create, mounted调用方法
2022/04/26 Vue.js