日常生活中，我們常常會有許多如果怎麼樣，就去做甚麼事這種情境，我們隨時會得到許多不同的訊息、輸入進腦袋進行判斷後做出幾種選項中最有利的決策，並且去付諸實行。例如：如果起床看到下雨，決定不去運動；如果待會新客戶成交了，那晚餐就吃牛排。

條件敘述句（Conditional statements）讓我們能將這些決定的過程在 Javascript 表示出來

今天就要來介紹最常見的條件敘述句

基礎架構

if 是流程判斷的語法，基本的 if...else 如下方程式碼

if (條件式) {
  如果條件式的結果為 true，則執行這個大括弧裡的程式碼
} else {
  如果條件式的結果不為 true，則執行這個大括弧裡的程式碼
}

從上我們可以得知基礎的架構：

1. 兩個關鍵字 if 、 else

2. if 後面有個小括號 () 及裡面的條件式

   • 條件式就是我們想要對其進行判斷的條件（例如 A > B 或是 lunch === "bento"），這時常會用到比較運算子，並且回傳布林值 true 或是 false。

3. 緊接著有大括號 {} 跟裡面的程式碼

   • 大括號裡放在不同判斷結果下想要各自執行的程式碼（如 console.log("晚餐吃牛排")）。

     • 第一組大括號：在條件式回傳 true 的情況下會執行
     • 第二組大括號：在條件式回傳 false 的情況下才會執行

   所以也可以理解成：「當條件式回傳 true 時，執行第一組程式，否則，執行第二組」

模擬情境

了解基礎架構後，我們繼續用情境來更清楚地了解該怎麼使用 if 判斷式：

1. if

可以單獨使用

當外面溫度超過 35 度時，小智會開冷氣

```=javascript
let degree = 0;

degree = 34; // (沒有滿足條件，不會發生任何事)
degree = 36; // 小智打開冷氣

if (degree>35){
console.log("小智打開冷氣")
}
```

2. if else

當外面溫度超過 35 度時，小智會開冷氣，否則就開電風扇
```=javascript
let degree = 0;

degree = 34; // 小智打開電風扇
degree = 36; // 小智打開冷氣

if (degree>35){
console.log("小智打開冷氣")
}else{
console.log("小智打開電風扇")
}
```

3. else if

當需要判斷的條件增加時，可以使用 else if 來增加條件判斷：

當外面溫度超過 35 度時，小智會開冷氣
當外面溫度不足 35 度但超過 28 度時，小智會開電風扇
否則開窗戶就好

```=javascript
let degree = 0;

degree = 34; // 小智打開電風扇
degree = 36; // 小智打開冷氣
degree = 27; // 小智打開窗戶

if ( degree > 35 ){
console.log( "小智打開冷氣" )
}else if( degree < 35 && degree > 28 ){
console.log( "小智打開電風扇" )
}else{
console.log( "小智打開窗戶" )
}
```

else if 可以增加多個在 if 跟 else 的中間，進行更多種情況的判斷。

if 裡面再包 if

有些狀況下可能會需要多層的判斷，我們一樣用情境來模擬會更清楚：

VIP資格
會員消費 1000 元以上可成為VIP
非會員需消費 100000 元才可成為VIP

//初始化變數
let isMember;
let spend;

isMember = true; //是會員
spend = 1000; //消費1000元 
//印出「恭喜！你已成為VIP！」

isMember = true; //是會員
spend = 100; //消費100元 
//印出「你還不是VIP」

isMember = false; //不是會員
spend = 10000; //消費10000元 
//印出「恭喜！你已成為VIP！」

isMember = false; //不是會員
spend = 1000; //消費1000元 
//印出「你還不是VIP」

isMember = "true"; //把布林值用字串表示
spend = 1000;
//印出「資料輸入錯誤」

if(isMember === true){
    if(spend>=1000){
        console.log("恭喜！你已成為VIP！");
    }else{
        console.log("你還不是VIP");
    }
}else if(isMember === false){
    if(spend>=10000){
        console.log("恭喜！你已成為VIP！");
    }else{
        console.log("你還不是VIP");
    }
}else{
    console.log("資料輸入錯誤");
}

從流程判斷開始接觸到比較多的邏輯訓練，建議可以多使用情境的練習，或甚至是自己設想情境，都是很有幫助的喔！

參考資料

線上課程
MDN