現代 [JavaScript] 程式設計教學：使用控制結構 (Control Structure)

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

• 選擇 (selection)：依條件執行或不執行某段程式碼區塊，像 if 和 switch 等
• 迭代 (iteration)：反覆執行某段程式碼區塊，像 while 和 for 等

本文介紹 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 if 和 else 皆為選擇性的，若不需要可省略。

以下是實例：

// 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 ... while 和 while 的差別在於即使 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 額外提供兩個保留字 continue 和 break，可以用來改變迴圈進行的流程。

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