深入了解JavaScript的逻辑运算符(与、或)


Posted in Javascript onDecember 20, 2016

十二月已经过半,冬季是一个美妙的季节,寒冷的空气逼得人们不得不躲在安逸舒适的环境里生活。冬季会给人一种安静祥和的氛围,让人沉浸在其中,仿佛是一个旧的阶段的结束,同时也是一个新的阶段的开始。这么说来,西方和中国的圣诞节和春节都选择在了冬季也不是没有道理,在一年中最寒冷的时候,人们拥簇在温暖的环境里,彼此诉说着过去一年里自己的成就,展望着新的一年里美好的愿望,相互挂念的人团聚,天气的寒冷和人情的温暖形成了强烈的对比。而在天寒地冻之中,仿佛更有利于人们思考,去探寻知识的真谛。

这次想分享的是 JS 当中的逻辑运算符与、或,也就是 && 、 || ,初来乍到的同学们看到这里就会觉得没趣了,这玩意有什么好分享的,刚开始学 JS 的时候不就会了吗,我用了无数遍都没有什么问题啊。而有经验的同学可能会陷入沉思,难不成这其中会有什么奥秘所在?没错,别看这简简单单的几个运算符,虽然这是最基础的知识,但其中隐藏的奥秘却十分耐人寻味,接下来我就为大家一一揭开这简答的运算符背后的奇妙之处。

基础的作用我就不说了,这两个符号是个程序员都能明白,这里首先我想先来说一说 JS 当中的隐式转换。

众所周知,JS 在做逻辑判断的时候会自动将非布尔类型的值进行隐式转换,转换成布尔类型的值然后在进行逻辑运算。在初学 JS 的时候,都会讲到在隐式转换中,除了几个特定的假值,其他的均会转换成真值,这些假值有:

NaN;
 "";
 undefined;
 null;
 0;

有了这些隐式转换的规则,便构成了 JS 当中逻辑运算的核心基础。

其实在 JS 当中,要说“逻辑运算符”其实并不完全正确,Kyle Simpson 在《You Don't Know JS》系列书当中提到:“与其说是‘逻辑运算符',不如说是‘选择器运算符'。” 为什么大师要这样说呢?其实我们大多数人都被 JS 的表象给蒙蔽了,比如下面一段非常简单的代码:

if( "hello" && 0 ) {
 console.log(true);
 } else {
 console.log(false);
 }

如果你对 JS 了解的不够深刻,你可能会这样解释这段代码:首先在逻辑判断中,"hello" 是一个真值,0 是一个假值,一个真值和一个假值进行与运算,结果为 false 。这也可能是大多数人的理解,但其实不然,其内部的原理可不止这么简单,因为 && 和 || 返回的并不是判断条件的真假 ,而是判断条件中的一个原始值。它将依次对条件判断中的值进行判断,如果是非布尔值,则转换成布尔值做判断,然后再根据判断条件来决定返回哪一个值。

对于 && :该运算符返回条件语句中的第一个假值,如果所有的值都为真,则返回最后一个值,&& 也被称为 “守护运算符” 。比如下面一段代码:

var a = "hello" && "world";
 console.log(a); //world
 var b = 0 && 1;
 console.log(b); //0

可以看出,逻辑运算符其实返回的并不是条件的真假,而是原始值。如果条件语句中有多个 && 运算符,则一样遵循以上原则,从左向右依次判断,如果遇到了假值,就返回该假值,如果所有值都为真,则返回最后一个值。

对于 ||:该运算符与 && 运算符相反,它返回条件语句中的第一个真值,如果所有值都为假,则返回最后一个值。比如下面一段代码:

var a = "hello" || 0;
 console.log(a); //hello
 var b = 0 || NaN;
 console.log(b); //NaN

同样,|| 返回的也不是布尔值。如果有多个 || 则同样遵循相同的原则,从左向右依次扫描。

