萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> JavaScript之數組(Array)詳解

JavaScript之數組(Array)詳解

 ECMAScript的數組與其他語言中的數組有著相當大的區別。雖然ECMAScript中的數組也是有序列表,但是它數組你的每一項可以保存任何類型的數據。ECMAScript數組的大小是可以動態調整的。

創建數組的基本方式有兩種。第一種是使用Array構造函數,如下所示:

復制代碼 代碼如下:
var colors = new Array();


如果知道數組要保存的項目數量,也可以給構造函數傳遞參數,而該參數會自動變成length屬性的值,如下:

復制代碼 代碼如下:
var colors = new Array(20);


也可以向Array構造函數中傳遞數組中應包含的項,如下代碼所示:

復制代碼 代碼如下:
var colors = new Array("red","blue");


另外,使用Array構造函數時也可以省略new操作符,如下所示:

復制代碼 代碼如下:
var colors = Array(20);


創建數組的第二種方式是使用數組字面量表示法。數組字面量由一對包含數組項的方括號表示,多個數組項之間用逗號隔開,如下所示:

復制代碼 代碼如下:
var color = ["red","blue"];
var names = [];
var values = [1,2,]//IE8及之前3項,其他2項,不建議使用


與對象一樣,在使用數字字面量表示法時,也不會調用Array的構造函數。
在讀取和設置數組的值時,要使用方括號並提供相應值的基於0的數字索引,如下所示:

復制代碼 代碼如下:
var colors = ["red","blue"]; //定義數組
alert(colors[0]); //red
colors[1] = "black" //修改第2項
colors[2] = "brown" //新增第3


數組的項數保存在其length屬性中,這個屬性始終會返回0或更大的數字,如下所示:

復制代碼 代碼如下:
var colors = ["red","blue"]; //定義數組
var names=[];
alert(colors.length); //3
alert(names.length) //0


值得注意的是,數組的length值不是只讀的。因此,通過設置此值,可以從數組的末尾移出項或向數組添加項,如下:

復制代碼 代碼如下:
var colors = ["red","blue"];
colors.length = 1;
alert(colors[1]); //undefined


利用length屬性也可以方便的向數組末尾添加數據:

復制代碼 代碼如下:
var colors = ["red","blue"];
colors[colors.length] = "black"; //在位置2新增
colors[colors.length] = "brown"; //在位置3新增

 

1、檢測數組

對於一個網頁或一個全局作用域而言,使用instanceof操作符可以做到:

復制代碼 代碼如下:
if(value instanceof Array){
// 執行操作
}


instanceof操作符局限性在於全局作用域,如果網頁包含多個框架,就存在兩個以上的全局執行環境。為了解決這個問題,ECMAScript5新增了Array.isArray()方法,使用如下:

復制代碼 代碼如下:
if(Array.isArray(value)){
// 執行操作
}

 

2、轉化方法
調用數組的toString()方法會返回由數組中每個值的字符串形式拼接而成的一個以逗號分隔的字符串。而調用valueOf()返回還是數組。如下所示:

復制代碼 代碼如下:
var colors = ['red', 'blue', 'green'];
alert(colors.toString()); //red,blue,green
alert(colors.valueOf()); //red,blue,green
alert(colors) //red,blue,green


數組繼承的toLocalString()、tiString()和valueOf()方法,在默認情況下都會以逗號分隔符的字符串形式返回數組項。而如果使用join()方法,則可以使用不同的分隔符來構建這個字符串。join()方法只接受一個參數,即用作分隔符的字符串,如下所示:

復制代碼 代碼如下:
var colors = ['red', 'blue', 'green'];
alert(colors.join(',')); //red,blue,green
alert(colors.join('|')); //red|blue|green


如果數組中的某一項值為null或者undefied,那麼該值在join()、toLocalString()、tiString()和valueOf()方法返回結果以空字符串表示。

 

3、棧方法

Javascript專門為數組提供了push()和pop()操作,以便實現類似棧的行為。

