條件判斷

接下來介紹控制程式的方式之一，也就是條件判斷。

條件判斷顧名思義就是針對不同的條件來判斷要做出怎樣的結果。舉例來說，現在要採收水果，但我們只要取下已經成熟的水果，還沒熟的我們要讓他繼續成熟。

或是我們有更多條件，例如大於 500 公克的蘋果放到 A 籃子，介於 200 到 500 公克的蘋果放到 B 籃子，小於 200 公克的蘋果不要摘下來。

現實生活中我們都在做各種判斷，而我們當然可以把這種判斷的工作交給電腦來做，接著讓我們來了解電腦怎樣做判斷的。

傳送門：此系列文章「30 天 Javascript 從入門到進階」

¶ if 判斷

這時候判斷的條件是「是否成熟」。我們要讓電腦能自動判斷我們剛剛的邏輯「只要碰到成熟的水過，就要摘下來」，換成程式的表達會是這樣：

如果（蘋果成熟了）=> 我就摘下來

現在我們把它表示成 JS 的形式：

檔案：ex1.js

console.log("看見一顆蘋果");

const isAppleMature = true;

if(isAppleMature == true) {
    console.log("摘下來");
}

執行 ex1.js 會印出

看見一顆蘋果
摘下來

這邊的 if 就是如果的意思，後面的 (isAppleMature == true) 則是判斷的條件，== 的意思是判斷相等，注意判斷相等必須是兩個 =，否則為語法錯誤。而這邊因為我們已經定義 const isAppleMature = true;，所以判斷條件相當於是問 true 和 true 一樣嗎？很顯然，答案是一樣，所以這個判斷條件的結果是 true。

if 所包住的 { } 裡面的程式碼要被執行，只有當 if 的判斷條件為 true（不為 false），所以在這個例子中，if 條件通過，所以會印出「摘下來」。

如果今天 isAppleMature 是 false 的話：

檔案：ex2.js

console.log("看見一顆蘋果");

const isAppleMature = false;

if(isAppleMature == true) {
    console.log("摘下來");
}

執行 ex2.js 會印出

看見一顆蘋果

因為 if 的判斷的條件 false == true 這句話不成立，所以「摘下來」並不會被印出來。

¶ 判斷運算子

從剛剛例子我們知道要使用 if 條件判斷，必須有個判斷條件，也就是 if 後面 () 裡面的內容。而事實上，判斷條件不只可以用在 if，之後其他語法也會用到判斷條件。

所以我們先來了解一下，可以怎麼樣使用判斷運算子（operator），所謂判斷運算子就是兩個值的比對方式，例如 x > y，這邊的 > 就是判斷運算子。

關於數值的比較方式可以用以下方式：

if(x > 5) // if x is greater than 5
if(x >= 5) // if x is greater than 5
if(x < 5) // if x is smaller than 5
if(x <= 5) // if x is smaller than 5
if(x == 5) // if x is equal to 5
if(x != 5) // if x is not equal to 5

如果是非「數值」的變數，我們只有相同或不相同兩種判斷方式：

if(str1 == str2) // if str1 is equal to str2
if(str1 != str2) // if str1 is not equal to str2

¶ else 判斷

在 ex1.js 的例子中，我們只有用到 if 來判斷成熟，如果成熟就會做事，如果不成熟就什麼事也不會做。

但是假設我們要讓判斷合格有做事，判斷不合格也要做事呢？

例如：

如果（水梨成熟）=> 採收
不然 => 幫它套上保護套

在這情況下，我們不管有沒有成熟，都需要做事情。

換成 JS 的寫法，就會長這樣：

檔案：ex3.js

const isMature = false;
console.log("對這個水梨：");

if(isMature == true) {
    console.log("採收");
} else {
    console.log("加裝保護套")
}

ex3.js 執行結果為：

對這個水梨：
加裝保護套

¶ else if 判斷

假設我們今天情況超級複雜呢？

例如對成績打分數，假設分數介於 0 到 100，規則如下：

80~100 : A
50~79  : B
0~49   : C

這時候我們只用 if 和 else 並不夠用，因為這邊有三個條件。於是我們可以這樣寫：

檔案：ex4.js

const score = 75;
if(score >= 80) {
    console.log("A");
} else if(score >= 50) {
    console.log("B");
} else {
    console.log("C");
}

印出來結果就會是 B。

根據我們剛剛定義的成績規則，第一條是 80 ～ 100 是 A，所以第一個 if 判斷是只要大於等於 80 就是 A。

這時候第二條規則我們用 else if 表示，只要大於 50 就是 B。為什麼不需要加小於 80 的條件呢？因為如果他大於 80，在第一條判斷是否大於 80 就會通過，並執行第一條規則的內容，所以如果程式跑到第二條規則，代表他一定小於 80 了。

