今天來講昨天沒講完的兩個Logical operators。

  1. Logical AND (&&)
  2. Logical NOT (!)

Logical AND (&&)

會用&&來判斷&&兩邊的值，最基本的判斷是兩邊只有true跟false值的話，全部為true才會是true，只要有一個false就會直接回傳成false。

舉例來說，假如小白他想要合法的騎車，他就必須滿足以下條件:

  1. 滿 18 歲
  2. 獲得機車駕照
  3. 有一台車
  4. 有安全帽

其中，假如有一項沒有達成也就是false，那麼最後的結果也會是回傳false，沒有辦法騎車。

1
2
3
目前狀況 = 已滿18歲 && 已有駕照 && 已有車 && 沒有安全帽;

可以騎車嗎? => 不行

同等於

1
2
3
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:

1
console.log(0 && 1 && 2 && 3 && null); // 0

第一個遇到的0就是false所以就會直接回傳，就算最後一個是null也不會碰到，從左到右的規則下，遇到0之後就停止比較了。

可以把0拿掉看看。

1
console.log(1 && 2 && 3 && null); // null

把0拿到之後，null就會變成最後一個false，所以會被回傳。

回傳最後一個的true:

1
console.log(1 && 2 && 3 && 4 && 5); // 5

從左到右都碰不到false直到最後一個的5，那麼就會把最後一個的5這個true的結果給回傳。

再試一組看看。

1
console.log(5 && 4 && 3 && 2 && 1); // 1

最後一個的true變成了1，且完全沒有false的值，所以會回傳1。

Logical NOT (!)

我個人認為最好懂的Logical operators。

原理就是加上了一個!，true會變成false，false會變成true，一個反向的概念。

1
console.log(!true); // false
1
console.log(!false); // true

而對於不是「boolean」值的其他值，會變成反向的轉換成「boolean」型態。

1
2
console.log(!"小白"); // false
console.log(!null); // true

所以有一種用法，就是我想要把一個值，變成「boolean」值的時候，可以使用兩個!。

1
2
console.log(!!"小白"); // ture
console.log(!!null); // false

想要的話，也可以用很多很多個!，不過通常只會用到兩個，之後的效果也都一樣。

3 個! 同等於 1 個! 。

優先級

首先，要是||跟&&跟!比較起優先順序，那麼!是最大的。

無論何時，!都會在||跟&&之前被執行。

就像是先乘除，後加減。
在邏輯運算子裡面是先 NOT，後其他操作。

其實還蠻合理的，沒有先用!轉完的話，根本沒辦法比較。

接下來是||跟&&。

&&會比||更優先執行，在執行||會先把&&都解決。

1
console.log((false && true) || (false && true)); //false

也可以看成

1
console.log((false && true) || (false && true)); //false

reference

[1] MDN - Expressions and operators
[2] MDN - Logical AND (&&)
[3] MDN - Logical NOT (!)
[4] MDN - Operator precedence