push()方法可以接收任意數量的參數,把他們逐個添加到數組末尾,並返回修改後數組的長度。pop()方法則從數組末尾溢出最後一項,減少數組的length值,然後返回移出的項。

 

復制代碼 代碼如下:
var colors = new Array(); //定義數組
var count = colors.push("red", "blue"); //壓入兩項
alert(count); //2
count = colors.push("black"); //壓入另一項
alert(count); //3
var item = colors.pop(); //彈出最後一項
alert(item); //"black"
alert(colors.length); //2

 

4、隊列方法

棧數據結構的訪問規則是LIFO(後進先出),而隊列的訪問規則是FIFO(先進先出)。隊列在列表末端添加項,在前端移出項。

shift()方法能夠移除數組中的第一項,並返回該項,數組的length-1。結合push()和shift()方法,可以像使用隊列一樣使用數組,如下所示:

復制代碼 代碼如下:
var colors = new Array();
var count = colors.push("red", "blue");
count = colors.push("black");
alert(count);
var item = colors.shift(); //取得第一項
alert(item); //"red"
alert(color.length); //2

 

ECMAScript還為數組提供了unshift()方法。unshift()和shift()方法用途相反:它在數組前端添加任意個項並返回新數組的長度。因此,同時使用unshift()和shift()方法,可以從相反方向來模擬隊列,即在數組前端添加新項,從數組末端移出項,如下所示:

復制代碼 代碼如下:
var colors = new Array();
var count = colors.push("red", "green");
alert(count); //2
count = colors.unshift("black"); //推入另一項
alert(count); //3
var item = colors.pop(); //取得最後一項
alert(item) //green
alert(colors.length) //2

 

5、重排序方法
數組中已經存在兩個可以直接用來重排序的方法:reverse()和sort()。reverse()方法會按照反轉數組項的排序。

復制代碼 代碼如下:
var values = [2, 1, 3, 4, 5];
values.reverse();
alert(values); //5,4,3,2,1


默認情況下,sort()方法按照升序排列數組項,調用每一項的toString()方法,比較字符串,以確定如何排序。即使數組中的每一項都是數值,sort()方法比較的都是字符串。

復制代碼 代碼如下:
var values = [12, 11, 3, 4, 5];
values.sort();
alert(values); //12,11,3,4,5


我們可以通過一個比較函數當作參數傳遞給sort()方法。如下:

復制代碼 代碼如下:
function compare(value1, value2) {
if (value1 < value2) {
return -1
} else if (value1 > value2) {
return 1
} else {
return 0
}
}
var values = [0, 1, 5, 10, 15];
values.sort(compare);
alert(values); //0,1,5,10,15

 

6、操作方法
ECMAScript為操作在數組中提供了很多方法。其中,concat()方法可以基於當前數組中的所有項創建一個新數組。

復制代碼 代碼如下:
var colors = ["red", "green", "blue"];
var colors2 = colors.concat("yellow", ["black", "brown"]);
alert(colors); //red,green,blue
alert(colors2); //red,green,blue,yellow,black,brown


slice()方法,它能夠基於當前數組的一個項或多個項創建新數組,它可以接收一個或兩個參數,即要返回項的起始和結束位置。一個參數時,返回該參數指定位置開始到當前數組末尾的所有項。兩個參數則返回起始到指定位置的所有項——不包括結束位置的項。注意,slipe()方法不影響原始數組。

復制代碼 代碼如下:
var colors=["red","green","blue","black","brown"];
var colors2=colors.slice(1);
var colors3=colors.slice(1,4);
alert(colors2); //green,blue,black,brown
alert(colors3); //green,blue,black


slice()方法刪除:可以刪除任意數量的項,只需指定2個參數:要刪除的第一項的位置和要刪除的項數。
slice()方法插入:可以向指定位置插入任意數量的項,只需提供3個參數:起始位置、0(要刪除的項數)和要插入的項。
slipe()方法替換:可以項指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個參數:起始位置、要刪除的項數和要插入的任意數量的項。

復制代碼 代碼如下:
var colors = ["red", "green", "blue
copyright © 萬盛學電腦網 all rights reserved