條件判斷
接下來介紹控制程式的方式之一,也就是條件判斷。
條件判斷顧名思義就是針對不同的條件來判斷要做出怎樣的結果。舉例來說,現在要採收水果,但我們只要取下已經成熟的水果,還沒熟的我們要讓他繼續成熟。
或是我們有更多條件,例如大於 500 公克的蘋果放到 A 籃子,介於 200 到 500 公克的蘋果放到 B 籃子,小於 200 公克的蘋果不要摘下來。
現實生活中我們都在做各種判斷,而我們當然可以把這種判斷的工作交給電腦來做,接著讓我們來了解電腦怎樣做判斷的。
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
來多個條件如何選擇誰被執行。
我們也知道判斷運算子有哪些,如 ==
、>=
等,可以用來決定通過或不通過。
最後我們提到了邏輯判斷,當有多個條件我們想要一起比較的時候,就可以用邏輯運算子來處理,如 &&
、||
、!
。並可以藉由邏輯的搭配實現夠複雜的邏輯。