EP.10 RE:從零開始的學習 JS 生活-第十日之條件式判斷

前言

轉生第十日,這一篇將會介紹條件式判斷,所謂的條件式判斷不外乎就是在講 if...else... 以及 switch 等。

條件式判斷

條件式判斷依照我們傳入的東西來進行判斷,例如我傳入了 true,所以當若為 true 就跑 A 區塊的程式碼片段,當為 false 就跑 B 區塊程式碼片段,那常見的條件式判斷最主要有這四種 ↓

條件式判斷

if

最基本的條件式判斷就是 if,撰寫方式就會像這樣 ↓

if 定義

那假設如果你希望當判斷結果是 false 就跑 A 區塊的程式碼片段時,那麼就可以使用我們前面所學 Not 邏輯運算子:

1
2
3
if(!false){ // false 被反轉為 true
console.log('被反轉了');
}

所以條件式判斷的括號裡面只會判斷布林值,若是布林值之外將會強制轉型成布林值,例如空字串:

1
2
3
if(''){ // 空字串代表著 false
console.log('沒有執行');
}

if…else

if...else... 其實與 if... 是一樣的,只是當條件若為 false 它就會改執行 else 中的程式碼,所以就會像這樣子 ↓

if...else...

if…else if…else

if...else if...else 以我個人來講是比較少使用,一方便閱讀上較不直覺之外,滿多人都說這個寫法效能是比較不好的(我自己感受不太出來,太菜了 QQ),那這個寫法其實很簡單,就感覺起來只是 if...else... 得連體嬰兒已(好恐怖?!)。

1
2
3
4
5
6
7
8
9
if(a) {
...
} else if (a) {
...
} else if (a) {
...
} else {
...
}

而這種寫法簡單來講當 A 條件不過它就去判斷 B 條件,B 條件沒過它就會去跑 C ..以此類推,但是如果基本上判斷數量若超過三個以上,滿多前輩都會跟你說建議使用另一種寫法,也就是 switch()

switch

我個人是滿喜歡使用 switch 的,只要 if...else if...else 超過三個我就會改用 switch 做判斷,因為 switch 好處在於它不會先做判斷,而是先看資料有沒有存在,若存在再做比對,反之 if 則是先做判斷,那 switch 的撰寫方式如下 ↓

switch 定義

這邊要注意一件事情,在每一個 case 中,一定要記得加入 break; 這是意旨中斷該 switch 區塊,否則你將會發生這種狀況 ↓

1
2
3
4
5
6
7
8
9
10
var a = 1;
switch(a) {
case 1:
console.log(1);
case 2:
console.log(2);
break;
default:
break;
}

case 2 也被執行

所以你就會發現我明明只要執行 case 1 區塊的程式碼,但是 case 2 卻也跟著執行,那麼這就是 switch 要注意的地方,另外在撰寫 JavaScript ESLint 的時候,都會建議 switch 一定要補上 default 的區塊,也就是當以上條件都不成立時就會跑 default 的區塊,雖然不寫 default 是沒有任何問題也不會出現任何錯誤,但是風格管理器可是會哀嚎的唷~

阿~阿~阿~你忘記寫 default 囉~

(阿你忘記寫 default 囉)

結尾

下一篇的 RE:從零開始的學習 JS 生活-第十一日 將會介紹型別轉換。