陣列

定義並存取陣列

命名

基本上其命名規則與變數,函式和物件相同:
  1. 名稱所用的字母,大小寫不同
  2. 名稱必須使用合法的字元:
  3. 避免使用保留字扣或其他物件名稱

定義一個陣列

定義一個陣列就像建立一個物件，例如： 
    var a_list = new Array("Thomas", "Roger", "Amber", "Jennifer" );

或更簡潔 

    var a_list = ["Thomas", "Roger", "Amber", "Jennifer" ];

存取陣列

<html>
<body>
<script language="JavaScript">
<!--
    var a_list = new Array("Thomas", "Roger", "Amber", "Jennifer" );
    document.write("The tallest student in class is " + a_list[0]);
//-->
</script>
</body>
</html>

看效果

其他定義一個陣列

先分配空間,再指派數值

    var a_list = new Array(4);

    a_list[2] = "Amber";

分配空間並指派數值

    var a_list = new Array(4);
    a_list[0] = "Thomas";
    a_list[1] = "Roger";
    a_list[2] = "Amber";
    a_list[3] = "Jennifer";

定義陣列名稱,不加參數

    var a_list = new Array();
	...
    a_list[29] = "Amber";

Array 物件的屬性與方法

屬性

建構屬性

<script language="JavaScript">
<!--
    var a_list = new Array(4);
    window.alert(a_list.constructor);
//-->
</script>

看效果

index 和 input 屬性

與正規運算式相關

length 屬性

    var a_list = new Array(4);
    a_list[0] = "Thomas";
    a_list[1] = "Roger";
    a_list[2] = "Amber";
    a_list[3] = "Jennifer";
    window.alert("This array has " + a_list.length);

prototype 屬性

prototype 屬性允許在一物件中加入屬性與方法, 例如 
<script language="JavaScript">
<!--
    Array.prototype.attitude = "cool";
    var a_list = new Array(4);
    window.alert("This place is " + a_list.attitude);
//-->
</script>
透過加入屬性的方式, 每個網頁上的陣列都有這個新屬性, 例如 
<script language="JavaScript">
<!--
    Array.prototype.attitude = "cool";
    var a_list = new Array();
    window.alert("This place is " + a_list.attitude);
    var fish = new Array();
    fish.attitude = "wide eyed";
    window.alert("Fish are " + fish.attitude);
//-->
</script>

方法

concat()方法

concat()方法用以組合兩個或更多的陣列元素 
<script language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples");
    var veggies = new Array("corn", "peas");
    var fruits_and_veggies = fruits.concat(veggies);
//-->
</script>

join()方法

join()方法用以將一個陣列的元素組成一單一字串, 例如 
    arr.join([separator])
separator 用來隔開陣列中每個元素的字串。如果未傳入此參數，陣列中的元素將預設用英文逗號（「,」）隔開。如果 separator 是空字串，合併後，元素間不會有任何字元。 一個合併所有陣列元素的字串。假如 arr.length 為 0，將回傳空字串。 
<html>
<body>
<script language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples", "peas");
    var fruits_string = fruits.join();
    document.write("The new fruit string is " + fruits_string);
//-->
</script>
</body>
</html>

看效果

假如要用其他字元來分隔元素, 可以在參數中規定, 如 

<html>
<body>
<script language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples", "peas");
    var fruits_string = fruits.join(":");
    document.write("The new fruit string is " + fruits_string);
//-->
</script>
</body>
</html>

看效果

pop()方法

pop()方法用以移除陣列的最後一個元素 
<script language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples", "pears");
    var picked_fruit = fruits.pop();
    document.write("You picked my " + picked_fruit);
//-->
</script>

看效果

push()方法

push()方法用以加入元素到陣列的後頭, 回傳陣列的新長度值。 
<script language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples");
    var who_knows = fruits.push("pears", "grapes");
    document.write("The method returned " + who_knows);
    document.write("The fruits now are " + fruits.join());
//-->
</script>

看效果

reverse()方法

reverse()方法用以反轉陣列的順序 
    var fruits = new Array("oranges", "apples", "pears");
    fruits.reverse();

shift()方法

shift()方法用以移除陣列的第一個元素 
<script language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples", "pears");
    var picked_fruit = fruits.shift();
    window.alert("You picked my " + picked_fruit);
//-->
</script>

看效果

unshift()方法

unshift()方法用以加入元素到陣列的前頭 
    var fruits = new Array("oranges", "apples");
    fruits.unshift("pears", "grapes");

看效果

slice()方法

slice(begin, end) 方法會回傳一個新陣列物件，為原陣列選擇之 begin 至 end （不含 end ）部分的淺拷貝（shallow copy）。而原本的陣列將不會被修改。

