[第四週] JavaScript — 使用邏輯運算子更靈活使用if - Miahsu

現代JavaScript 教程：逻辑运算符. JavaScript 中三個邏輯運算子. 為了讓一開始簡單一些，我們先從boolean 值來了解基本的邏輯運算子 ... GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWrite[第四週]JavaScript—使用邏輯運算子更靈活使用if學習目標：邏輯運算子的使用方法及短路性質關於學習JavaScript的筆記，主要源自於以下學習資源：[JS101]用JavaScript一步步打造程式基礎現代JavaScript教程：逻辑运算符JavaScript中三個邏輯運算子為了讓一開始簡單一些，我們先從boolean值來了解基本的邏輯運算子。

||（或）只要其中有值為true即返回trueconsole.log(true||true);//true真或真得真console.log(true||false);//true真或假得真console.log(false||true);//true假或真得真console.log(false||false);//false假或假得假多個||console.log(true||true||true);//trueconsole.log(true||false||true);//trueconsole.log(false||true||true);//trueconsole.log(false||false||true);//trueconsole.log(false||false||false);//false&&（與）每個值皆為true時才返回true。

console.log(true&&true);//true真與真得真console.log(true&&false);//false真與假得假console.log(false&&true);//false假與真得假console.log(false&&false);//false假與假得假多個&&console.log(true&&true&&true);//trueconsole.log(true&&false&&true);//falseconsole.log(false&&true&&true);//falseconsole.log(false&&false&&true);//false!（非）將值轉換布林值後返回相反值。

console.log(!true);//falseconsole.log(!false);//true與&&、||搭配使用[補充說明]！運算符中的優先級最高，因此總在||與&&前執行console.log(!false||false||false);//trueconsole.log(!true&&true&&true);//falseconsole.log(!false);//true應用於if在if的語句時常需要下很多的判斷的條件，造成巢狀的if，但這樣會造成程式碼易讀性降低。

因此如果可以在一個判斷式中塞入多個條件，就能避免巢狀，我們可以藉由邏輯運算子達到這個目的。

將巢狀if改為應用邏輯運算子原程式碼leta=20;if(a<30){if(a>10){console.log("yes");}else{console.log("no");}}else{console.log("no");}使用邏輯運算子leta=20;if(a>10&&a<30){console.log("yes");}else{console.log("no");}兩種方法相較起來，邏輯運算子更清晰應用於不同型態的資料雖然被稱作邏輯，但在JavaScript中邏輯運算子可以用於任意類型的值，比如數字、字串等，當然回傳的結果也是任意類型。

當操作非boolean的型態，會先將其轉化成boolean的型態再做判斷哪些值會被轉化成false？可以使用Boolean()來了解舉例Boolean(null)Boolean(undefined)Boolean(0)Boolean('')Boolean(NaN)當知道哪些值會轉化成false之後就可以套用前面的Boolean很容易的去使用邏輯運算子。

短路性質||、&&||（或）首先要先理解||做了什麼事情由左至右依序操作。

每個操作將值轉換布林值，假設結果為true則停止運算並返回值。

若每個操作都被計算過，都無true則回傳最後一個值。

尋找第一個true，舉例：以不同型態的值操作console.log(1||0)//1console.log(0||"0")//"0"console.log(null||1)//1console.log(""||0||undefined)//undefinedconsole.log(10||4)//10console.log(null||undefined||0)//0實務上的使用技巧，舉例：定義一個提取LocalStorage的變數，為了要避免第一次提取時會取不到資料（null），因此使用||如果無資料（null）就建立空陣列constarray=JSON.parse(window.localStorage.getItem('storage'))||[];&&（與）首先要先理解&&做了什麼事情由左至右依序操作。

每個操作將值轉換布林值，假設假設結果為false則「停止運算」並返回值。

若每個操作都被計算過，都無false則回傳最後一個操作值。

console.log(1&&5)//5都無false則回傳最後一個操作值console.log(0&&5)//00為第一個假值，第二個操作直接被忽略尋找第一個false，舉例：以不同型態的值操作console.log(1&&5)//5都無false則回傳最後一個操作值console.log(0&&5)//0console.log(null&&1)//nullconsole.log(""&&0&&undefined)//""console.log(null&&undefined&&0)//null實務上的使用技巧，舉例：代替if做簡單的判斷//當A==B，才調用stop()//以下兩式相等if(A==B)stop();(A==B)&&stop();補充說明：雖然可以代替，但if的可讀性更高，因此建議需要條件判斷時用if；需要運算時用&&重點整理在JavaScript中有三種邏輯運算子：與&&、或||、非!與&&：1.全部的值皆為true時才回傳true。

2.回傳第一個false如果沒有false就回傳最後一個值。

或||：1.只要有一個true就回傳true2.回傳第一個true如果沒有true就回傳最後一個值。

非！：將其轉化成Boolean並回傳相反的Boolean值。

以上有錯誤的地方歡迎指正，感謝。

--MorefromMiahsuFollow每件事都是最好的安排，成為更好的自己Lovepodcastsoraudiobooks?Learnonthegowithournewapp.TryKnowableAboutHelpTermsPrivacyGettheMediumappGetstartedMiahsu286Followers每件事都是最好的安排，成為更好的自己FollowMorefromMediumMeghaRathiIbrokeupwithallmyhobbies.AngelNavarroDefeatDr.DebraFordLanguageandtheIntuitiveSolePathLakshmipatiRaoViriyala(V.L.Rao)BoredomHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable