javascript引用類型之Array類型

除了Object以外,Array類型恐怕是javascript中最經常使用的類型了。並且,javascript中的數組與其餘多數語言中的數組有着至關大的區別。javascript數組的每一項能夠保存任何類型的數據。也就是說,能夠用數組的第一個位置來保存字符串,用第二個位置來保存數值,用第三個位置來保存對象,以此類推。並且,javascript數組的大小是能夠動態調整的,便可以隨着數據的添加自動增加以容納新增數據。javascript

建立數組的基本方式有兩種。第一種是使用Array構造函數:前端

var colors = new Array();

若是預先知道數組要保存的項目數量,也能夠給構造函數傳遞該數量,獲得的數組就會具備那麼多的位置(其中每一項的初始值都是undefined):java

var colors = new Array(20);

也能夠向Array構造函數傳遞數組中應該包含的項:數組

var colors = new Array("red","blue","green");

另外,在使用Array構造函數時也能夠省略new操做符:數據結構

var colors = Array(3);                                    //建立一個包含3項的數組
var names = Array("greg");                   //建立一個包含1項,即字符串「greg"的數組

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

var colors = ["red","blue","green"];                //建立一個包含3個字符串的數組
var names = [];                                                //建立一個空數組

在讀取和設置數組的值時,要使用方括號並提供相應值的基於0的數字索引:spa

var colors = ["red","blue","green"];
alert(colors[0]);                                            //顯示第一項
colors[2] = "black";                                       //修改第三項
colors[3] = "brown";                                    //新增第四項

若是索引小於數組中的項數,則返回對應項的值。若是設置某個值的索引超過了數組現有的最大索引值,如上例,數組就會自動增長到該索引值加1的長度。數據的項數保存在其length屬性中,這個屬性始終會返回0或更大的值:code

var colors = ["red","blue","green"];
var names = [];
alert(colors.length);            //3
alert(names.length);            //0

1. 轉換方法對象

全部對象都具備toLocaleString(),toString()和valueOf()方法。其中,調用數組的toString()和valueOf()方法會返回相同的值,即由數組中每一個值的字符串形式拼接而成的一個以逗號分隔的字符串:排序

var colors = ["red","blue","green"];
alert(colors.toString());                           //red,blue,green
alert(colors.valueOf());                            //red,blue,green
alert(colors);                                            //red,blue,green

最後一行代碼直接將數組傳遞給了alert()。因爲alert()要接收字符串參數,因此它會在後臺調用toString()方法。

若是使用join()方法,則可使用不一樣的分隔符來構建這個字符串。join()方法只接收一個參數,即用分隔符的字符串:

var colors = ["red","blue","green"];
alert(colors.join(" "));                              //red blue green
alert(colors.join("||"));                           //red ||blue||green

2. 棧方法

javascript數組也提供了一種讓數組的行爲相似於其餘數據結構的方法。具體來講,數組能夠表現得就像棧同樣。棧是一種LIFO(後進先出)的數據結構。棧中項的插入(叫作推入)和移除(叫作彈出),只發生在一個位置——棧的頂部。javascript爲數組專門提供了push()和pop()方法,以便實現相似棧的行爲。

push()方法能夠接收任意數量的參數,把它們逐個添加到數組末尾,並返回修改後數組的長度。而pop()方法則從數組末尾移除最後一項,減小數組的length值,而後返回移除的項:

var colors = new Array();              //建立一個數組
var count = colors.push("red","green");    //推入兩項
alert(count);            //2
count = colors.push("black");        //推入一項
alert(count);              //3
var item = colors.pop();                //取得最後一項
alert(item);                                    //"black"
alert(colors.length);            //2

3. 隊列方法

棧數據結構的訪問規則是LIFO(後進先出),而隊列數據結構的訪問規則是FIFO(先進先出)。隊列在列表的末端添加項,從列表的前端移除項。因爲push是向數組末端添加項的方法,所以要模擬隊列只需一個從數組前端取得項的方法。實現這一操做的數組方法就是shift(),它可以移除數組中的第一個項並返回該項,同時將數組長度減1:

var colors = new Array();
var count = colors.push("red","green");            //推入兩項
alert(count);                                                        //2
count = colors.push("black");
alert(count);                                                        //3
var item = colors.shift();                                    //取得第一項
alert(item);                                                          //"red"
alert(colors.length);                                           //2

