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

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

这次想分享的是 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!

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

(0)

相关推荐

  • 详解JavaScript逻辑And运算符

    在JavaScript中,逻辑 AND 运算符用双和号(&&)表示 var bTrue = true; var bFalse = false; var bResult = bTrue && bFalse; 下面的真值表描述了逻辑AND运算符的行为: 需要说明的是:逻辑AND运算的运算数可以是任何类型的,不止是Boolean值,如果某个运算数不是原始的Boolean型值,逻辑AND运算并不一定返回Boolean值 逻辑AND运算符的运算行为如下: 如果一个运算数是对象,另一个

  • Javascript中常见的逻辑题和解决方法

    一.统计数组 arr 中值等于 item 的元素出现的次数 function count(arr, item) { var count = 0; arr.forEach(function(e){ //e为arr中的每一个元素,与item相等则count+1 e == item ? count++ : 0; }); return count; } function count(arr, item) { return arr.filter(function(a){ return (a==item);

  • javaScript 逻辑运算符使用技巧整理

    javaScript 逻辑运算符使用技巧整理 下面是返回true的情况 !null //true !undefined //true !0 //true !NaN //true !"" //true 下面是返回false的情况 !Array //false !Function //false !String //false !Object //false !Number //false !" " //false !100 //false !"100&quo

  • js的逻辑运算符 ||

    因而查询一下js的介绍: 1.逻辑或运算符||: 当运算符||的两个运算数都是布尔值,它对这两个运算数执行布尔OR操作. 它先计算第一个运算数,如果这个表达式的值可以被转换成true,那么它就返回左边这个表达式的值.否则计算第二个运算数 即使||运算符的运算数不是布尔值,任然可以将它看作布尔OR运算,因为无论它返回的值是什么类型,都可以被转换为布尔值. 而且另一方面,对非布尔型的运算数使用了||,这是利用了它对非布尔型的值会将其返回的特性.该运算符的这一用法通常是选取一组备选值中的第一个定义了的

  • 巧用Javascript的逻辑运算符

    domObj.onkeydown = function(e){ if(e){ e.-- }else{ event.-- } } 上面例子:如果是火狐浏览器执行if里面的语句,即使用e这个参数,来引用"事件对象". 如果是IE浏览器则执行else里面的语句,即使用event来引用"事件对象". 这是为了兼容两个浏览器而使用的if判断方法,来使用事件对象. domObj.onkeydown = function(e){ var oevent = e||event; oe

  • js比较和逻辑运算符的介绍

    比较和逻辑运算符用于测试 true 或 false. 比较运算符比较运算符在逻辑语句中使用,以测定变量或值是否相等. 给定 x=5,下面的表格解释了比较运算符: 运算符 描述 例子 == 等于 x==8 为 false === 全等(值和类型) x===5 为 true:x==="5" 为 false != 不等于 x!=8 为 true > 大于 x>8 为 false < 小于 x<8 为 true >= 大于或等于 x>=8 为 false &

  • JavaScript中的逻辑判断符&&、||与!介绍

    与C.Java等语言一样,JavaScript中可以用&&.||.!三个逻辑判断符来对boolean值进行逻辑判断.与C.Java不同的是,JavaScript中逻辑与(&&)和逻辑或(||)操作符可以应用在任何值上,而操作结束后返回的也不一定是boolean值. 逻辑与&&的处理规则 JavaScript中&&的处理规则是这样的: 1.判断第一个值是否为Falsy.如果为Falsy,则直接返回第一个值(不一定为boolean类型). 2.如

  • 详解JavaScript逻辑Not运算符

    在JavaScript 中,逻辑NOT运算符与C和Java中的逻辑 NOT 运算符相同,都由感叹号(!)表示.与逻辑 OR 和逻辑 AND 运算符不同的是,逻辑 NOT 运算符返回的一定是 Boolean 值. 逻辑 NOT 运算符的行为如下: 如果运算数是对象,返回 false 如果运算数是数字 0,返回 true 如果运算数是 0 以外的任何数字,返回 false 如果运算数是 null,返回 true 如果运算数是 NaN,返回 true 如果运算数是 undefined,发生错误 测试脚

  • 老生常谈javascript中逻辑运算符&&和||的返回值问题

    今天在做逻辑运算符的时候遇到一个小问题一直转不过弯来,var a=(undefined&&123)||(3||5)的返回值是什么? 首先是||的返回值问题: ||的返回值会返回最早遇到非以下类型的值: NaN null undefined 0 false; 所以3||5返回的是3: 如果||左右两边都是以上类型的值时,会返回最后一个 如 var a=0||null||undefined则a返回的值是undefined; 其次是&&的返回值问题: &&的返回值

  • javascript运算符——逻辑运算符全面解析

    前面的话 逻辑运算符对操作数进行布尔运算,经常和关系运算符一样配合使用.逻辑运算符将多个关系表达式组合起来组成一个更复杂的表达式.逻辑运算符分为逻辑非'!'.逻辑与'&&'.逻辑或'||'3种,本文将介绍这三种逻辑运算符 逻辑非 逻辑非操作符由一个叹号(!)表示,可以应用于ECMAScript中的任何值.无论这个值是什么数据类型,这个操作符都会返回一个布尔值.逻辑非操作符首先会将它的操作数转换成一个布尔值,然后再对其求反 逻辑非对操作数转为布尔类型的转换类型与Boolean()转型函数相同

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

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

  • JavaScript逻辑运算符相关总结

    前言 关于 JavaScript 中的逻辑运算符,我们经常使用却可能不知道它的一些机制和用法. 机制 首先我们需要知道几种逻辑运算符的优先级是不同的(关于完整的运算符优先级,看运算符优先级),逻辑非>逻辑与>逻辑或>条件运算符(三目运算符).运算顺序条件运算符是从右向左,而逻辑与和逻辑或都是从左向右. //表达式的优先级导致结果不同 false && true || true // 结果为 true false && (true || true) // 结

  • Javascript面向对象编程

    Javascript的重要性 使用率 1.在web应用中,涉及到前端界面编程基本上都要用到javascript语言: 2.Web2.0及Ajax推动了javascript语言. 3.随着大量的c/s应用转向b/s,富客户端技术的不断推广,javascript语言的应用范围还将不断加大: javascript的特点 简单 动态 基于对象(面向对象) Javascript面向对象概述 Javascript是一种面向(基于)对象的动态脚本语言,是一种基于对象(Object)和事件驱动(EventDri

  • 浅谈javascript运算符——条件,逗号,赋值,()和void运算符

    前面的话 javascript中运算符总共有46个,除了前面已经介绍过的算术运算符.关系运算符.位运算符.逻辑运算符之外,还有很多运算符.本文将介绍条件运算符.逗号运算符.赋值运算符.()和void运算符 条件运算符 条件运算符是javascript中唯一的一个三元运算符(三个操作数),有时直接称做'三元运算符'.通常这个运算符写成'?:',当然在代码中往往不会这么简写,因为这个运算符拥有三个操作数,第一个操作数在'?'之前,第二个操作数在'?'和':'之间,第三个操作数在':'之后 varia

  • JavaScript学习笔记之基础语法

    JavaScript中很多基础内容和Java中大体上基本一样,所以不需要再单独重复讲了,包括: 各种算术运算符.比较运算符.逻辑运算符: if else语句.switch语句: for循环.while循环.do while循环: 标签.break.continue: try catch throw语句. 可以查看文后的参考链接. 后面的内容都是JavaScript中不同的部分. 本文先说上面内容中的几个细节不同. 1.全等判断 JavaScript的比较运算符中有一个全等判断===,是用来判断值

  • JavaScipt基本教程之JavaScript语言的基础

    在什么地方插入 JavaScript JavaScript 可以出现在 HTML 的任意地方.使用标记<script>-</script>,你可以在 HTML 文档的任意地方插入 JavaScript,甚至在<HTML>之前插入也不成问题.不过如果要在声明框架的网页(框架网页)中插入,就一定要在<frameset>之前插入,否则不会运行.基本格式 <script><!--...(JavaScript代码)...//--></sc

随机推荐