首页 > 其他 > 详细

浅谈逻辑运算符&&(与)和 ||(或)

时间:2020-01-21 21:01:21      阅读:34      评论:0      收藏:0      [点我收藏+]

标签:代码   高手   ret   知识点   思维   href   

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

昨天有一个叫周三胖(因崇拜某国领导人以及结合其个人特点所以姓周,号三胖⊙﹏⊙)的朋友,向我发了这么一张图片:
技术分享图片

兄弟,上面那几句什么意思?

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

大哥,我是真不会,求讲解?

%#@!#¥&

.....

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

我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...

浅谈逻辑运算符&&(与)和 ||(或)

标签:代码   高手   ret   知识点   思维   href   

原文:https://www.cnblogs.com/jlfw/p/12225729.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号