Gitbook 連結: https://tigercosmos.github.io/master-js-in-30-days/

條件判斷

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

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

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

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

if 判斷

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

1
如果(蘋果成熟了)=> 我就摘下來

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

檔案:ex1.js

1
2
3
4
5
6
7
console.log("看見一顆蘋果");

const isAppleMature = true;

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

執行 ex1.js 會印出

1
2
看見一顆蘋果
摘下來

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

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

如果今天 isAppleMaturefalse 的話:

檔案:ex2.js

1
2
3
4
5
6
7
console.log("看見一顆蘋果");

const isAppleMature = false;

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

執行 ex2.js 會印出

1
看見一顆蘋果

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

判斷運算子

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

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

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

1
2
3
4
5
6
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

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

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

else 判斷

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

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

例如:

1
2
如果(水梨成熟)=> 採收
不然 => 幫它套上保護套

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

換成 JS 的寫法,就會長這樣:

檔案:ex3.js

1
2
3
4
5
6
7
8
const isMature = false;
console.log("對這個水梨:");

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

ex3.js 執行結果為:

1
2
對這個水梨:
加裝保護套

else if 判斷

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

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

1
2
3
80~100 : A
50~79 : B
0~49 : C

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

檔案:ex4.js

1
2
3
4
5
6
7
8
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 歲方可觀賞)的血腥僵屍片。這時候售票員要檢查,宜臻已經成年且宜蓁有買票,宜蓁才能進去看電影。

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

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

用程式碼表示的話:

1
2
3
4
成年 && 有票        =>   成年 且 有票
成年 || 有票 => 成年 或 有票
!成年 => 未成年
!(有成年 && 有票) => 非(成年 且 有票),等同(未成年 且 沒票)

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

檔案:ex5.js

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

true 和 false 判斷的簡化寫法

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

1
2
3
if(x == true) {
// ...
}

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

1
2
3
if(x) {
// ...
}

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

JS 中,xfalse 的條件為:

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

除此之外其他皆為 true,包含:

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

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

另一個簡化的情況是:

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

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

1
2
3
if(!x) {
// ...
}

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

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

1
2
3
4
5
6
7
8
9
if(5) // true
if(1) // true
if(true) // true
if("hi") // true

if(0) // false
if(-3) // false
if(null) // false
if(undefined) // false
1
2
3
4
5
const x = false;

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

生命週期

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

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

舉例來說:

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

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

如果想要變數在 if 結束後還能存在,就要擺在 if 的外面(且之前):

1
2
3
4
5
let name = "";
if(something) {
name = "tiger"
}
console.log(name) // OK

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

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

例如:

1
2
3
4
5
6
7
if(something) {
let name = "Coco";
if(other) {
console.log(name) // 沒問題,name 的層級比被呼叫還要高
}
console.log(name) // 沒問題,name 的層級跟被呼叫時一樣高
}

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

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

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

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