JavaScript1.5 陣列的操作(Working with Arrays)

陣列是一個已排序之值的序列。JS 並不像其它的語言一樣，有著明確的陣列資料類型，不過，它提供了可以直接被實體化(Instantiated)的 Array 物件，或者使用陣列實字(Array Literal)來標記。

陣列物件有各種不同的方式來管理陣列，像是 joining、reversing 與 sorting。它也有一個屬性是用來判斷陣列的長度。JS 也提供了有用的陣列實字語法來建立這些物件。

建立陣列(Creating an array)

什麼是陣列呢？就如同在這篇文章中所言，陣列為一個有序之值的集合。

我們可以把把陣列想像為一個大容器，在大容器中存放著依照編號來排序的小盒子，而我們的資料就存放在這些小盒子中。

右邊是一個簡單的陣列示意圖。在圖中，我們以陣列實字建立了一個名為 myArr 的陣列。在 [ 與 ] 中的每個值，稱之為陣列元素(element)，有多個陣列元素的話，以逗號來分隔。而在陣列中的每個元素都有其相對應的索引值(index)。

所以，該圖中的 myArr 陣列共有四個陣列元素，分別為字串 Toyota、Suzuki、Mazda 與 Honda。其所對應由左至右的索引值(從 0 開始)分別為 [0]、[1]、[2] 與 [3]。

var myArr = ["Toyota", "Suzuki", "Mazda", "Honda"];
document.write(myArr.length);	//陣列長度為 4
document.write(myArr[0]);	//取得索引值為 0 的元素，結果顯示 Toyota
document.write(myArr[1]);	//取得索引值為 1 的元素，結果顯示 Suzuki
document.write(myArr[2]);	//取得索引值為 2 的元素，結果顯示 Mazda
document.write(myArr[3]);	//取得索引值為 3 的元素，結果顯示 Honda

陣列中的值(陣列元素)除了字串外，也可以是其它資料型態的值，例如數值、各式的表達式(運算式)、物件實字等等。

var myArr = [];			//沒有陣列元素的空陣列
var myArr = [5, 2, 9];			//有 3 個陣列元素的陣列
var myArr = [5, "abc", true, c + d];	//有 4 個陣列元素的陣列

陣列可以使用任一實字語法來建立(通常的建議)或者是以陣列建構式函式(因為具有相同的行為，也許也可稱之為函式)來建立：

var colors = ["Red", "Green", "Blue"];			//使用陣列實字建立
var colors = new Array("Red", "Green", "Blue");	//使用 Array() 物件(內建的建構式)

陣列有一個長度屬性 length，這個屬性是用來提供存取陣列的長度。假如您使用如上述的範例來初始化一個物件的話，其陣列的長度將會是 3：

alert(colors.length);	// 長度為 3

當陣列被建立的時候，如果您預期知道您的陣列長度的話，您將可以傳遞陣列長度至該陣列的建構式函式中：

var fiveItems = new Array(5);

定義一個明確的陣列長度並不會影響任何實際的陣列容量，它唯一的影響將使新陣列的 length 屬性成為所指定之值。(陣列本身並沒有屬性的索引值小於所提供的值，例如 0 在 fiveitems 是 false。)很少使用這種變數的建構式函式。

陣列元素的操作(Working with array elements)

您可以藉由陣列所指派的值到其本身陣列的各個元素中。更詳細實體化的方法，如下範例所示：

var colors = [];      // 一個空陣列
print(colors.length); // 長度 0

colors[0] = 'Red';
colors[1] = 'Green';
colors[2] = 'Blue';
print(colors.length); // 長度 3

將元素追加到陣列結尾的常見用語是使用 array.length 作為索引：

colors[colors.length] = 'Orange';

array.push() 可以被使用於相同的效果上：

colors.push('Purple');

陣列的元素是依其索引值來做存取的。陣列的索引值是基於 0，也就是說在陣列當中的第一個元素其索引值是 0：

var red = colors[0];

各種陣列的方法可以使用其它「陣列的方式」來存取元素。例如，pop() 方法可以在陣列中移除與回傳最後一個元素：

var lastElement = colors.pop(); //colors 移除了最後一個元素

※往後還會繼續詳談到關於陣列可以使用的一些方法(Methods)。

瞭解陣列長度(Understanding length)

在實作的層級上，JS 的陣列實際上是儲存著其元素，然後使用陣列索引作為其屬性名稱，就如同標準物件的屬性。length 屬性則一個特殊的屬性，它總是回傳一個超過儲存於陣列中的最大索引值(length 屬性的值，永遠都比陣列的最大索引值還大 1)：

var cats = [];
cats[30] = ['Dusty'];
print(cats.length);	// 長度 31

您也可以指派到 length 屬性。寫一個短於儲存之項目數的值，而這個值將截斷該陣列。寫入 0 的話，則會清空該陣列中的元素：

var cats = ['Dusty', 'Misty', 'Twiggy'];
print(cats.length);	// 3

cats.length = 2;
print(cats);		// 顯示 "Dusty, Misty" - Twiggy 已經被移除

cats.length = 0;
print(cats);		// 顯示 nothing; 這個 cats 陣列是空的

重複的陣列(Iterating over arrays)

常見的操作是重複的以某種方式來處理陣列之中的每個值。如果要執行這項操作最簡單的方法如下所示：

var colors = ['red', 'green', 'blue'];
for (var i = 0; i < colors.length; i++) {
	alert(colors[i]);
}

假如您知道在您的陣列中沒有任何元素被轉換為在布林值的 false，並且如果您的陣列只包含 DOM 節點，您可以使用如範例所述之更有效率的用法：

var divs = document.getElementsByTagName('div');
for (var i = 0, div; div = divs[i]; i++) {
	/* 以某種方式處理 div */
}

這可以避免在檢查陣列長度時的額外負擔，並確保 div 變數是重新指派到每次迴圈當前的項目來增加其便利。

陣列的方法(Array methods)

陣列物件提供了以下的幾種方法(methods)：

請參閱 » Core Object – 陣列物件(Array Object)

二維陣列(Two-Dimensional Arrays)

以下的程式碼建立了一個二維陣列。

var a = [];
for (i = 0; i < 4; i++) {
	a[i] = [];
	for (j = 0; j < 4; j++) {
		a[i][j] = "[" + i + ", " + j + "]";
	}
}

本範例建立了陣列與如下的資料列：

Row 0: [0,0][0,1][0,2][0,3]
Row 1: [1,0][1,1][1,2][1,3]
Row 2: [2,0][2,1][2,2][2,3]
Row 3: [3,0][3,1][3,2][3,3]

文章分類

文章標籤