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

【分享本文】
Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

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

    • 選擇 (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; change) {
        // 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 Email
    【追蹤新文章】
    Facebook Twitter Plurk