前情提要

艾草：「好啦，還是有其他條件可以判斷你能不能成為大魔導師的！」

「哪尼～這麼好康的事不會早點說唷！快告訴我 ƪ(˘⌣˘)ʃ 」

艾草：「如果你是天選之人就可以直接成為大魔法師囉～來戴上這頂帽子！」

「咦，是分類帽嗎？！」

艾草：「哈哈哈！當然.......不是，這是一種儀式感啦！來跟著流程判斷是不是天選之人吧 ～ 」

流程判斷 if else if

在講解 if else if 前，讓我們先來了解一下很常會與 if else if 搭配使用的比較運算子、邏輯運算子吧！

比較運算子

比較運算子，用來比較兩邊是否相等，包含 >、<、<=、>=、==、===、!=、!==。
常常與 if else 搭配使用，用來決策流程是否正確。
>、<、<=、>=的用法：

console.log(2 > 1)//true
console.log(1 > 2)//false
console.log(100 >= 100)//true
console.log(100 <= 100)//true

基本上就是之前數學課上過的使用方式。
而 == 、 === 都是用來判斷左右兩邊是否相等，兩者的差異為：

console.log(1 == "1")//true
console.log(1 === "1")//false

=== 比起 == 嚴謹，在 == 的情況下，不同型別間也可能相等，而 ===的情況下不同型別就會回傳 false。
這邊也補充一下 =、== 的差異，= 代表的是賦予的意思，例如：

let a = 1;

對，常常被我們拿出來示範的 let a = 1; 又出來了，複習一下這邊的中文描述為我宣告了一個變數 a 並賦予它數字型別的值1，而 = 就是賦予的意思，==、=== 是比較的意思！
特別拿出來說就是因為很多時候寫到後來不知道自己在幹嘛時，很容易在要賦予值時寫錯寫成 == 或是在判斷時寫成 = ，然後開始懷疑人生。
當你發現流程判斷怪怪的時候，記得留意一下是不是自己寫錯 =、== 囉！

!= 、 !== 是不相等的意思，!==比起!=嚴謹：

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

知識點：比較運算子

• 包含 >、<、<=、>=、==、===、!=、!==
• =、==不一樣，=是賦予、==是比較
• ==、=== 是相等
• !=、!== 是不相等
• ===、!== 比 ==、!=嚴謹，能比較型別

邏輯運算子

邏輯運算子包含 &&、|| 、!，&& 代表 and 、||代表 or 、! 代表 not ，&&需要同時滿足情境，||則只要滿足其中一個情境就可以。
&& 使用情境：

let a = 1;
let b = 2;
console.log(a == 1 && b == 3)//false
console.log(a == 1 && b == 2)//true

&& 只有在同時滿足左右兩邊時才會回傳 true。

|| 使用情境：

let a = 1;
let b = 2;
console.log(a == 1 || b == 3)//true
console.log(a == 1 || b == 2)//true
console.log(a == 2 || b == 3)//false

||兩者滿足其中一個條件，就會回傳 true。

&&、|| 也可以多組使用，使用方法如下：

//&& 多組練習
let a = true;
let b = true;
let c = false;
console.log( a === true && b === true && c === true)//false

//|| 多組練習
let d = true;
let e = true;
let f = false;
console.log( d === true || e === true || f === true)//true

! 可以理解為反轉的意思，如果今天是 true 前面加上 ! 就會被反轉為 false ，反之亦然。

! 使用情境：

let a = !true;
console.log(a) //false
let b = !false;
console.log(b)//true

知識點：邏輯運算子

• && 代表 and 、 || 代表 or 、 ! 代表 not
• &&需要同時滿足情境、||只要滿足其中一個情境就可以
• 可以多組運用

瞭解完比較運算子、邏輯運算子後，讓我們來進入流程判斷 if else if 吧！

if else if

if else if 可以拿來做流程判斷 if(條件成立) 就去跑{}大括號內的內容，使用方法如下：

if(2 > 1){
  console.log("條件成立");
}

2比1大是成立的，所以它會去跑大括號裡面的內容，如果希望前面的條件不成立，就去跑後面的區塊的話可以使用 else ，如下：

if(2 < 1){
  console.log("條件成立");
}else{
  console.log("條件失敗");
}

這邊2沒有小於1，會去執行 else 區塊，在設定條件式時都是可以搭配前面介紹到的變數與運算子去做使用的。
最後， 如果要新增多組條件可以使用 else if 做連接，在 if else if 的使用上比較大的困難點是如何去拆解步驟並設定條件，所以這邊也來練習情境題：
小美想喝飲料，如果身上有60元，就喝珍珠奶茶，有40元，喝綠茶多多，都不夠就不喝。
步驟拆解：

1.判斷小美身上多少錢

2.有60元喝珍珠奶茶

3.有40元喝綠茶多多

4.錢都不夠不喝飲料

let mayMoney = 60;
if (mayMoney >= 60) {
  console.log("喝QQㄋㄟㄋㄟ好喝到咩噗茶");
} else if (mayMoney >= 40) {
  console.log("喝綠茶多多");
} else {
  console.log("錢不夠，都不喝");
}

像這樣可以透過設定多組條件，去練習 if else if !

知識點：if else if

• if 只能有一組
• else 只能有一組
• 想設定多組條件可以使用 else if
• 只要符合了其中一個條件，就不會往下跑了

小練習

在判斷式內填入依題意填入內容判斷是否已經成為大魔法師吧 ヾ(*´∇`)ﾉ

滿足大魔法師僅需符合其中一個條件：

• 魔力總量 (mana) 超過 66666
• 是天選之人(chosen one)

let mana = 500;
let chosenOne = false;

if ("請填入判斷式") {
  console.log("我是大魔法師了ლ(｀∀´ლ)");
} else {
  console.log("為了魔力總量 ლ(´Д`ლ) ～下一篇讓我們學習陣列吧");
}

參考文獻

JavaScript 必修篇 - 前端修練全攻略(六角學院)
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Guide/Expressions_and_Operators