JavaScript 中數組實用淺析

本文適用於HTML、ASP 中的 JavaScript 腳本代碼。代碼以 HTML 中的 JS 爲例，若是在 ASP 中，請將 document.write 改成 Response.Write 便可。

小貼士

編寫 JS 最好的方式就是將代碼存爲.js的獨立文件，並在 html 文檔最後 </body> 標籤以前放置 <script> 標籤，並把它的 src 屬性指向該文件。

數組 (array) 是一種能夠存儲一組信息的變量，即和對象同樣是數值的集合，數組能夠包含任何類型數據。

數組的建立

能夠使用構造函數 Array() 來建立數組，一旦建立好數組，就能夠輕鬆給數組的任何元素賦值，能夠把任何值混合存儲在數組中，以下代碼：

//建立包含4個元素的數組myArray1
document.write("<h3>建立包含4個元素的數組 myArray1 </h3>");
var myArray1 = new Array(4); 
document.write("<h3>爲 myArray1 進行賦值，沒有賦值的顯示 undefined</h3>");
myArray1[0] = 1.2;
myArray1[2] = "JavaScript";
myArray1[3] = true;
//遍歷全部myArray1數組元素
for(var i=0; i<myArray1.length; i++) {
    document.write("myArray1[" + i + "] = " + myArray1[i] + "<br>");    
}
document.write("<hr>");

//建立一個空元素的數組
document.write("<h3>建立空元素的數組 myArray2 </h3>");
var myArray2 = new Array();
document.write("<h3>爲 myArray2 進行賦值，沒有賦值的顯示 undefined</h3>");
myArray2[0] = {x:1, y:3};
myArray2[1] = "JS";
myArray2[2] = false;
//遍歷全部myArray2數組元素
for(var j=0; j<myArray2.length; j++) {
    document.write("myArray2[" + j + "] = " + myArray2[j] + "<br>");    
}

在 firefox 瀏覽器中預覽後顯示以下：

數組直接量

JS 還定義了建立並初始化數組的直接量語法。數組直接量是一個封閉在方括號中的序列，序列中的元素由逗號分隔，括號內的值將被依次賦給數組元素，下標從 0 開始。

上面的數組的建立都以用如下代碼實現：

//建立包含4個元素的數組myArray1
document.write("<h3>建立包含4個元素的數組 myArray1 </h3>");
document.write("<h3>爲 myArray1 進行賦值，沒有賦值的顯示 undefined</h3>");
//其中下標爲1的元素沒有賦值
var myArray1 = [1.2, , "JavaScript", true];

//遍歷全部myArray1數組元素
for(var i=0; i<myArray1.length; i++) {
    document.write("myArray1[" + i + "] = " + myArray1[i] + "<br>");    
}
document.write("<hr>");

//建立一個空元素的數組
document.write("<h3>建立空元素的數組 myArray2 </h3>");
document.write("<h3>爲 myArray2 進行賦值，沒有賦值的顯示 undefined</h3>");
var myArray2 = [{x:1, y:3}, "JS", false];
//遍歷全部myArray2數組元素
for(var j=0; j<myArray2.length; j++) {
    document.write("myArray2[" + j + "] = " + myArray2[j] + "<br>");    
}

數組直接量中的元素也能夠是任意表達式。數組直接量也可被嵌套。

var myArray2 = [[1, 2, 3], [4, 5, 6]];
document.write(myArray2[1][1]); 
//myArray2[1][1] 值爲 5

數組元素的添加、刪除

數組擁有 length 屬性，表示數組元素的個數，myArray[myArray.length – 1] 表明數組的最後一項，在數組末尾添加元素使用 myArray[myArray.length] 賦值，或者使用 myArray.push 方法。

在數組開頭添加元素使用 myArray.unshift 方法。

從數組中刪除元素使用 myArray.pop() 或者 myArray.shift() 方法。

具體的使用詳見下面的代碼範例中：

function Bianli(num) {
    for(var i=0; i<num.length; i++) {
        document.write("numbers[" + i + "] = " + num[i] + "<br>");
    }
    document.write("<hr>");    
}

document.write("<h3>數組元素的添加、刪除應用示例</h3>");
var numbers = [2, 3];

//遍歷數組numbers全部元素
Bianli(numbers);

document.write("numbers[numbers.length - 1] 的值爲 " + numbers[numbers.length - 1]); 
//顯示最後一個元素值爲 6

document.write("<h4>數組末尾添加元素4, 5, 6</h4>");
numbers.push(4, 5);
numbers[numbers.length] = 6;

Bianli(numbers);

document.write("<h4>數組開頭添加元素0, 1 </h4>");
numbers.unshift(0, 1);
Bianli(numbers);

document.write("<h4>從數組中刪除第一個元素</h4>");
numbers.shift();
Bianli(numbers);

document.write("<h4>從數組中刪除最後一個元素</h4>");
numbers.pop();
Bianli(numbers);

效果以下：

在數組中間添加元素使用 myArray.splice 方法。

function Bianli(num) {
    for(var i=0; i<num.length; i++) {
        document.write("numbers[" + i + "] = " + num[i] + "<br>");
    }
    document.write("<hr>");    
}

document.write("<h3>數組元素中間元素刪除與添加</h3>");
var numbers = ["One", "Two", "Three", "Four", "Five"];

Bianli(numbers);

document.write("<h4>刪除其中的Two, Three元素</h4>");
numbers.splice(1, 2);
Bianli(numbers);

document.write("<h4>在One 後添加 Two, Three元素</h4>");
numbers.splice(1, 0, "Two", "Three");
Bianli(numbers);

預覽後效果以下：

以上就是本人一點總結，有問題歡迎你們指正。