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。