[JS基礎]如何使用邏輯運算子&& 和 - Medium

“[JS基礎]邏輯運算子&& 和||如何使用” is published by Johnny in Johnny ... 但猛然一看還是會覺得怪怪的，用這篇文章記錄一下&&和||的邏輯和用法。

GetunlimitedaccessOpeninappHomeNotificationsListsStoriesWritePublishedinJohnny的轉職工程師筆記[JS基礎]如何使用邏輯運算子&&和||PhotobyJamesHarrisononUnsplash&&和||是寫出簡潔程式碼的好幫手，最近自學時越來越常看到用&&和||的寫法，雖然不會看不懂，但猛然一看還是會覺得怪怪的，用這篇文章記錄一下&&和||的邏輯和用法。

在運用邏輯運算子之前要先了解何謂truthy和falsy：TruthyandFalsyFalsy就是你傳入Boolean()會回傳false的值：console.log(Boolean(false))//falseconsole.log(Boolean(0))//falseconsole.log(Boolean(‘’))//falseconsole.log(Boolean(null))//falseconsole.log(Boolean(undefined))//falseconsole.log(Boolean(NaN))//falseTruthy則是會回傳true，所有不是falsy的都是truthy：console.log(Boolean(true))//trueconsole.log(Boolean(1))//trueconsole.log(Boolean('Hello'))//trueconsole.log(Boolean([1,2,3]))//trueconsole.log(Boolean({name:'Johnny'}))//true在if…else中可以使用truthy和falsy來判斷trueorfalse，滿常用到的是去判斷陣列中是否有元素：constarr=[]console.log(arr.length)//0if(arr.length){console.log('thereissomethinginarray')}else{console.log('emptyarray')}//emptyarray這樣程式比寫arr.legnth===0...簡潔一些。

也可以用ternaryoperator寫的更精簡一些：constmessage=arr.length?'thereissomethinginarray':'emptyarray'console.log(message)就像Boolean()和if…else一樣，邏輯運算子&&和||是根據truthy和falsy去運作的。

&&如何運作x&&y&&z&&....從左邊到右邊，回傳第一個是falsy的值，若全部皆為truthy，則回傳最後一個值。

簡單舉例：constnumber=10&&50&&0&&3console.log(number)//0constnumberTwo=10&&50&&100&&3console.log(numberTwo)//3第一個例子因為0是falsy，所以number的值是0，第二個例子所有的數字都是truthy，所以numberTwo回傳3。

||如何運作x||y||z||....基本上就是跟&&相反：從左邊到右邊，回傳第一個是truthy的值，若全部皆為falsy，則回傳最後一個值。

簡單舉例：constnumber=1||2||3console.log(number)//1constnumberTwo=0||15console.log(numberTwo)//15constnumberThree=0||undefined||nullconsole.log(numberThree)//nullnumber因為第一個就是truthy了，直接回傳1。

numberTwo第一個數字是0(falsy)，第二個數字15(truthy)，回傳15。

numberThree全部都是falsy，回傳最後一個值null。

實際應用需要取得localStorage資料，如果沒有則回傳空陣列：constlist=JSON.parse(localStorage.getItem('someKey'))||[]這樣寫可以省掉非常多的程式碼去寫if…else2.陣列不是null也不是空陣列才去對陣列做map：constnumbers=nullconstnumbersTwo=[1,2,3]functionmultiplyTen(numbers){returnnumbers!==null&&numbers.length?numbers.map(number=>number*10):[]}multiplyTen(numbers)//[]multiplyTen(numbersTwo)//[10,20,30]很常遇到要串連多個判斷式的狀況，這時候用&&搭配ternaryoperator就可以寫出非常簡潔的程式碼。

有時候會覺得有點腦袋轉不過來，但其實就像以前寫excelformula，&&就是AND，||就是OR。

AND需要全部的條件都是true才會回傳true，OR只需要一個條件是true就會回傳true了。

參考資料:How&&and||OperatorsReallyWorkinJavaScript--MorefromJohnny的轉職工程師筆記非本科轉職網頁工程師筆記 — 記錄學習前端與後端開發心得ReadmorefromJohnny的轉職工程師筆記AboutHelpTermsPrivacyGettheMediumappGetstartedJohnny37FollowersLearninghowtocodeandhowtobuildawesomeproducts!FollowMorefromMedium404answernotfound18What’snewwithReact18?YonatanKraAgoodcaseforEvalinJavaScriptJacobyMcCannInverseDataFlow — React.jsNickZayatzinCirtualSharingSCSSandReactstylingwithSCSSModulesHelpStatusWritersBlogCareersPrivacyTermsAboutKnowable