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

前言

在 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()：反轉陣列元素的順序

pop、push、shift、unshift 的實例如下：

/* 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 個元素後再補入 item1、item2 等元素

以下是實例：

/* 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 的文件，有更多陣列相關的函式。