讲到这里也就来到了本篇文章的核心,在 JS 当中,条件判断语句都是建立在隐式转换之上的,也就是说所谓的逻辑运算符,实际上是在条件判断语句中从左向右依次扫描,如果是一个布尔值,则判断该布尔值的真假,如果是一个非布尔值,则先对该值进行隐式转换,然后再判断真假,如果满足条件,则返回该值,如果没有满足条件值,则返回最后一个值,然后在对返回的这个值做判断,如果是一个布尔值,则直接判断,如果是一个非布尔值,则先隐式转换成布尔值,再做判断。所以我们也可以把 && 称为 “取假运算符” ,把 || 称为 “取真运算符” ,因为这两个运算符的实质都是取条件语句中的第一个真值或者假值,如果始终没有找到,则返回最后一个值。而这样的算法也恰好满足逻辑判断的需求,比如 && 运算符,如果所有的值都是真值,那么返回哪个值其实都无所谓,因为所有值都能够被隐式转化为 true ,而只要有一个假值,则判断条件不成立,所以会返回第一个遇到的假值。而 || 运算符,如果所有的值都是假值,返回任意一个都会被隐式转换成 false ,但只要遇到了一个真值,则判断条件成立,所以会返回第一个遇到的真值。&& 和 || 运算符都是 “短路” 的。

所以我们可以自己实现一个逻辑运算的函数:

// && 等价于:
function AND () {
 for (var i = 0; i < arguments.length; i++) {
 if (!arguments[i]) {
  return arguments[i];
 }
 }
 return arguments[i-1];
}
// || 等价于:
function OR () {
 for (var i = 0; i < arguments.length; i++) {
 if(arguments[i]) {
  return arguments[i];
 }
 }
 return arguments[i-1];
}

(注:在这里我同时也想对 ! 这个运算符做讲解,但考虑到内容和篇幅的问题,暂时不做深入探究,仅做简单讲述。 ! 运算符实际上运行机制与 && 和 || 是一样的,首先会对参数值做判断,如果是一个布尔值,则进行取反运算,如果是一个非布尔值,则先进行隐式转换,再进行取反运算。而我们通常写的 if (something) 语句,实际上的意思 if (!!something))

然后我们可以这样使用:

var a = ["hello", undefined, "world"];
 console.log(AND.apply(null, a)); //undefined
 var b = ["", 0, NaN];
 console.log(OR.apply(null, b)); //NaN

进而,我们就可以推断出一下结论:

a = x || y;
//等价于:
a = x ? x : y;

a = x && y;
//等价于:
a = x ? y : x;

这通常也是一些压缩工具所做的事情,它们尽可能的将繁杂的条件判断语句转换成 && 或者 || ,因为这样代码更加的精简,但是可读性则就不那么可观了。

对于最开始的那一段代码:

if( "hello" && 0 ) {
 console.log(true);
 } else {
 console.log(false);
 }

我们现在就要这样解释:首先这是个与运算符,与运算符的作用是取第一个假值,如果所有的值都为真,那么则返回最后一个值。所以在这条语句中,第一个值是 "hello" ,因为该值是一个非布尔值,JS 引擎会先将它隐式转换成布尔值,而该值不在假值的范围内,所以会被转化成 true 。随后 JS 引擎会继续查找,第二个值是 0 ,该值同样也不是一个布尔值,所以 JS 引擎也会先将它隐式转换成布尔值,而该值在假值的范围内,所以会被转化成 false ,满足 && 运算符的查找条件,则将值 0 返回。而条件判断语句接受到了值 0 ,该值不是一个布尔类型的值,所以会先对它进行隐式转换,而该值在假值范围内,所以会被转化成 false ,然后控制台会输出 false。

所以说以后当我们看到 && 和 || 时候,就不要仅仅的从字面上的意义去理解了,在看完了这篇文章之后,你就可以很自豪很有底气的对别人说,你真的会用逻辑运算符吗?

