今天來講昨天沒講完的兩個Logical operators
。
會用&&
來判斷&&
兩邊的值,最基本的判斷是兩邊只有true
跟false
值的話,全部為true
才會是true
,只要有一個false
就會直接回傳成false
。
舉例來說,假如小白他想要合法的騎車,他就必須滿足以下條件:
其中,假如有一項沒有達成也就是false
,那麼最後的結果也會是回傳false
,沒有辦法騎車。
目前狀況 = 已滿18歲 && 已有駕照 && 已有車 && 沒有安全帽;
可以騎車嗎? => 不行
同等於
const condition = true && true && true && false;
console.log(condition); // false
而跟||
一樣,有著操作的值不是一個「boolean」值,也會被轉換成一個「boolean」型態的特性。
&&
在全部只有true
跟false
只有回傳這兩者其中之一很單純,但要是每一種的值都不一樣時,那回傳是哪一個呢?
答案是按照順序從左到右,遇到第一個false
的值,就直接回傳,要是到了最右邊都沒有false
的值,就會回傳最後一個的true
。
來證明這件事情。
已知1,2,3,4,5
都是true
,
而 0,null,undefined,''
會是false
。
回傳第一個false
:
console.log(0 && 1 && 2 && 3 && null); // 0
第一個遇到的0
就是false
所以就會直接回傳,就算最後一個是null
也不會碰到,從左到右的規則下,遇到0
之後就停止比較了。
可以把0
拿掉看看。
console.log(1 && 2 && 3 && null); // null
把0
拿到之後,null
就會變成最後一個false
,所以會被回傳。
回傳最後一個的true
:
console.log(1 && 2 && 3 && 4 && 5); // 5
從左到右都碰不到false
直到最後一個的5
,那麼就會把最後一個的5
這個true
的結果給回傳。
再試一組看看。
console.log(5 && 4 && 3 && 2 && 1); // 1
最後一個的true
變成了1
,且完全沒有false
的值,所以會回傳1
。
我個人認為最好懂的Logical operators
。
原理就是加上了一個!
,true
會變成false
,false
會變成true
,一個反向的概念。
console.log(!true); // false
console.log(!false); // true
而對於不是「boolean」值的其他值,會變成反向的轉換成「boolean」型態。
console.log(!"小白"); // false
console.log(!null); // true
所以有一種用法,就是我想要把一個值,變成「boolean」值的時候,可以使用兩個!
。
console.log(!!"小白"); // ture
console.log(!!null); // false
想要的話,也可以用很多很多個!
,不過通常只會用到兩個,之後的效果也都一樣。
3個!
同等於 1個!
。
首先,要是||
跟&&
跟!
比較起優先順序,那麼!
是最大的。
無論何時,!
都會在||
跟&&
之前被執行。
就像是先乘除,後加減。
在邏輯運算子裡面是先NOT,後其他操作。
其實還蠻合理的,沒有先用!
轉完的話,根本沒辦法比較。
接下來是||
跟&&
。
&&
會比||
更優先執行,在執行||
會先把&&
都解決。
console.log(false && true || false && true); //false
也可以看成
console.log((false && true) || (false && true)); //false
[1] MDN - Expressions and operators
[2] MDN - Logical AND (&&)
[3] MDN - Logical NOT (!)
[4] MDN - Operator precedence