浅谈逻辑运算符&&（与）和 ||（或）

RdouTyping 发布于2019-08-29 12:48 / 1081人阅读

我有一群奇形怪状的小伙伴，总会问我一些奇形怪状的问题。

昨天有一个叫周三胖（因崇拜某国领导人以及结合其个人特点所以姓周，号三胖⊙﹏⊙）的朋友，向我发了这么一张图片：

兄弟，上面那几句什么意思？

呔！三胖休得坑贫道。老衲不会！

大哥，我是真不会，求讲解？

%#@！#￥&

.....

经过三胖的一番软磨硬泡，死缠烂打，威逼利诱之后，我终于倒在三胖的花言巧语，甜言蜜语之中。

我balabala.....

吃瓜群众：我们瓜都吃完了你什么时候进入正题？

==============一脸懵逼的吃瓜群众分割线==============

好吧，我们进入正题，抛去上面的代码，我写下如下代码

 function foo(){
     var a = 1; 　
     var b = 2; 
     var c = false; 　　
     var d = true; 
     console.log(c || (a = 1111),"a此刻的值：",a); 
     console.log(d || (b = 2222),"b此刻的值：",b); 
 } 　
 foo();

各位看官且说会输出神马？

好吧，浏览器输出如下

why???
且慢。我们再来修改一下foo函数:　

 function foo(){
     var a = 1; 　
     var b = 2; 　　 
     var c = false; 
     var d = true; 　
     console.log(c && (a = 1111),"a此刻的值：",a); 
     console.log(d && (b = 2222),"b此刻的值：",b); 　 
 } 　 
 foo();

然后我们在浏览器中会看到如下：

ok，下面进入讲解部分：

&& 和 || 运算符在JavaScript中我更喜欢用初中物理中的电力并联串联来形容， || 运算符相当于并联线路图，而&&运算符则是串联，鉴于年代久远，老夫又出身文科转投工科，就不向各位理工高手看官介绍何为串联并联。

三胖：你分明就是不会!

去去去，盒饭拿好，赶紧回公司撸你代码!

咳咳，咱们继续。

|| 操作符会首先对第一个操作数进行判断，如果第一个为真，则直接返回第一个操作数的判断结果，对第二个操作数是啥不会进行判断运算，如果第一个为假值，则会去判断第二个操作数并对第二个操作数进行执行操作，而后返回执行操作判断值。所以对于||的说明我们可以用代码这么整理：

第一个操作数 || 第二个操作数
代码解释：　　

 if(第一个操作数){
     return 第一个操作数;　
 }
 else{
     return 第二个操作数;
 }

进一步对foo中 c || (a = 1111) 套用上述解释就是：

 if(c){ 
     return c;　
 } 
 else{ 
     return (a = 1111);　　　　　　//此处在浏览器直接这么写会报错，建议先运算再取出返回值 
 }

同理 d || (b = 2222) 的套用就是

 if(d){ 
     return d;　
 } 
 else{ 
     return (b = 2222);　　　　　　//此处在浏览器直接这么写会报错，建议先运算再取出返回值 
 }

如此一来就会返回出上面的结果。

|| 运算符在我们处理事件兼容时广泛的被应用，比如：

  e = e || event;

这所运用的思想就是这样一个思想，如果e为false或者undefined，则会把event赋值给e。

同时在除了在event中的应用外我们还应用在函数的传参上，比如：

 function test(a){
     a = a || 111;
     console.log(a);
 }

用此为函数形参指定默认参数，但是这么做其实是不安全的，比如当我调用test函数时我传入实参一个""(空字符串)或者传入实参0，此时浏览器会输出

在浏览器中会将""(空字符串)和0以及很多其它的假值进行隐式类型转换，所以单纯的进行这样一个判断是不严谨和不安全的，所以建议各位看官少用。

这是一个知识点。

三胖：甭废话，盒饭我快吃完了你才讲这么点？

我：哥屋恩...

各位看官别走，咱们继续（微笑脸）。

&& 运算符则和||正好相反，如果第一个操作数为真，则进行第二个操作数的判断运算，首先它会对第二个操作数进行运算，拿到第二个操作数的返回值，而后返回第二个操作数的返回值。如果第一个操作数为假，则进入第二个操作数的判断，直接返回false。

三胖：什么如果否则的，看的我都晕了。

我：

ko，咱们继续。

根据对||运算符的套路。我们继续将&&符转换为半代码半中文语言：

操作数一 && 操作数二

变身：　　　　

 if(第一个操作数){
     return 第二个操作数;　　
 } 
 else{ 
     return false; 
 }

继续对上面的 c && (a = 1111) 进行套用：　　

 if(c){
     return (a = 1111);　　 　　　　　　　　//此处在浏览器直接这么写会报错，建议先运算再取出返回值 
 }  
 else{  
     return false; 
 }

同理 d && (b = 2222) 的解释如下

if(d){
     return (b = 2222);　　 　　　　　　　　//此处在浏览器直接这么写会报错，建议先运算再取出返回值 
 }  
 else{  
     return false; 
 }

如此输出结果如上。

三胖：嗯。（若有所思脸）

&&运算符一般用在不确定某一对象下是否有某一属性时的判断，比如我有如下代码

 var list = {
     obj : {},
     array : [1,2,3,4,5]
 }

