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

Facebook Twitter LinkedIn LINE Skype EverNote GMail Yahoo Email

前言

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

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

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

建立陣列

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

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

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

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

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

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

let arr = new Array(5);

存取陣列

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

/* Home-made assertion */
function assert(cond, msg) {
    if (!cond) {
        throw (msg ? msg : 'Assertion failed');
    }
}

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

assert(arr[0] === "apple");
assert(arr[2] === "orange");
assert(arr[4] === "papaya");

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

/* Home-made assertion */
function assert(cond, msg) {
    if (!cond) {
        throw (msg ? msg : 'Assertion failed');
    }
}

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

assert(arr[arr.length-1] === "papaya");

走訪陣列

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

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

for (let i = 0; i < arr.length; i++) {
    console.log(arr[i]);
}

此外,可以使用 JavaScript 內建的方法 forEach 來走訪陣列元素:

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

arr.forEach(function (elem) {
    console.log(elem);
});

這裡用到函數式程式設計的模式,forEach 方法接收回呼函式 (callback) 為參數,該回呼函式接收一個參數,該參數為陣列元素。

改動陣列元素

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

  • pop():從尾端移除元素
  • push():從尾端放入元素
  • shift():從頭端移除元素
  • unshift():從頭端放入元素
  • splice():從陣列中某一段移除或放入元素
  • reverse():反轉陣列元素的順序

poppushshiftunshift 的實例如下:

/* Home-made assertion */
function assert(cond, msg) {
    if (!cond) {
        throw (msg ? msg : 'Assertion failed');
    }
}

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);

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 等元素

以下是實例:

/* Home-made assertion */
function assert(cond, msg) {
    if (!cond) {
        throw (msg ? msg : 'Assertion failed');
    }
}

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");

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

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

關於作者

身為資訊領域碩士,美思認為開發應用程式的目的是為社會帶來價值。如果在這個過程中該軟體能成為永續經營的項目,那就是開發者和使用者雙贏的局面。

美思喜歡用開源技術來解決各式各樣的問題,但必要時對專有技術也不排斥。閒暇之餘,美思將所學寫成文章,放在這個網站上和大家分享。