淺談邏輯運(yùn)算符&&（與）和 ||（或）

RdouTyping 發(fā)布于2019-08-29 12:48 / 1220人閱讀

我有一群奇形怪狀的小伙伴，總會(huì)問我一些奇形怪狀的問題。

昨天有一個(gè)叫周三胖（因崇拜某國(guó)領(lǐng)導(dǎo)人以及結(jié)合其個(gè)人特點(diǎn)所以姓周，號(hào)三胖⊙﹏⊙）的朋友，向我發(fā)了這么一張圖片：

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

呔！三胖休得坑貧道。老衲不會(huì)！

大哥，我是真不會(huì)，求講解？

%#@！#￥&

.....

經(jīng)過(guò)三胖的一番軟磨硬泡，死纏爛打，威逼利誘之后，我終于倒在三胖的花言巧語(yǔ)，甜言蜜語(yǔ)之中。

我balabala.....

吃瓜群眾：我們瓜都吃完了你什么時(shí)候進(jìn)入正題？

==============一臉懵逼的吃瓜群眾分割線==============

好吧，我們進(jìn)入正題，拋去上面的代碼，我寫下如下代碼

 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();

各位看官且說(shuō)會(huì)輸出神馬？

好吧，瀏覽器輸出如下

why???
且慢。我們?cè)賮?lái)修改一下foo函數(shù):　

 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();

然后我們?cè)跒g覽器中會(huì)看到如下：

ok，下面進(jìn)入講解部分：

&& 和 || 運(yùn)算符在JavaScript中我更喜歡用初中物理中的電力并聯(lián)串聯(lián)來(lái)形容， || 運(yùn)算符相當(dāng)于并聯(lián)線路圖，而&&運(yùn)算符則是串聯(lián)，鑒于年代久遠(yuǎn)，老夫又出身文科轉(zhuǎn)投工科，就不向各位理工高手看官介紹何為串聯(lián)并聯(lián)。

三胖：你分明就是不會(huì)!

去去去，盒飯拿好，趕緊回公司擼你代碼!

咳咳，咱們繼續(xù)。

|| 操作符會(huì)首先對(duì)第一個(gè)操作數(shù)進(jìn)行判斷，如果第一個(gè)為真，則直接返回第一個(gè)操作數(shù)的判斷結(jié)果，對(duì)第二個(gè)操作數(shù)是啥不會(huì)進(jìn)行判斷運(yùn)算，如果第一個(gè)為假值，則會(huì)去判斷第二個(gè)操作數(shù)并對(duì)第二個(gè)操作數(shù)進(jìn)行執(zhí)行操作，而后返回執(zhí)行操作判斷值。所以對(duì)于||的說(shuō)明我們可以用代碼這么整理：

第一個(gè)操作數(shù) || 第二個(gè)操作數(shù)
代碼解釋：　　

 if(第一個(gè)操作數(shù)){
     return 第一個(gè)操作數(shù);　
 }
 else{
     return 第二個(gè)操作數(shù);
 }

進(jìn)一步對(duì)foo中 c || (a = 1111) 套用上述解釋就是：

 if(c){ 
     return c;　
 } 
 else{ 
     return (a = 1111);　　　　　　//此處在瀏覽器直接這么寫會(huì)報(bào)錯(cuò)，建議先運(yùn)算再取出返回值 
 }

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

 if(d){ 
     return d;　
 } 
 else{ 
     return (b = 2222);　　　　　　//此處在瀏覽器直接這么寫會(huì)報(bào)錯(cuò)，建議先運(yùn)算再取出返回值 
 }

如此一來(lái)就會(huì)返回出上面的結(jié)果。

|| 運(yùn)算符在我們處理事件兼容時(shí)廣泛的被應(yīng)用，比如：

  e = e || event;

這所運(yùn)用的思想就是這樣一個(gè)思想，如果e為false或者undefined，則會(huì)把event賦值給e。

同時(shí)在除了在event中的應(yīng)用外我們還應(yīng)用在函數(shù)的傳參上，比如：

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

用此為函數(shù)形參指定默認(rèn)參數(shù)，但是這么做其實(shí)是不安全的，比如當(dāng)我調(diào)用test函數(shù)時(shí)我傳入實(shí)參一個(gè)""(空字符串)或者傳入實(shí)參0，此時(shí)瀏覽器會(huì)輸出

在瀏覽器中會(huì)將""(空字符串)和0以及很多其它的假值進(jìn)行隱式類型轉(zhuǎn)換，所以單純的進(jìn)行這樣一個(gè)判斷是不嚴(yán)謹(jǐn)和不安全的，所以建議各位看官少用。