在我不确定array是否为list下的属性时通常我们这么写　　

if(list.hasOwnProperty("array")){
     //dosomething
 }
 else{
     //dosomething
 }

结合&&符我们可以这么写 :

list.hasOwnProperty("array") && dosomething

对比以上两种写法，很明显在代码简洁性上，第二种写法完胜，但是在代码可读性上完败，两种方式都可以，这取决于个人习惯，我个人比较喜欢第二种写法。

我：三胖，回答我一个问题，回答完你就可以打卡下班了，知道逻辑运算符之间的优先级吗？

三胖：不知道。

我：哥屋恩....

三胖：得嘞（开心脸）。

滴，学生卡。

o(╯□╰)o

回来，你给我回来。

算了，各位看官，我们继续。

现在有如下代码:　

 a = "hello";
 b = false;
 c = false;
 console.log(a || b && c)

各位看官，再次猜测会输出什么。

按照正常从左道右的逻辑思维我们先拿到 a || b 的值，而后我们再与 c 进行&&运算，最后它会输出 false

然而，事与愿违。

浏览器最终输出----hello。

这里就体现了逻辑运算符之间的优先级关系，事实上浏览器在解析运算时是这样做的：

a || (b && c)

也就是先拿到 b && c 的值，而后再与 a 进行 || 运算，最后返回结果。

这也就是说在进行逻辑运算时 || 运算符的优先级低于 && 运算符。但是并不建议大家这么书写，这样会导致逻辑关系不明朗，代码可读性差的后果，所以各位看官在书写这样的代码时还是加上一个()为妙（手动滑稽）。

以上就是本次对逻辑运算符的浅谈随笔，如有不对，欢迎指出。文中我与三胖的日常大多实为剧情需要虚构而出，如有雷同实属巧合，语言风格非喜且轻喷。

我是南北东西，一条游上岸的咸鱼，我的目标是翻个身，继续晒。
博客园首发传送地址http://www.cnblogs.com/blog-i...

服务器托管超融合服务器 java逻辑和或运算 asp &amp&amp逻辑 php 运算符&amp java运算符&gt&gt&gt

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112157.html

浅谈逻辑运算符&amp;&amp;（与）和 ||（或）

我有一群奇形怪状的小伙伴，总会问我一些奇形怪状的问题。昨天有一个叫周三胖（因崇拜某国领导人以及结合其个人特点所以姓周，号三胖⊙﹏⊙）的朋友，向我发了这么一张图片：showImg(https://segmentfault.com/img/bVPFiz?w=1148&h=96); 兄弟，上面那几句什么意思？呔！三胖休得坑贫道。老衲不会！大哥，我是真不会，求讲解？ %#@！#￥& ..... 经过...

xiyang 2019-08-20 17:28 评论0 收藏0
浅谈逻辑运算符&amp;&amp;（与）和 ||（或）

我有一群奇形怪状的小伙伴，总会问我一些奇形怪状的问题。昨天有一个叫周三胖（因崇拜某国领导人以及结合其个人特点所以姓周，号三胖⊙﹏⊙）的朋友，向我发了这么一张图片：showImg(https://segmentfault.com/img/bVPFiz?w=1148&h=96); 兄弟，上面那几句什么意思？呔！三胖休得坑贫道。老衲不会！大哥，我是真不会，求讲解？ %#@！#￥& ..... 经过...

cnTomato 2019-08-01 17:01 评论0 收藏0
深入理解JS中逻辑或（||）和逻辑与（&amp;&amp;）

摘要：如果第一项的值为时，则执行后面一项的运算，返回的是第二项执行运算后的值再来看多一个例子，自己多动手尝试看看就明白了。先来看一个关于逻辑或的例子： var b = 0 var a = b++ || b++ console.log(b) // 2 var c = ++b || ++b console.log(a) // 1 console.log(c) //...

sanyang 2019-08-23 14:24 评论0 收藏0
js中的｜与 &amp;&amp; 运算符详解

摘要：这个时候我就有点犯迷糊了，为什么逻辑运算符能这么用呢由于是出身，所以对这样用感觉很奇怪。这篇文章主要介绍了js中的 || 与 && 运算符详解,需要的朋友可以参考下一 js中逻辑运算符在开发中可以算是比较常见的运算符了，主要有三种：逻辑与&&、逻辑或||和逻辑非！。当&&和|| 连接语句时，两边的语句会转化为布尔类型（Boolean），然后再进行运算，具体的运算规则如下：两边条...

baoxl 2019-08-23 13:02 评论0 收藏0
js中的｜与 &amp;&amp; 运算符详解

摘要：这个时候我就有点犯迷糊了，为什么逻辑运算符能这么用呢由于是出身，所以对这样用感觉很奇怪。这篇文章主要介绍了js中的 || 与 && 运算符详解,需要的朋友可以参考下一 js中逻辑运算符在开发中可以算是比较常见的运算符了，主要有三种：逻辑与&&、逻辑或||和逻辑非！。当&&和|| 连接语句时，两边的语句会转化为布尔类型（Boolean），然后再进行运算，具体的运算规则如下：两边条...

jsyzchen 2019-06-28 16:46 评论0 收藏0