4-2 }C顗漱k

JavaScript 對陣列物件提供了很多相關的方法，列表如下：

方法說明
concat()傳回一個由兩個或兩個以上陣列並排而成的新陣列
join()傳回一個字串值，它是由陣列中的所有元素串連在一起所組成，並且用特定的分隔字元來分隔
pop()移除陣列的最後一個元素，並將它傳回
push()附加新元素到陣列尾部，並傳回陣列的新長度
reverse()傳回一個元素位置反轉的陣列
shift()移除陣列的第一個元素，並將它傳回
slice()傳回陣列的一個區段
splice()移除陣列中的元素，並依需要在原位插入新元素，然後傳回被刪除的元素
sort()傳回一個元素已排序過的陣列
toString()傳回一個物件（或陣列）的字串表示法
unshift()在陣列開始處插入指定的元素，並傳回此陣列

舉例來說，對於一個陣列，我們可用 sort() 來進行排序，或用 reverse() 來進行反排，範例如下：

Example（arraySort01.htm）：

上述範例的原始檔如下：

原始檔（arraySort01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>陣列的方法：sort() 和 reverse()</h2>
<hr>

<script src=listArray.js></script>
<script>
myArray = ["First", "3.1415926", "Third", 4];
document.writeln("<p>原來的陣列：<br>");
listArray(myArray, "myArray");
document.writeln("<p>排序後的陣列：<br>");
listArray(myArray.sort(), "myArray");
document.writeln("<p>反排後的陣列：<br>");
listArray(myArray.reverse(), "myArray");
</script>
<hr>
</body>
</html>

從上述範例可以看出，sort() 會先將數值轉成字串，再進行字串的排序。若要進行數值的排序，就必須定義一個比較函數，並將此比較函數送進 sort()，請見下列範例

Example（arraySort02.htm）：

上述範例的原始檔如下：

原始檔（arraySort02.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>陣列的方法：如何定義 sort() 的比較函數</h2>
<hr>

<script>
// 定義一個比較函數
function comparisonFunction(a, b){   
	return(a-b);
}
myArray = ["80", "9", "700", 40, 1, 5, 200];
document.write("原始陣列：" + myArray +"<br>")
document.write("依字串排序的結果：" + myArray.sort() +"<br>")
document.write("依數值排序的結果：" + myArray.sort(comparisonFunction) +"<br>")
</script>

<hr>
</body>
</html>

由此範例可知，只要我們定義了一個明確的比較函數，sort() 就會根據此函數來進行比較及排序。（另外，在上例中，當我們使用加號將陣列和字串並排時，JavaScript 會將陣列轉換成由逗號隔開的字串，便於並排。）

Hint
如果一個陣列的每一個元素都是數值，JavaScript 在執行 sort() 時，還是會依照字串來排序，這是特別要注意的地方。

有一些方法可用來增大或縮小 一個陣列，例如 pop()、push()、shift() 和 unshift()，請見下例：

Example（arrayPop01.htm）：

上述範例的原始檔如下：

原始檔（arrayPop01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>陣列的方法：pop(), push(), shift(), unshift()</h2>
<hr>

<script>
myPet = ["鼠", "牛", "虎", "兔"];
document.writeln("myPet = " + myPet + "<br>");
//測試 pop()
cmd = "popped = myPet.pop()";
eval(cmd);
document.writeln("<p>After 「" + cmd + "」：<br>");
document.writeln("myPet = " + myPet + "<br>");
document.writeln("poped = " + popped + "<br>");
//測試 push()
cmd = 'elementCount = myPet.push("龍", "蛇")';
eval(cmd);
document.writeln("<p>After 「" + cmd + "」：<br>");
document.writeln("myPet = " + myPet + "<br>");
document.writeln("elementCount = " + elementCount + "<br>");
//測試 shift()
cmd = "shifted = myPet.shift()";
eval(cmd);
document.writeln("<p>After 「" + cmd + "」：<br>");
document.writeln("myPet = " + myPet + "<br>");
document.writeln("shifted = " + shifted + "<br>");
//測試 unshift()
cmd = 'myPet.unshift("狗", "豬")';
eval(cmd);
document.writeln("<p>After 「" + cmd + "」：<br>");
document.writeln("myPet = " + myPet + "<br>");

