iT邦幫忙

2022 iThome 鐵人賽

DAY 23
0
Modern Web

JavaScript 之路,往前邁進吧!系列 第 23

JS之路 Day23 - Logical operators (邏輯運算子) AND、NOT篇

  • 分享至 

  • xImage
  •  

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

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

Logical AND (&&)

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

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

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

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

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

可以騎車嗎? => 不行

同等於

const condition = true && true && true && false;

console.log(condition); // false

而跟||一樣,有著操作的值不是一個「boolean」值,也會被轉換成一個「boolean」型態的特性。

尋找第一個假值,找到就馬上回傳

&&在全部只有truefalse只有回傳這兩者其中之一很單純,但要是每一種的值都不一樣時,那回傳是哪一個呢?

答案是按照順序從左到右,遇到第一個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 NOT (!)

我個人認為最好懂的Logical operators

原理就是加上了一個!true會變成falsefalse會變成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

reference

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


上一篇
JS之路 Day22 - Logical operators (邏輯運算子) OR篇
下一篇
JS之路 Day24 - nullish coalescing operator (空值合併運算子)
系列文
JavaScript 之路,往前邁進吧!30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言