好了,就这么两个小玩意居然背后也有着这么多的精髓,看来知识的深度是无穷的,冬季还真是一个能引发人们思考的季节。圣诞节即将到来,在这里提前预祝大家圣诞快乐,Merry Christmas!

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
JS IE和FF兼容性问题汇总
Feb 09 Javascript
Javascript select下拉框操作常用方法
Nov 09 Javascript
jQuery 下拉列表 二级联动插件分享
Mar 29 Javascript
javascript中的startWith和endWith的几种实现方法
May 07 Javascript
js字符串转成JSON
Nov 07 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
jquery结婚电子请柬特效源码分享
Aug 21 Javascript
vue货币过滤器的实现方法
Apr 01 Javascript
Vue.js 2.0学习教程之从基础到组件详解
Apr 24 Javascript
关于react中组件通信的几种方式详解
Dec 10 Javascript
JavaScript原型对象、构造函数和实例对象功能与用法详解
Aug 04 Javascript
Vue.js图片预览插件使用详解
Aug 27 Javascript
js定时器实例分享
Dec 20 #Javascript
BootStrap Table 获取同行不同列元素的方法
Dec 19 #Javascript
Jquery Easyui进度条组件Progress使用详解(8)
Mar 26 #Javascript
详解Jquery的事件操作和文档操作
Dec 19 #Javascript
如何解决jQuery EasyUI 已打开Tab重新加载问题
Dec 19 #Javascript
详解用原生JavaScript实现jQuery的某些简单功能
Dec 19 #Javascript
Jquery Easyui对话框组件Dialog使用详解(14)
Dec 19 #Javascript
You might like
配置PHP使之能同时支持GIF和JPEG
2006/10/09 PHP
PHP实现的简单缓存类
2015/07/29 PHP
PHP实现基于mysqli的Model基类完整实例
2016/04/08 PHP
php生成网页桌面快捷方式
2017/05/05 PHP
JavaScript入门教程(10) 认识其他对象
2009/01/31 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
jquery toolbar与网页浮动工具条具体实现代码
2014/01/12 Javascript
js跨域请求的5中解决方式
2015/07/02 Javascript
jQuery实现带渐显效果的人物多级关系图代码
2015/10/16 Javascript
jquery实现文本框textarea自适应高度
2016/03/09 Javascript
js原型链与继承解析(初体验)
2016/05/09 Javascript
用jmSlip编写移动端顶部日历选择控件
2016/10/24 Javascript
assert()函数用法总结(推荐)
2017/01/25 Javascript
浅谈React中组件间抽象
2018/01/27 Javascript
vue服务端渲染缓存应用详解
2018/09/12 Javascript
详解Node.js中path模块的resolve()和join()方法的区别
2018/10/29 Javascript
python定时检查某个进程是否已经关闭的方法
2015/05/20 Python
PYTHON基础-时间日期处理小结
2018/05/05 Python
解决tensorboard多个events文件显示紊乱的问题
2020/02/15 Python
使用已经得到的keras模型识别自己手写的数字方式
2020/06/29 Python
使用keras实现非线性回归(两种加激活函数的方式)
2020/07/05 Python
html5触摸事件判断滑动方向的实现
2018/06/05 HTML / CSS
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
加拿大健康、婴儿和美容产品在线购物:Well.ca
2016/11/30 全球购物
荷兰最大的多品牌男装连锁店:Adam Brandstore
2019/12/31 全球购物
国际商务系学生个人的自我评价
2013/11/26 职场文书
超市总经理岗位职责
2014/02/02 职场文书
10的分与合教学反思
2014/04/30 职场文书
2014年创先争优活动总结
2014/05/04 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
电子银行业务授权委托书
2014/10/10 职场文书
文明单位创建材料
2014/12/24 职场文书
全国爱牙日活动总结
2015/02/05 职场文书
外贸英文求职信范文
2015/03/19 职场文书
2019如何书写演讲稿?
2019/07/01 职场文书
使用JS实现简易计算器
2021/06/14 Javascript