</script>

<hr>
</body>
</html>

我們也可以使用 toString()（將矩陣轉成由逗點相連的字串）或 join()（將矩陣轉成由特定符號相連的字串）來將陣列轉成單一字串，範例如下：

Example（arrayJoin01.htm）：

上述範例的原始檔如下：

原始檔（arrayJoin01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>陣列的方法：toString() 和 join()</h2>
<hr>

<script>
myPet = ["鼠", "牛", "虎", "兔"];
document.writeln("myPet = " + myPet + "<br>");
document.writeln("myPet.toString() = " + myPet.toString() + "<br>");
document.writeln("myPet.join() = " + myPet.join() + "<br>");
document.writeln("myPet.join(', ') = " + myPet.join(', ') + "<br>");
document.writeln("myPet.join(' + ') = " + myPet.join(' + ') + "<br>");
</script>

<hr>
</body>
</html>

有上述範例可以看出，myPet.toString() 和 myPet.join() 得到的結果是一樣的。

另一個和 join() 功能相反的函數是 split()，可以將字串切開來，轉成陣列，此外，我們也可以使用 concat() 指令將兩個陣列連接起來，形成一個更大的陣列，範例如下：

Example（arrayConcat01.htm）：

上述範例的原始檔如下：

原始檔（arrayConcat01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>陣列的方法：split() 和 concat()</h2>
<hr>

<script src="listArray.js"></script>
<script>
str1="鍾倫、陳晴";
str2="陳江村、林政源、張永森";
array1=str1.split('、');	// 將字串拆成陣列
array2=str2.split('、');	// 將字串拆成陣列
document.writeln("Array 1:<br>");
listArray(array1, 'array1');
document.writeln("Array 2:<br>");
listArray(array2, 'array2');
document.writeln("<p>將上述兩個陣列並排的結果：<br>");
document.writeln("Array 3:<br>");
array3=array1.concat(array2);
listArray(array3, 'array3');
</script>

<hr>
</body>
</html>

對於內建的物件，我們可以使用 prototype 屬性來定義新的方法。例如，對於一個陣列物件，如果我們要定義一個新方法 max() 來傳回陣列中最大的值，可見下列範例：

Example（prototype01.htm）：

上述範例的原始檔如下：

原始檔（prototype01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>定義陣列的方法</h2>
<hr>

<script src=listArray.js></script>
<script>
function arrayMax( ){
	var i, max = this[0];
	for (i=1; i<this.length; i++)
		if (max<this[i])
			max=this[i];
	return(max);
}
Array.prototype.max = arrayMax;		// 定義 arrayMax 為陣列方法 max 所呼叫的函數
myArray = new Array(4, 9, 2, 1);
document.write("myArray 的元素：<br>");
listArray(myArray, "myArray");		// 列印陣列各個元素
document.write("myArray 的元素最大值：" + myArray.max());	// 列印陣列最大元素
</script>

<hr>
</body>
</html>

在上述範例中，請特別注意兩點：

下面這個範例，列出一個陣列的所有性質：

Example（arrayProp01.htm）：

上述範例的原始檔如下：

原始檔（arrayProp01.htm）：（灰色區域按兩下即可拷貝）
<html>
<head>
<meta HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=big5">
</head>

<body>
<h2 align=center>陣列的性質</h2>
<hr>

<script>
myArray = ["資訊系", "電機系", "材料系"];
// 列舉陣列中的所有屬性
for (prop in myArray)
	document.write("<br>myArray." + prop + " = " + myArray[prop]);
</script>

<hr>
</body>
</html>

在上述範例中，可以發覺 JavaScript 似乎把 0, 1, 2 當成是陣列物件的性質，但事實上，我們在取用陣列的元素時，還是必須使用 myArray[2] 或是 myArray["2"] 等，而不能使用 myArray.2，依此類推。

JavaScript 程式設計與應用：用於網頁用戶端