現代 JavaScript 程式設計教學:使用陣列 (Array)

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

    前言

    在 JavaScript 中,陣列有幾種使用方式:

    • 做為線性 (linear) 容器存取元素
    • 如同串列 (list) 般增減元素
    • 使用內建的高階函式操作陣列

    由於 JavaScript 的陣列其實是內建物件,所以陣列會附帶一些立即可用的函式。高階函式的部分牽涉到函式的使用方式,本文不討論這一部分。

    建立陣列

    使用陣列實字 [] 建立陣列是最簡單的方式:

    let arr = ["apple", "banana", "orange", "guava", "papaya"];
    

    也可以使用陣列建構函式 Array() 來建立陣列:

    let arr = new Array("apple", "banana", "orange", "guava", "papaya");
    

    在可讀性上陣列實字會比陣列建構子來得好,如果元素是已知的,用陣列實字較佳。

    如果想建立特定長度但元素為空的陣列可使用以下語法:

    let arr = new Array(5);
    

    存取陣列

    陣列使用數字為索引 (index),從零開始計算。參考以下例子:

    let arr = ["apple", "banana", "orange", "guava", "papaya"];
    
    assert(arr[0] === "apple");
    assert(arr[2] === "orange");
    assert(arr[4] === "papaya");
    
    // Home-made `assert`
    function assert(cond, msg) {
        if (!cond) {
            if (msg) {
                throw msg;
            }
            
            throw "Assertion failed";
        }
    }
    

    由於 JavaScript 的陣列物件存有陣列的長度 (見 Array.length),用 arr.length-1 可保證取得最後一個元素:

    let arr = ["apple", "banana", "orange", "guava", "papaya"];
    
    assert(arr[arr.length-1] === "papaya");
    
    // Home-made `assert`
    function assert(cond, msg) {
        if (!cond) {
            if (msg) {
                throw msg;
            }
            
            throw "Assertion failed";
        }
    }
    

    走訪陣列

    由於 JavaScript 的陣列存有長度的資訊,可使用計數器,以陣列長度為終止條件,來走訪陣列:

    let arr = ["apple", "banana", "orange", "guava", "papaya"];
    
    for (let i = 0; i < arr.length; i++) {
        console.log(arr[i]);
    }
    

    改動陣列元素

    陣列本身提供一些函式,可用來增減陣內的元素:

    poppushshiftunshift 的實例如下:

    let arr = ["apple", "banana", "orange", "guava", "papaya"];
    
    // arr: ["apple", "banana", "orange", "guava"]
    assert(arr.pop() === "papaya");
    
    // arr: ["banana", "orange", "guava"]
    assert(arr.shift() === "apple");
    assert(arr.length === 3);
    
    // arr: ["banana", "orange", "guava", "pineapple"]
    arr.push("pineapple");
    assert(arr[arr.length-1] === "pineapple");
    assert(arr.length === 4);
    
    // arr: ["pear","banana", "orange", "guava", "pineapple"]
    arr.unshift("pear");
    assert(arr[0] === "pear");
    assert(arr.length === 5);
    
    // Home-made `assert`
    function assert(cond, msg) {
        if (!cond) {
            if (msg) {
                throw msg;
            }
            
            throw "Assertion failed";
        }
    }
    

    splice 的使用方式略為複雜,使用方式如下:

    arr.splice(startIndex, [deleteCount[, item1, item2, item3, ...]])
    

    可分為三種情境:

    • arr.splice(startIndex):從 startIndex 後全部的元素皆移除
    • arr.splice(startIndex, deleteCount):從 startIndex 開始移除 deleteCount 個元素
    • arr.splice(startIndex, deleteCount, item1, item2, ...):從 startIndex 開始移除 deleteCount 個元素後再補入 item1item2 等元素

    以下是實例:

    let arr = ["apple", "banana", "orange", "guava", "papaya"];
    
    // arr: ["apple", "pineapple", "kiwi", "pear", "guava", "papaya"]
    arr.splice(1, 2, "pineapple", "kiwi", "pear");
    assert(arr.length === 6);
    assert(arr[1] === "pineapple");
    assert(arr[3] === "pear");
    assert(arr[5] === "papaya");
    
    // Home-made `assert`
    function assert(cond, msg) {
        if (!cond) {
            if (msg) {
                throw msg;
            }
            
            throw "Assertion failed";
        }
    }
    

    在本範例中,我們從索引值 1 開始更動元素,移除 2 個元素後再插入三個新元素。最後 arr 的長度為 6

    陣列可用的函式不只這些,讀者可到 MDN 網站上看 Array 的文件,有更多陣列相關的函式。

    【分享本文】
    Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email
    【追蹤新文章】
    Facebook Twitter Plurk