程式語言教學誌 FB, YouTube: PYDOING: JavaScript 快速導覽

Array 物件 (object) 也就是陣列 (array) 物件，其內可容納任何其他物件或數值。建立物件可以利用建構子函數 (constructor function) ，例如

var atest = new Array("John", "Mary", "Bill");

這會是一個含有三個字串 (string) 物件的陣列。

如果建構子函數中不提供參數 (parameter) ，可由索引值指派元素 (element) 給陣列，例如

var atest = new Array();
atest[0] = "John";
atest[1] = "Mary";
atest[2] = "Bill";

也可以直接由字面常數 (literal) 建立陣列，例如

var atest = ["John", "Mary", "Bill"];

陣列建立後，元素可隨意更改，例如

var atest = ["John", "Mary", "Bill"];
atest[1] = 22; // ["John", 22, "Bill"]

atest 為陣列變數，這裡利用以中括號 [] 存取陣列元索引值，把索引值為 1 的元素改為整數 22 。由於陣列索引值是由 0 開始的，所以索引值 1 是第二個元素。

Array 的 length 屬性記錄陣列的元素個數

屬性	描述
length	記錄陣列的元素個數

另有以下常見的方法 (method)

方法	描述
toString()	回傳物件的字串形式
valueOf()	回傳物件的數值
concat([item1 [, item2 [, …]]])	連接各陣列
join(separator)	連接陣列中各個元素
pop()	移除陣列中最後一個元素，並回傳這個元素值
push([item1 [, item2 [, …]]])	將新元素加入到陣列的最後面，並回傳陣列的新長度
reverse()	倒轉陣列元素的順序
shift()	移除陣列中第一個元素，並回傳這個元素值
slice(start, end)	拆解陣列，並回傳索引值範圍的子陣列
sort(comparefn)	排序陣列中的元素，可提供排序函數為參數
splice(start, deleteCount [, item1[, item2[ , …]]])	加入或刪除元素
unshift([item1 [, item2 [, …]]])	將新元素加入到陣列的最前面，並回傳陣列的新長度

舉例示範如下

function run() {
    var c = document.getElementById("content");
    var n1 = document.createElement("p"); 
    var n2 = document.createElement("p"); 
    var n3 = document.createElement("p"); 
    var n4 = document.createElement("p");
    var n5 = document.createElement("p");
    var n6 = document.createElement("p");
    
    var t1 = [44, 33, 22];
    var t2 = t1.concat([55, 66]);
    var t3 = t2.pop();
    var t4 = t2[2];
    var t5 = t2.length;
    var t6 = t1.sort();
    
    n1.appendChild(document.createTextNode(t1));
    c.appendChild(n1);
    n2.appendChild(document.createTextNode(t2));
    c.appendChild(n2);
    n3.appendChild(document.createTextNode(t3));
    c.appendChild(n3);
    n4.appendChild(document.createTextNode(t4));
    c.appendChild(n4);
    n5.appendChild(document.createTextNode(t5));
    c.appendChild(n5);
    n6.appendChild(document.createTextNode(t6));
    c.appendChild(n6);
}


/* 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：array01.js
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 */

利用以下的 HTML 文件開啟

<html>

<head>
<title>JavaScript Demo</title>
<script src="array01.js" type="text/javascript"></script>
</head>

<body>
<input id="b" type="button" value="RUN" onclick="run();">
<div id="content"></div>
</body>

</html>

<!-- 《程式語言教學誌》的範例程式
     http://pydoing.blogspot.com/
     檔名：array01.html
     功能：示範 JavaScript 程式 
     作者：張凱慶
     時間：西元 2010 年 11 月 -->

執行結果如下