begin 為開始的索引值，負數代表從後面開始算起，-1為倒數第一個元素。 end 為結束的索引值，沒有填寫時則得到原陣列中的所有元素。

    var fruits = new Array("oranges", "apples", "pears", "grapes");
    var some_fruits = fruits.slice(1,3);

看效果

splice()方法

splice()方法用以移除或增加陣列中的元素，回傳被刪除的項目。 
	  array.splice(start)
	  array.splice(start, deleteCount)
	  array.splice(start, deleteCount, item1, item2, ...)

start 增加/刪除項目的位置，負數代表從後方算起。
deleteCount 刪除的個數，如為0則不會刪除。
item… 添加的新項目。

會改變原值 

    var fruits = new Array("oranges", "apples", "pears", "grapes");
    var some_fruits = fruits.splice(2,1);

    var fruits = new Array("oranges", "apples", "pears", "grapes");
    var some_fruits = fruits.splice(2,2);

    var fruits = new Array("oranges", "apples", "pears", "grapes");
    var some_fruits = fruits.splice(2,1, "watermelons");

    var fruits = new Array("oranges", "apples", "pears", "grapes");
    var some_fruits = fruits.splice(2,0, "watermelons", "plums");

看效果

sort()方法

sort()方法將陣列的元素依字母的順序排序 
    var fruits = new Array("oranges", "apples", "pears", "grapes");
    fruits.sort();

看效果

陣列與迴圈

有多個方法不用迴圈也可以達成工作，詳見陣列處理方法。

建立陣列元素

使用迴圈輸入陣列的內容 
<script language="JavaScript">
<!--
    var a_list = new Array(4);
    for(count=0; count<4; count++)
    {
    	a_list[count]=window.prompt("Enter a name","");
    }
//-->
</script>
迴圈的另一用法是重覆對陣列元素運算, 例如 
<script language="JavaScript">
<!--
    var even_nums = new Array(10);
    for(count=0; count<20; count+=2)
    {
    	var a_count=0;
    	even_nums[a_count]=count+2;
    	document.write(even_nums[a_count] + "
");
	a_count+=1;
    }
//-->
</script>

或使用 forEach()和callback函式，改寫如下: 

<script language=<font color="#008000">"JavaScript"</font>>
<!--
    var even_nums = [2,5,6,8];
    document.write("Input: " + even_nums);
    even_nums.forEach(function (value, index, array)
    {
        array[index] += 2;
    });
    document.write("<p>Output: " + even_nums);
//-->
</script>
若要保持原陣列不變，可使用其他陣列處理方法的map()。

看效果

瀏覽陣列

<html>
<head>
<script language="JavaScript">
<!--
    var a_list = new Array(4);
    a_list[0] = "Thomas";
    a_list[1] = "Roger";
    a_list[2] = "Amber";
    a_list[3] = "Jennifer";
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
    for(count=0; count<4; count++)
    {
    	document.write(a_list[count] + "<br>");
    }
//-->
</script>
</body>
</html>
假如陣列的長度不是固定的, 迴圈的終止測試可利用陣列的 length 屬性, 例如 
<html>
<head>
<script language="JavaScript">
<!--
    var a_list = new Array();
    a_list[0] = "Thomas";
    a_list[1] = "Roger";
    a_list[2] = "Amber";
    a_list[3] = "Jennifer";
    a_list[4] = "Pat";
    a_list[5] = "Kelly";
    a_list[6] = "Jerry";
//    a_list.sort();
//-->
</script>
</head>
<body>
<script language="JavaScript">
<!--
    for(count=0; count<a_list.length; count++)
    {
    	document.write(a_list[count] + "<br>");
    }
//-->
</script>
</body>
</html>

例: 看效果

關聯陣列

定義關聯陣列

    var a_list = new Array();
    a_list["tall"] = "Thomas";
    a_list["cool"] = "Roger";
    a_list["clever"] = "Amber";
    a_list["attentive"] = "Jennifer";

存取關聯陣列

<html>
<head>
<script language="JavaScript">
<!--
    var a_list = new Array();
    a_list["tall"] = "Thomas";
    a_list["cool"] = "Roger";
    a_list["clever"] = "Amber";
    a_list["attentive"] = "Jennifer";
//-->
</script>
</head>
<body>
<h2>Student Names</h2>
<script language="JavaScript">
<!--
    document.write("The tall one is " + a_list["tall"] + "<br>");
    document.write("The cool one is " + a_list["cool"] + "<br>");
    document.write("The clever one is " + a_list["clever"] + "<br>");
    document.write("The attentive one is " + a_list["attentive"] + "<br>");
//-->
</script>
</body>
</html>

例: 看效果