這是一個(gè)知識(shí)點(diǎn)。

三胖：甭廢話，盒飯我快吃完了你才講這么點(diǎn)？

我：哥屋恩...

各位看官別走，咱們繼續(xù)（微笑臉）。

&& 運(yùn)算符則和||正好相反，如果第一個(gè)操作數(shù)為真，則進(jìn)行第二個(gè)操作數(shù)的判斷運(yùn)算，首先它會(huì)對(duì)第二個(gè)操作數(shù)進(jìn)行運(yùn)算，拿到第二個(gè)操作數(shù)的返回值，而后返回第二個(gè)操作數(shù)的返回值。如果第一個(gè)操作數(shù)為假，則進(jìn)入第二個(gè)操作數(shù)的判斷，直接返回false。

三胖：什么如果否則的，看的我都暈了。

我：

ko，咱們繼續(xù)。

根據(jù)對(duì)||運(yùn)算符的套路。我們繼續(xù)將&&符轉(zhuǎn)換為半代碼半中文語(yǔ)言：

操作數(shù)一 && 操作數(shù)二

變身：　　　　

 if(第一個(gè)操作數(shù)){
     return 第二個(gè)操作數(shù);　　
 } 
 else{ 
     return false; 
 }

繼續(xù)對(duì)上面的 c && (a = 1111) 進(jìn)行套用：　　

 if(c){
     return (a = 1111);　　 　　　　　　　　//此處在瀏覽器直接這么寫會(huì)報(bào)錯(cuò)，建議先運(yùn)算再取出返回值 
 }  
 else{  
     return false; 
 }

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

if(d){
     return (b = 2222);　　 　　　　　　　　//此處在瀏覽器直接這么寫會(huì)報(bào)錯(cuò)，建議先運(yùn)算再取出返回值 
 }  
 else{  
     return false; 
 }

如此輸出結(jié)果如上。

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

&&運(yùn)算符一般用在不確定某一對(duì)象下是否有某一屬性時(shí)的判斷，比如我有如下代碼

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

在我不確定array是否為list下的屬性時(shí)通常我們這么寫　　

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

結(jié)合&&符我們可以這么寫 :

list.hasOwnProperty("array") && dosomething

對(duì)比以上兩種寫法，很明顯在代碼簡(jiǎn)潔性上，第二種寫法完勝，但是在代碼可讀性上完敗，兩種方式都可以，這取決于個(gè)人習(xí)慣，我個(gè)人比較喜歡第二種寫法。

我：三胖，回答我一個(gè)問題，回答完你就可以打卡下班了，知道邏輯運(yùn)算符之間的優(yōu)先級(jí)嗎？

三胖：不知道。

我：哥屋恩....

三胖：得嘞（開心臉）。

滴，學(xué)生卡。

o(╯□╰)o

回來(lái)，你給我回來(lái)。

算了，各位看官，我們繼續(xù)。

現(xiàn)在有如下代碼:　

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

各位看官，再次猜測(cè)會(huì)輸出什么。

按照正常從左道右的邏輯思維我們先拿到 a || b 的值，而后我們?cè)倥c c 進(jìn)行&&運(yùn)算，最后它會(huì)輸出 false

然而，事與愿違。

瀏覽器最終輸出----hello。

這里就體現(xiàn)了邏輯運(yùn)算符之間的優(yōu)先級(jí)關(guān)系，事實(shí)上瀏覽器在解析運(yùn)算時(shí)是這樣做的：

a || (b && c)

也就是先拿到 b && c 的值，而后再與 a 進(jìn)行 || 運(yùn)算，最后返回結(jié)果。

這也就是說(shuō)在進(jìn)行邏輯運(yùn)算時(shí) || 運(yùn)算符的優(yōu)先級(jí)低于 && 運(yùn)算符。但是并不建議大家這么書寫，這樣會(huì)導(dǎo)致邏輯關(guān)系不明朗，代碼可讀性差的后果，所以各位看官在書寫這樣的代碼時(shí)還是加上一個(gè)()為妙（手動(dòng)滑稽）。

以上就是本次對(duì)邏輯運(yùn)算符的淺談隨筆，如有不對(duì)，歡迎指出。文中我與三胖的日常大多實(shí)為劇情需要虛構(gòu)而出，如有雷同實(shí)屬巧合，語(yǔ)言風(fēng)格非喜且輕噴。

我是南北東西，一條游上岸的咸魚，我的目標(biāo)是翻個(gè)身，繼續(xù)曬。
博客園首發(fā)傳送地址http://www.cnblogs.com/blog-i...