iT邦幫忙

2021 iThome 鐵人賽

DAY 9
0
自我挑戰組

追憶JS年華系列 第 9

Day 09 流程控制

在JavaScript中,想要控制流程,就要設計流程中的條件。

條件判斷 if...else

望文生義,這是一個**「如果...就...否則」**的條件判斷式。

以下方的巢狀判斷式舉例,我們宣告了年齡(age)及公民權(citizen)兩個變數,並給出了條件判斷如下:

  • 若年齡大於等於20,且擁有公民權,則「可以投票」。
  • 否則「不能投票」。
var age = 22
var citizen = true

if (age >= 20) {
	if (citizen == true) {
		console.log("可以投票")
	} else {
		console.log("不能投票")
	}
} else {
  console.log("不能投票")
}

其中的第二個if,本身也是寫成第二個 else if 條件判斷,可以視需要增加(不建議太多),令所有條件(if 與 else if)滿足時方為 true,否則(else)就是flase(執行 else 的結果)。

這組判斷式可以用「&&」再簡化為:

var age = 22
var citizen = false

if (age >= 20 && citizen) { //若年滿20且為公民
	console.log("可以投票")
} else {
  console.log("不能投票")
}

條件判斷 switch

健身環不錯玩(大誤)

此承前述,在「同值、多分支運算」的條件判斷中,若條件很多,就可能不斷增加 else if,平添程式維護的問難。舉例來說:

let plan = "C";

if (plan === "A"){
    console.log("進行A計畫");
} else if (plan === "B"){
    console.log("進行B計畫");
} else if (plan === "C"){
    console.log("進行C計畫");
} else {
    console.log("計畫取消");
} //結果印出「進行B計畫」

此處使用switch語法,無須重寫重複的陳述句。其具體流程是:

  1. 執行開頭的陳述句。
  2. 若條件(值)滿足,執行第一個plan。
  3. 若不滿足,執行下一個plan,直到最後的default為止。

具體上,前例可以改寫如下:

let plan = "C";

switch(plan){
    plan "A":
        console.log("進行A計畫");
        break;
    plan "B":
        console.log("進行B計畫");
        break;
    plan "C":
        console.log("進行C計畫");
        break;
    default:
        console.log("計畫取消");
        break;
} //結果印出「進行B計畫」

必須注意的是,switch語法不像if,執行完畢後不會結束。一定要以「break」語法中止switch的運作

if (temp <= 7) { 
	console.log("酷寒");
} 
else if (temp > 8 && temp < 12) {
  console.log("寒冷");
}
else if (temp > 13 && temp < 32) {
  console.log("宜人");
}
else if (temp > 33 && temp < 35) {
  console.log("炎熱");
}
else if (temp >= 36) {
  console.log("酷熱");
}
else {
  console.log("溫度錯誤");
}

三元運算子

除了以上兩種條件判斷外,還可運用功能相近的三元運算子。其結構由條件、問號、冒號所組成:

(條件) ? [值/式子A] : [值/式子B]

承上例,僅作選舉權年齡判斷時,以if else可以寫成:

if (age >= 20) {
	status = "可以投票";
} else {
	status = "不能投票";
}

若寫成三元運算子,則是:

let status = (age >= 20) ? "可以投票" : "不能投票";

如此這般,程式碼變得簡潔易看。


上一篇
Day 08 借箸代籌(2):自動轉型、運算子及其後
下一篇
Day-10 迴圈
系列文
追憶JS年華30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言