javascript還爲數組提供了一個unshift()方法。顧名思義,unshift()與shift()的用途相反:它能在數組前端添加任意個項並返回新數組的長度。所以,同時使用unshift()和pop()方法,能夠從相反的方向來模擬隊列,即在數組的前端添加項,從數組末端移除項:

var colors = new Array();
var count = colors.unshift("red","green");            //推入兩項
alert(count);                                                             //2
count = colors.unshift("black");
alert(count);                                                              //3
var item = colors.pop();                                            //取得最後一項
alert(item);                                                                //「green」
alert(colors.length);                                                  //2

4. 重排序

數組中已經存在兩個能夠直接用來重排序的方法:reverse()和sort()。reverse()方法會反轉數組項的順序:

var values = [1,2,3,4,5];
values.reverse();
alert(values);                    //5,4,3,2,1

默認狀況下,sort()方法按升序排列數組項——即最小的值位於最前面,最大的值排在後面。爲了實現排序,sort()方法會調用每一個數組項的toString()轉型方法,而後比較獲得的 字符串(注意:比較的是字符串):

var values = [0,1,5,10,15];
values.sort();
alert(values);                //0,1,10,15,5

由於數值5雖然小於10,但在進行字符串比較時,「10"則位於"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

5. 操做方法

javascript爲操做已經包含在數組中的項提供了不少方法。其中concat()方法能夠基於當前數組中的全部項建立一個新數組。具體來講,這個方法會先建立當前數組一個副本,而後將接收到的參數添加到這個副本的末尾,最後返回新構建的數組。在沒有給concat()方法傳遞參數的狀況下,它只是複製當前數組並返回副本。若是傳遞給concat()方法的是一或多個數組,則該方法會將這些數組中的每一項都添加到結果數組中。若是傳遞的值不是數組,這些值就會被簡單地添加到結果數組的末尾:

var colors = ["red","green","blue"];
var colors2 = colors.concat("yellow",["black","brown"]);

下一個方法是slice(),它可以基於當前數組中的一或多個項建立一個新數組。slice()方法能夠接受一或兩個參數,即要返回項的起始和結束位置。在只有一個參數的狀況下,slice()方法返回從該參數指定位置開始到當前數組末尾的全部項。若是有兩個參數,該方法返回起始和結束位置之間的項——但不包括結束位置的項。注意,slice()方法不會影響原始數組:

var colors = ["red","green","blue","yellow","purple"];
var colors2 = colors.slice(1);
var colors3 = colors.slice(1,4);
alert(colors2);                //green,blue,yellow,purple
alert(colors3);                //green.blue,yellow

若是slice()方法的參數中有一個負數,則用數組長度加上該數來肯定相應的位置。例如,在一個包含5項的數組上調用slice(-2,-1)與調用slice(3,4)獲得的結果相同。若是結束位置小於起始位置,則返回空數組。

下面介紹splice()方法,這個方法恐怕要算是最強大的數組方法了,它有不少種用法:

  • 刪除:能夠刪除任意數量的項,只需指定2個參數,要刪除的第一項的位置和要刪除的項數。

  • 插入:能夠向指定位置插入任意數量的項,只需提供3個參數,起始位置,0(要刪除的項數)和要插入的項。若是要插入多個項,能夠再傳入第四,第五,以致任意多個項。

  • 替換:能夠向指定位置插入任意數量的項,且同時刪除任意數量的項,只需指定3個參數。起始位置,要刪除的項數和要插入的任意數量的項。插入的項數沒必要與刪除的項數相等。

var colors = ["red","green","blue"];
var removed = colors.splice(0,1);                   //刪除第一項
alert(colors);                //green,blue
alert(removed);            //red,返回的數組中只包含一項
removed = colors.splice(1,0,"yellow","orange");            //從位置1開始插入兩項
alert(colors);            //green,yellow,orange,blue
alert(removed);        //返回的是一個空數組
removed = colors.splice(1,1,"red","purple");        //插入兩項,刪除一項
alert(colors);        //green,red,purple,orange,blue
alert(removed);        //yellow,返回的數組中只包含一項
相關文章
相關標籤/搜索