JavaScript 快速入門（9/10）－陣列

陣列是初學者一開始必須瞭解的 JavaScript 內建物件，它提供了某些專屬功能，用來儲存管理一群的資料，並且透過數字索引進行存取。你可以透過 new 關鍵字搭配 Array 物件名稱建立空的陣列，語法如下：

var a= [ ] ;

接下來的兩行程式碼效果完全相同。

var a = new Array();
var a = [] ;

我們也可以建立預先儲存六個數字（或是任何數量的其它物件）的陣列物件如下：

var a=[4,5,6,7,8,9] ;

當你如此建立一個陣列物件之後，可以根據資料在其中的位置，指定對應的索引值將其取出，以此物件為例，索引值的起始值是 0 ，第一個位置的數值 4 ，其索引值為 0 ，第二個位置的數值為 5 ，其索引值為 1 ，依此類推，程式碼如下：

a[0]    // 取出 4
a[1]    // 取出 5

你也可以透過索引，修改其中所儲存的值，例如以下這一行程式碼：

a[0]=100 ；

這一行將其中第 0 個索引位置的陣列值修改為 100 。陣列是非常重要的資料結構，JavaScript針對陣列的操作，內建了一個具陣列運算功能的 Array 物件，當我們建立一個陣列物件，例如上述的 a ，這個物件便會自動對應至 Array ，因此我們可以直接使用此物件的功能來操作陣列。例如以下這一行程式碼：

a.length

其中引用 length 這個屬性，可以取得目前陣列中所儲存的物件數量，其回傳值為 6 ，表示其中儲存了六個元素。除了上述的 leght 屬性，Array 提供了大量的方法，支援陣列元素的操作，包括刪除、新增、插入，甚至合併等等。

》巡覽陣列元素

陣列支援巡覽 for 迴圈的巡覽操作，考慮以下的陣列：

var a = [1, 2, 3, 4, 5, 6, 7, 8, 9, 0];

針對陣列a 的內容，我們可以利用以下的語法，將陣列中的元素逐一取出：

for (var i = 0; i < a.length; i++) {
 // a[i] 取出位置索引 i 的元素
}

由於陣列元素的索引從 0 開始，因此 i 必須小於 a.length 屬性值，如此能正確回傳所有的元素。另外一個 for-in 語法同樣可以達到相同的效果如下：

for (e in a) {
    console.log(e);
}

語法相較於 for 簡潔，並直接回傳索引值。以下是一個範例：

<!DOCTYPE html>
<html>
<head> 
    <title>示範 for 迴圈</title>
    <script>
        var msg = '';
        var a = ['A', 'B', 'C', 'X', 'Y', 'Z', 'Q', 'W', 'E', 'R'];
        for (i = 0; i < 10; i++) {
            msg += a[i] + ',';
        }
        msg += '\n';
        for (i in a) {
            msg+=i+',' ;
        }
        msg += '\n';
        for (i in a) {
            msg +=a[ i] + ',';           
        }
        console.log(msg);
    </script>
</head>
<body>

</body>
</html>

其中預先配置一個陣列物件，其中儲存了十個元素，接下來逐一利用 for 迴圈，將其中的值取出，為了檢視 for/in 迴圈的效果，這裡執行了兩次 for/in 迴圈，其中第一次取出其索引鍵值，第二次則是透過索引取出陣列元素。

A,B,C,X,Y,Z,Q,W,E,R,
0,1,2,3,4,5,6,7,8,9,
A,B,C,X,Y,Z,Q,W,E,R,

如果沒有特別指定，陣列索引是從 0開始遞增，因此在這個輸出結果中，我們看到 for/in 所取出的索引值是 0~9 ，現在考慮以下的程式碼：

var x = [];
x[0] = 100;
x[3] = 'aaa';
x[5] = 'HELLO';

其中定義一個空的陣列，然後依序加入三個新值，分別設定儲存至 0 、3與 5 等三個索引位置，接下來利用 for/in 迴圈巡覽如下：

for (i in x) {
console.log(i);
}

取出的 i 值將會是 0、3與5。

JavaScript 快速入門（9/10）－ 陣列

》巡覽陣列元素

JavaScript 快速入門（9/10）－陣列