前情提要

艾草：「好啦，还是有其他条件可以判断你能不能成为大魔导师的！」

「哪尼～这麽好康的事不会早点说唷！快告诉我 ƪ(˘⌣˘)ʃ 」

艾草：「如果你是天选之人就可以直接成为大魔法师罗～来戴上这顶帽子！」

「咦，是分类帽吗？！」

艾草：「哈哈哈！当然.......不是，这是一种仪式感啦！来跟着流程判断是不是天选之人吧 ～ 」

流程判断 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