陣列

定義並存取陣列

命名

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

定義一個陣列

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

存取陣列


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

範例

Html Source Browser Display

其他定義一個陣列

先分配空間,再指派數值
    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>

    var fruits = new Array("oranges", "apples");
    var veggies = new Array("corn", "peas");
    var fruits_and_veggies = veggies.concat(fruits);

    var fruits = new Array("oranges", "apples");
    var veggies = new Array("corn", "peas");
    var meat = new Array("fish", "chicken");
    var foods = fruits.concat(veggies, meat);
join()方法
join()方法用以將一個陣列的元素組成一單一字串, 例如 

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples", "peas");
    var fruits_string = fruits.join();
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
    document.write("The new fruit string is " + fruits_string);
//-->
</SCRIPT>
</BODY>
</HTML>
Example

範例

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

<HTML>
<HEAD>
<SCRIPT language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples", "peas");
    var fruits_string = fruits.join(":");
//-->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT language="JavaScript">
<!--
    document.write("The new fruit string is " + fruits_string);
//-->
</SCRIPT>
</BODY>
</HTML>
Example

範例

Html Source Browser Display
pop()方法
pop()方法用以移除陣列的最後一個元素 
<SCRIPT language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples", "pears");
    var picked_fruit = fruits.pop();
    window.alert("You picked my " + picked_fruit);
//-->
</SCRIPT>
push()方法
push()方法用以加入元素到陣列的後頭, 回傳陣列的新長度值。 
<SCRIPT language="JavaScript">
<!--
    var fruits = new Array("oranges", "apples");
    var who_knows = fruits.push("pears", "grapes");
    window.alert("The method returned " + who_knows);
    // window.alert("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()方法用以移除陣列中指定的一部分 
    var fruits = new Array("oranges", "apples", "pears", "grapes");
    var some_fruits = fruits.slice(1,3);
splice()方法
splice()方法用以移除或置換陣列中的元素 
    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>

瀏覽陣列

<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>
Example

範例

Html Source Browser Display

關聯陣列

定義關聯陣列

    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>
Example

範例

Html Source Browser Display

Student Names