Javascript 基礎打底系列(三) - 邏輯運算子，與短路邏輯(short ...

Javascript 基礎打底系列(三) - 邏輯運算子，與短路邏輯(short circuit logic) 的應用 · 1. 用|| 來設定變數預設值 · 2. 用&& 來檢查物件與屬性值 · 3. 用|| ... 小雕雕的家 跳到主文 這個要打什麼啊? 部落格全站分類：數位生活 相簿 部落格 留言 名片 歡迎轉載(註明出處)或直接轉貼網址也ok，但是請不要直接把內容摳走貼在別的地方~ May30Mon201622:22 Javascript基礎打底系列(三)-邏輯運算子，與短路邏輯(shortcircuitlogic)的應用 此篇是給新手看的，老手可以直接上一頁了 這篇要來仔細研究的是邏輯運算子的使用，與一些開發上的小技巧 大家看到標題一定會以為這篇又是來混篇數的，&&、||、!(and、or、not)還需要你講嗎 的確是混篇數沒錯，但如果真的了解這幾個運算子的使用，能讓你在開發時的code更簡短，邏輯更清晰 Javascript有以下幾種類型的運算子，但這篇主要是針對邏輯運算子，想了解其他運算子的自己點進去看 代入運算子、比較運算子、算術運算子、位元運算子、邏輯運算子、字串運算子、特殊運算子 另外還有一元、二元、三元運算子，三元運算子就是條件運算子，請點進上面"特殊運算子"裡面有講 然後這篇有目錄可以讓你跳過一些廢文   邏輯運算子： &&(AND) ||(OR) !(NOT) 短路邏輯與短路求值 短路邏輯的運用 1.用||來設定變數預設值 2.用&&來檢查物件與屬性值 3.用||來簡化程式碼 4.用&&來簡化程式碼 5.用&&、||來擾亂簡化程式碼 6.善用!的轉換   以下開始正題： 首先先來了解一下邏輯運算子 邏輯運算子共有這三種：&&(and)、||(or)、!(not)他們通常在if判斷式裡和布林一起使用  &&(And) &&的特性是要全部為true才會是true，否則都返回false 意即全部條件都必須要成立，如下面例子：   ||(Or) ||的特性是只要其中一個是true就會返回true，除非全部都是false，意即只要其中一個條件滿足就成立 !(Not) !特性就是做反向，如果是true就返回false，如果是false就返回true    講完了，果然是廢文  但........此篇還沒結束 透過上面大家常用的邏輯運算子，其實可以發展出更簡便的寫法，就是下面要提到的短路邏輯 但要注意的是，更簡便寫法的另一層意思可能也代表著降低了可讀性   短路邏輯與短路求值 上面曾提到邏輯運算子們常在if判斷式中和布林(trueorfalse)一起使用 那是因為在if判斷式的括號裡會強制轉成布林值 而在javascript裡面只要是 0、""、null、false、undefined、NaN都會被判定為false 上面這句很重要，不是廢文 然後如果有比較運算子的話，再透過比較運算子去比較出結果 但其實在javascript裡可以用邏輯運算子操作任何值，不會強制要返回trueorfalse  例如像下面這種寫法： varobj=obj||{}; 上面這行的意思是，如果obj是存在的就維持原樣，如果不存在就給予空物件 換成更容易懂的寫法是這樣： if(!obj){ obj={};   } 這種寫法就是用了上面所說邏輯運算子的特性，使用最短的路徑來求值，因此叫短路邏輯 註： 這名詞不是我發明的，這是一種程式語言的求值策略(看哪種語言)，請看wiki： https://zh.wikipedia.org/wiki/%E7%9F%AD%E8%B7%AF%E6%B1%82%E5%80%BC   看完wiki後繼續唬爛 因為|| 的特性是只要其中一個為true就為true，因此如果第一個運算式符合就直接返回不會做第二個 實驗一下： 下面第一個結果為true，所以就不做後面的(a+=1)，故a最後等於1 下面第一個結果為fase，所以往下評估第二個運算結果(a+=1) 所以a最後等於2   短路邏輯的運用 開始前要再說一次，在javascript裡只要是 0、""、null、false、undefined、NaN都會被判定為false   1.用||來設定變數預設值 短路邏輯很適合用在給予變數預設值，像下面這樣 varstudent =name||"小明"; 如果沒有name就預設為小明，這種寫法簡單清楚明瞭又簡潔 不用再 if來if去的   2.用&&來檢查物件與屬性值 varname=o&&o.getName(); &&的特性是只要有一個false就是false 所以上面這段先檢查o，如果為true再做 o.getName() 舉個例子： 下面是一個簡單的物件做add varobj={ add:function(a,b){ console.log(a+b); } } obj.add(2,3); 但如果 obj如果還未定義的話會報錯(注意：至少要宣告) 這時候可以用&&來避免這個錯誤出現  因為obj是undefined，所以就不會做obj.add(2,3)了   3.用||來簡化程式碼 原本這樣： if(!obj){ call_function();   } 可以寫成這樣 (obj||call_function()); 因為||只要第一個是false就會繼續做下一個  或是反過來如果obj等於 true才呼叫函數的話 if(obj){ call_function();   } 可以寫成這樣 (!obj||call_function());   4.用&&來簡化程式碼 原本這樣：  vara=1; if(a==1){ alert("a=1"); } 現在可以寫成這樣 vara=1; a==1&&alert("a=1") 因為如果a==1為false，那下面alert就不會做了   5.用&&、||來擾亂簡化程式碼 當然也可以更複雜一點 本來是這樣： vara=3,b; if(a==3){ b=1; }elseif(a==5){ b=2; }else{ b=3; } 現在可以寫成這樣 vara=3,b; b=a==3&&1||a==5&&2||3 很適合離職的時候拿來搞同事用   6.善用!的轉換 文章上面有說，只要是 0、""、null、false、undefined、NaN，javascript都會判定為false 所以以後可以不要再這樣了 if(obj!=="null"&&obj!=="undefined"){ //.... } 一堆判斷不完，直接用這樣可能比較快，還可直接判斷是否為空值 if(!!obj){ //.... } 使用!(not)會強制轉為反向的boolean，再轉一次就是原值的布林值了 當然你也可以直接這樣 if(obj){ //.... } 但是經過!轉換之後可以強制讓其他類型轉為布林值，會更嚴謹     身邊誘惑太多都沒時間寫，寫好久，但其實還有很多想補充的，下次再補好了 先結束這篇，下篇待續.....   Javascript基礎打底系列(一)-常見的出包狀況解析(關於ByValue、ByReference) Javascript基礎打底系列(二)-null、undefined、NaN的差異與檢查方式 Javascript基礎打底系列-ByValue、ByReference的課後考題！ Javascript基礎打底系列(三)-邏輯運算子，與短路邏輯(shortcircuitlogic)的應用   全站熱搜 創作者介紹 小雕 小雕雕的家 小雕發表在痞客邦留言(1)人氣() E-mail轉寄 全站分類：數位生活個人分類：Javascript此分類上一篇：Javascript基礎打底系列-ByValue、ByReference的課後考題！ 此分類下一篇：Chrome開發人員工具(DevTools)，幾個簡單好用的技巧-Console篇 上一篇：Javascript基礎打底系列-ByValue、ByReference的課後考題！ 下一篇：[UX/UI]電子商務網站的規劃與設計課後心得(一)-電子商務網站發展趨勢、線上購物行為模式、首頁與類別頁的規劃與設計 歷史上的今天 2014:[Javascript]JSON操作+監控頁面輸入異動與提示+離開頁面提示儲存 ▲top 留言列表 發表留言 文章分類 CSS、ResponsiveWebDesign(2) CSS(3)ResponsiveWebDesign(5) JS、JQuery、Angular、React...(4) Javascript(18)React(4)jQuery(18)AngularJS(8) Facebook(14)ASP.Net(24)AndroidAPP推薦+小知識(11)Android相關開箱文(8)Android開發(10)SQL(9)PHP(1)Bootstrap(1)UX/UI使用者經驗設計(5)網站相關工具(3)網站分析(7)想要轉型成食記(17)想要轉型成遊記(19)想轉型成命理網站(5)生活類開箱文(8)心情(29) 最新文章 熱門文章 最新留言 我的連結 技術相關 ECMAScript6入門GoogleWebFundamentalsfiddler-檢查http封包內容工具HTML5FileAPIJavaScript本質部份CleanCodeJavascript(簡中版)jQuery寫作標準+好的實踐如何做到jQuery-free？React入门教程HTTPArchive 有趣 任天堂大亂鬥分享你的塗鴉~ 生活更美好 小雕雕的心靈道場小雕雕的命理練功坊 參觀人氣 本日人氣： 累積人氣： 回到頂端 回到頁首 回到主文 免費註冊 客服中心 痞客邦首頁 ©2003-2022PIXNET 關閉視窗