JavaScript騷操作之操作符

JS操作符

三目運算符 ?:

每到週末我都會問自己，怎麼安排？於是我寫了個程序跑了一下

if-else

看上去沒有什麼問題，但總感覺代碼有點臃腫，能不能稍微簡約一點？

換成三目運算符後

三目運算符

look，當hasMoney為true的時候，嗨翻天，為false的時候的睡一天。這種操作符在我們的根據簡單的判斷條件賦值的時候非常有用

三目運算符(三元表達式)

如此，我們的代碼就不會充斥著大量的if判斷條件句，還能略顯騷氣。但是，別騷過度了

可讀性差 可以使用switch語法

上面的例子有點為了裝逼而裝逼的感覺，在代碼可讀性方面有點糟糕，即使換成了if條件句也不甚美觀；像這種情況，可以使用switch語句或者策略模式的設計思想優化。

邏輯與操作符 &&

如果有錢的話，週末就去嗨翻天，但沒錢的情況還沒有想好要幹嘛（雖然沒錢的情況幹不了什麼），常規操作為

if語句

這個時候使用三目運算符改寫的話

使用三目運算符

有點奇怪，我們不得不寫個undefined去告訴程序判斷條件為false的時候應該怎麼做。使用邏輯與操作符就可以避免這個問題

&&語法

邏輯與操作符會使用Boolean函數判斷每一個條件(表達式)是否為true，當所有的判斷條件都為true的情況下，就會返回最後的表達式的運算結果；但是如果有判斷條件為false的話，就會返回第一個判斷條件為false的運算結果

Boolean函數

所以在react中使用邏輯與操作符渲染元素的時候，一定要注意

在react中使用邏輯與操作符渲染元素 沒有數據會渲出一個0

上面的例子的本意是當有數據的時候就將數據渲染出來，沒有數據的時候，不做任何操作。但是邏輯與操作符會將第一個為false的表達式的運算結果返回，導致返回了個0！

邏輯或操作符 ||

說到邏輯與操作符，就不得不提它的好基友：邏輯或操作符。考慮下面的場景

邏輯或操作符

使用三目運算符去處理上述例子的邏輯時，我們需要顯式的判斷val是否為空的，然後再決定變量val是否應該等於本身。那麼本著能省就省的原則，我們可以使用邏輯或操作符

使用邏輯 || 操作符

邏輯或操作符，其會將第一個表達式的運算結果傳入Boolean函數，如果Boolean函數返回true，就會返回這個運算結果；否則將會嘗試下一個，直到結束；如果所有的表達式的運算結果對應的布爾值都為false，則返回最後一個表達式的運算結果

故此操作符在向下兼容、設置函數參數的默認值時非常有用

|| 操作符可以向下兼容、設置函數參數的默認值

note: 故此猜想，if條件句裡面使用邏輯或、邏輯與操作符，實際上也只是返回表達式的運算結果，然後再隱式調用了Boolean函數得到一個最終的布爾值

邏輯取反 ！

上文說到，有錢的週末可以為所欲為，沒錢的週末，估計也就只能選擇睡一天了。這種情況下，如果使用hasMoney作為判斷標準，我們的代碼是這樣的

邏輯取反 ！

當hasMoney不是一個布爾值的時候，hasMoney === false語句就會一直返回false，造成有錢的假象。所以我們必須的將hasMoney轉換成一個布爾值才能判斷，恰好取反操作符可以同時給我們做這兩件事

這樣就能在沒錢的時候睡一天了。

取反操作符能夠將一個非Boolean類型的值轉化為Boolean類型的值且取反

取反操作符

按位取反操作符 ~

加入我們需要判斷一個數組裡面是否存在某個元素，在ES6裡面可以使用includes

在ES6裡面可以使用includes

但是這個方法有比較大的限制：沒辦法傳入一個篩選函數。

沒辦法傳入一個篩選函數

這種情況下，我們通常可以使用findIndex方法

可以使用findIndex方法

由於findIndex方法返回的索引是從0開始的，所以我們必須得判斷其返回的索引是否不等於-1或者是大於等於0。如果使用按位取反操作符，將不需要顯示去判斷

使用按位取反操作符，將不需要顯示去判斷

按位取反操作符，顧名思義，就是將變量的每一個比特位取反：0->1、1->0

按位取反操作符

結語

JavaScript騷操作系列主要總結JavaScript一些好用的特性、方法，以供交流學習之用，不喜勿噴。如有錯漏，歡迎指正。