最後一條規則，因為總共只有三條規則，所以剩下的就一定是第三條，我們直接用 else 就好了。當然你也可以寫成 else if(score > 0)，但在這個例子中並不需要。

¶ 邏輯運算子

但有時候我們要判斷的東西可能並不單純。

今天有個女孩宜臻，他要進電影院看限制級（大於 18 歲方可觀賞）的血腥殭屍片。這時候售票員要檢查，宜臻已經成年且宜臻有買票，宜臻才能進去看電影。

剛剛我們提到了「且」的概念，這便是邏輯條件了。

常用邏輯條件有：且(&&)、或(||)、非(!)，並用這三個邏輯就可以有很多種判斷條件。

用程式碼表示的話：

成年 && 有票        =>   成年 且 有票
成年 || 有票        =>   成年 或 有票
!成年              =>   未成年
!(有成年 && 有票)   =>   非（成年 且 有票），等同（未成年 或 沒票）

所以假設我們要找到等第為 B 的學生，因為 B 介於 50 到 80 之間，我們就可以用「且」邏輯把兩個判斷條件綁在一起。

檔案：ex5.js

const score = 75;
if(score >= 50 && score < 80) {
    console.log("符合 B 等第");
}

¶ true 和 false 判斷的簡化寫法

剛剛我們在例子中都寫成：

if(x == true) {
    // ...
}

事實上在這種情況下可以簡化寫成

if(x) {
    // ...
}

如果在條件判斷的地方只放入單一個變數，程式就知道你是在問他 x==true 了。

JS 中，x 是 false 的條件為：

• false
• 0
• ‘’ 或 “” (空字串)
• null
• undefined
• NaN (例如 1/0 的結果)

除此之外其他皆為 true，包含：

• ‘0’ (字串 0)
• ‘false’ (字串 false)
• [] (空陣列)
• {} (空物件)
• function(){} (空函數)

上面這些是比較容易有誤解的條件，例如空陣列、空物件都是 true，請特別小心！

另一個簡化的情況是：

if(x == false) { // 或是 x != true
    // ...
}

事實上在這種情況下可以簡化寫成

if(!x) {
    // ...
}

如果在條件判斷的地方只放入「非」單一個變數，程式就知道你是在問他 x!=true 了，或是等同 x == false。

以下舉例各種情況，條件通過為 true，不通過為 false：

if(5) // true
if(1) // true
if(true) // true
if("hi") // true

if(0) // false
if(-3) // false
if(null) // false
if(undefined) // false

const x = false;

if(!x) {
    // !x 相當於 true，這邊會被執行
}

¶ 生命週期

變數會有存在的範圍（scope）或是稱作生命週期。舉個例子，你在園遊會兌換了 400 元園遊券，這個園遊券只能在園遊會使用，當園遊會結束，園遊券也就沒用了。

程式語言中也是如此，變數也有生命週期，過了她能影響的範圍，那個變數就會被銷毀。

舉例來說：

if(something) {
    const name = "tiger"
}
console.log(name); // ReferenceError: name is not defined

執行上面程式碼，會出現錯誤，因為 name 在 if(){ } 結束時就被銷毀，但是 console.log 卻在 if 結束後，也就是 name 被銷毀了，才去呼叫 name。

如果想要變數在 if 結束後還能存在，就要擺在 if 的外面（且之前）：

let name = "";
if(something) {
    name = "tiger"
}
console.log(name); // OK

簡單來說變數的生命只有在他被宣告的 { } 裡面，{ } 可能是來自 if、else 或是下一章會提到的 for 皆是如此，離開 { } 也代表變數死亡。

如果之後還要使用該變數，就要確保那個變數至少生命週期在被呼叫的時候還存在，可以是放在同一層的 { } 或是比被呼叫的 { } 還要上層的 { }。

例如：

if(something) {
    let name = "Coco";
    if(other) {
        console.log(name); // 沒問題，name 的層級比被呼叫還要高
    }
    console.log(name); // 沒問題，name 的層級跟被呼叫時一樣高
}

以上就是程式運行過程中，控制程式是否執行的方式了。

回顧一下，現在我們知道如何使用 if、else if、else 來多個條件如何選擇誰被執行。

我們也知道判斷運算子有哪些，如 ==、>=等，可以用來決定通過或不通過。

最後我們提到了邏輯判斷，當有多個條件我們想要一起比較的時候，就可以用邏輯運算子來處理，如 &&、||、!。並可以藉由邏輯的搭配實現夠複雜的邏輯。