今天要來介紹的是Logical operators，最主要有這三種常常使用 =>

  • || => OR 運算子
  • && => AND 運算子
  • ! => NOT 運算子

學習在這邊的時候可能會有疑問，運算子(operators)是什麼?

拿去 google 會發現它似乎會常常被跟運算式(Expressions)一起談論。

Expressions and operators

可以用一個簡單的 1+1 來了解這個概念。

1
const X = 1 + 1; //2

1+1會等於2應該沒問題，而這個X = 1+1其實就是Expressions，這個Expressions會產生一個2的值，那麼operators在哪裡？

在這個X = 1+1的Expressions裡面，=是一個operators，+也是一個operators，實際上，Expressions就是透過operators來進行運算的，透過operators的運算獲得最後的「值」。

是的，加、減、乘、除都是operators，除了計算之外，operators也可以用來賦予值，像是上面提到的=，它把1+1得出2的這個值賦予到這個 x 的變數之中，其他也有許許多多的不同的類型operators，像是我們今天的主題Logical Operators。

想要更了解的話可以去看MDN Expressions and operators。

接下來進入Logical operators個別介紹，會儘量用白話的方式來講述。

||介紹

||可以念做 OR 運算子，如它其名，這是一個用來判斷 OR 邏輯的operators，但什麼是 OR 邏輯判斷？

來看一個小故事。

肚子痛的故事

有一天小白穿得很帥的在路上走來走去，突然肚子一陣劇痛，小白心想這事情不太妙，這種感覺是沒辦法撐到回家的，好在他所在的位置附近剛好有兩個有廁所的建築物，一個是右側方過去有公園，另一個則是左邊過去有一間麥當勞。

時間已經等不了他了！ 小白要馬上做出選擇，最後他選擇的是……

A 世界線 =>

小白選擇了去公園，他步履蹣跚的向著公園廁所走去，路上小心翼翼的躲避著那些橫衝直撞的小孩，跟一群追著飛盤的狗，千辛萬苦來到廁所，裡面有三間，此時小白已經到了極限，他一間間的敲，第一間有人，第二間有人，第三間也有人，小白頓時留下兩行清淚，他失敗了。

B 世界線 =>

小白選擇了去麥當勞，趕到之後裡面一瞧，發現竟只有兩間廁所，小白吞了吞口水，拿起他那雙顫抖的手「叩叩叩」第一間廁所門，發現沒有反應後試探性地打開那廁所門，小白笑了，他知道他不用再去看下一間。

只要是遇到了true就馬上回傳true

剛剛的故事裡，小白在 A 世界線裡選擇到了公園的廁所以及 B 世界線到麥當勞的廁所，我們可以使用 OR 運算子的方式來表示：

1
2
3
公園廁所 = 廁所1 || 廁所2 || 廁所3;

麥當勞廁所 = 廁所1 || 廁所2;
  • 廁所沒人的話，小白可以順利解決肚子痛的問題，我們稱為ture。
  • 廁所有人的話，小白會很悲慘，我們稱為false。
1
2
3
公園廁所 = false || false || false; // false

麥當勞廁所 = true || 廁所2; // ture

公園的廁所每間都有人，全部false，所以最後結果也是false。

麥當勞的廁所小白只去看了第一間，發現裡面沒有人ture，就直接進去沒有再去看第二間了，最後結果是ture。

上面這些其實就是 OR 邏輯判斷，當全部失敗的時候就全部失敗，但只要有其中一個成功，那麼就直接成功，不用看其他的。

列舉一些實際上範例的組合會更了解一些：

1
2
3
4
console.log(true || true); // true
console.log(false || true); // true
console.log(true || false); // true
console.log(false || false); // false

可以發現到說，除了全部都是false之外的，其他通通都是true，這基本上就是 OR 運算子的概念。

但我們實際上不會只用true跟false這種方式來做判斷，我們可以用其他各種類型的值，它們會自動轉換成true跟false的型態，比如說：

1
2
3
4
5
let age = 5;

if (age < 10 || age > 65) {
  console.log("你可以買優惠票");
}

age < 10及age > 65都會被轉換，有成立就會true沒成立則是false，數字方面也一樣，像是說:

1
2
3
if (1 || 0) {
  console.log("有true");
}

數字1會被當作true，數字0會被當作false，會發現到說要是今天操作的值不是一個「boolean」值，也會被轉換成一個「boolean」的型態。

以上是基本的 OR 運算子會做到的事情。

了解這塊之後，接下來再來探討在javascript中，一些比較特別的特性。

尋找第一個真值，找不到就回傳最後一個

回到上面小白在 A 世界線悲慘的遭遇。

1
2
3
公園廁所 = 廁所1 || 廁所2 || 廁所3;

公園廁所 = false || false || false; // false

三個廁所都沒有人，所以都是false，會回傳false，但是前面有提到說，除了「boolean」值之外，其實結果可以是任意類型，代表著回傳的東西不一定只能是false。

在查閱了 MDN 關於Boolean的章節跟一些相關文章後，發現可以被當作false的初始值如下：

  • 0
  • null
  • undefined
  • ‘’
  • false(本身)
  • (空值沒東西)

假如用這些值塞滿三個原本false的地方，最後肯定是會回傳false，但三個false值假如不一樣，那麼 OR 運算子會怎麼運作呢？

1
三個不同值 = null || "" || 0; // 三個都是false的值

如果最後傳回來的值，是需要轉換之後才會變成「boolean」值的，那回傳的值會是直接最後一個初始的值。

從上面來說，就是||先從最左邊開始找，第一個看到null不是true所以繼續往下找，下一個是''也不是true，所以繼續找，下一個0也不是true，但已經是最後一個了，所以||就會想說好吧，那就回傳0。

於是，假如今天順序是null || '' || 0就會回傳0。

1
console.log(null || "" || 0); // 0

假如順序是0 || '' || null就會回傳null。

1
console.log(0 || "" || null); // null

遇到是true的值，就會馬上回傳，否則回傳最後的false值。

最後再來利用剛剛的所學，改寫一次小白的例子。

使用三個變數代表三間廁所，空字串代表false，字串裡面有寫東西代表true，用||的方式來選擇是true的那一樣，並且顯示出來，代表廁所裡面有人。

利用這種技巧就可以來獲取一群變數排列中，裡面的第一個真值。

1
2
3
4
5
let firstBathroom = "";
let secondBathroom = "";
let thirdBathroom = "裡面有人";

console.log(firstBathroom || secondBathroom || thirdBathroom || "沒人可以進去"); // 裡面有人

小結

今天的介紹就到這邊，明天會繼續把&&跟!講完的/images/emoticon/emoticon13.gif

reference

[1] MDN - Expressions and operators
[2] MDN - Boolean