開放原始碼技術文件網 使用控制結構 (Control Structure)

最後修改日期為 JUN 9, 2019

在預設情形下,程式由上往下依序執行,透過控制流程,可以改變程式的執行流程,程式好像變聰明了。控制流程有兩類:

  • 選擇 (selection):依條件執行或不執行某段程式碼區塊,像 ifswitch
  • 迭代 (iteration):反覆執行某段程式碼區塊,像 whilefor

本文介紹 JavaScript 可用的控制流程。

虛值 (Falsy values)

JavaScript 將以下數值認定為 false

  • false
  • null
  • undefined
  • 0
  • NaN
  • '' (空的單引號字串)
  • "" (空的雙引號字串)

除了以上的虛值 (falsy values),其他的值認為 truthy。像是空陣列判定為 true

if ([]) {
    console.log("The array is empty");
}

在撰寫條件式時,要注意 falsy values 的判定方式,才不會寫出語法對但邏輯錯的程式。

if

if 在英文中是「如果」的意思,剛好大部分程式語言也拿 if 做為選擇性結構。以 JavaScript 撰寫 if 虛擬碼 (pseudocode) 如下:

if (condition 1) {
    // code block 1
} else if (condition 2) {
    // code block 2
} else {
    // code block 3
}

在以上虛擬碼中,共有三塊程式碼區塊,若符合 condition 1,則會進入 code block 1,執行完該區塊後就跳出整個 if 敘述;若不符合 condition 1,接著會判斷 condition 2,若符合,則執行 code block 2;若前述條件皆不符合,則執行 else 內的 code block 3。在 if 敘述中,else ifelse 皆為選擇性的,若不需要可省略。

以下是實例:

// Declare a random integer between -1 and 1.
let n = Math.floor(Math.random() * 3) - 1;

if (n > 0) {
    console.log("n is positive");
} else if (n < 0) {
    console.log("n is negative");
} else {
    console.log("n is zero");
}

在我們的例子中,為了增加一點變化性,會隨機產生 n,使得每次執行結果略有不同。

switch

switch 算是 if 的語法糖,目的是簡化 if 語句,JavaScript 保留 switch 主要是承襲 C 家族語言的傳統。switch 的虛擬碼如下:

switch(expression) {
    case m:
        // code block m
        break;
    case n:
        // code block n
        break;
    default:
        // default code block
}

switch 敘述中,expression 部分是一個值,根據該值而進入不同的程式碼區塊。若該值符合 m,則進入 code block m,執行完後跳出,若不符合 m,則繼續檢查下一個 case 的值;若全部的 case 值皆不符合,則執行 default code block 後跳出 switch 敘述。case 區塊可有一到多個,default 區塊可省略。

以下是實例:

switch (new Date().getDay()) {
    case 0:
    case 6:
        console.log("Weekend");
        break;
    case 5:
        console.log("Thank God It's Friday");
        break;
    case 3:
        console.log("Hump day");
        break;
    default:
        console.log("Week");
}

在本例中,我們建立一個新的臨時 Date 物件,取得目前系統的日 (day of week),再根據日的不同印出不同的字串。

while

while 可重覆執行某個程式碼區塊,直到不符合特定條件為止。寫成虛擬碼如下:

while (condition) {
    // Some code block
}

以下是一個簡單的實例:

let i = 10;

while (i > 0) {
    console.log(`Countdown ${i}`);
    
    i--; // Decrement i by 1.
}

另一種 do ... while 的虛擬碼如下:

do {
    // Some code block.
} while (condition)

do ... whilewhile 的差別在於即使 condition 為 false,仍然會執行一次 do 區塊。

因下程式因條件為 false,不會引發例外:

while (false) {
    throw "Something wrong";
}

但以下程式則會引發例外:

do {
    throw "Something wrong";
} while (false);

for

for 用於已知特定迭代次數的迴圈,在 JavaScript 的 for 迴圈有三種,一種是 C 風格的 for,另有兩種搭配物件使用的 for,本節僅介紹第一種。

C 風格 for 迴圈使用計數器,寫成虛擬碼如下:

for (counter; condition; iteration) {
    // some code block
}

如果改成 while 虛擬碼如下:

counter

while (condition) {
    // some code block
    
    change
}

已知迭代次數的話,通常用 for,反之則用 while

實例如下:

for (let i = 10; i > 0; i--) {
    console.log(`Countdown ${i}`);
}

// i remain undefined after this `for` loop.
if (typeof i !== 'undefined') {
    throw "It should be undefined";
}

在 ECMAScript 2016 後,建議用 let 取代 var 來宣告計數器,可避免汙染命名空間。

改變迴圈流程

除了用條件來控制迴圈外,JavaScript 額外提供兩個保留字 continuebreak,可以用來改變迴圈進行的流程。

continue

continue 的用途是跳過此次迭代剩下的指令,直接進入下一輪迭代。實例如下:

for (let i = 1; i <= 10; i++) {
    if (i % 2 !== 0) {
        continue;
    }

    console.log(`Countdown ${i}`);
}

執行此程式得到以下結果:

Countdown 2
Countdown 4
Countdown 6
Countdown 8
Countdown 10

break

break 的用途是略過剩下的迭代,直接跳出迴圈。實例如下:

for (let i = 1; i <= 10; i++) {
    if (i > 5) {
        break;
    }

    console.log(`Countdown ${i}`);
}

執行此程式得到以下結果:

Count 1
Count 2
Count 3
Count 4
Count 5
分享本文
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Yahoo
追蹤本站
Facebook Facebook Twitter