js 資料引用型別(二)——陣列Array
除了 Object之外,Array型別也是js中最常用的型別了。
建立陣列有2種基本方式,一是Array建構函式,如
var colors=new Array(3);
二是使用陣列字面量表示法,如
var colors=["red","blue","green"];
那如何檢測資料型別是Array呢,使用的便是instanceof , 如
value instanceof Array == true
陣列是操作資料的一大重點,因此陣列本身有很多種方法用來處理資料。
(一) 轉換方法
陣列屬於物件,所有的物件都具有toString()、toLocalString()和valueof()方法。呼叫toString方法返回的是陣列的字串顯示,呼叫valueof方法還是陣列本身,而toLocalString方法跟toString方法類似,區別是它調的是陣列每一項的toLocalString方法。
(二)棧方法
棧是一種LIFO(後進先出)的資料結構。push()與pop()方法使陣列實現類似棧的方法,push()方法是為陣列末端新增任意數量的引數,pop()方法則從陣列刪除最後一項。
var colors=new Array(); //建立陣列
var count=colors.push("red","green"); //推入2項
alert(count); //2
var item=colors.pop(); //刪除最後一項
alert(item); //green
alert(colors.length); //1
(三)佇列方法
佇列的訪問規則是FIFO(先進先出),佇列在陣列末端新增項,從列表的前端刪除項,結合shift()與push()方法,可以像使用佇列一樣使用陣列。shift()方法指刪除陣列第一項;
var colors=new Array(); //建立陣列
var count=colors.push("red","green"); //推入2項
alert(count); //2
var item=colors.shift(); //刪除前一項
alert(item); //red
alert(colors.length); //1
而
unshift()與shift()相反,往陣列前端新增一項,
unshift()與pop()方法從相反的方向來模仿佇列。
(四)重排序方法var colors=new Array(); //建立陣列 colors.unshift("red","green"); //推入2項 alert(colors); //["red","green"] colors.unshift("blue"); //前端推入1項 colors.pop(); //刪除最後一項 alert(colors); //["blue",red]
reverse()與sort()方法,前者按倒序排列陣列,但不夠靈活;後者按照升序排列陣列,但在字串比較中,也不是最佳方案,但返回的都是陣列形式。如:
reverse()
var values=[5,4,3,2,1];
values.reverse(); //1,2,3,4,5
sort()
var values=[2,4,5,8,10];
values.sort(); // 2,4,10,5,8
因此使用sort()升序的時候,我們需要採用比較兩個引數的方法來處理,當第一個引數應位於第二個前面時返回-1,相等時返回0,位於後面時返回1
( sort()內部機制應該是冒泡的原理,如比較函式返回值<=0,相對位置不變;如返回值>0,相對位置改變。)
function compare(a,b){
if(a<b){
return -1;
}else if(a==b){
return 0;
}else{
return 1;
}
}
var values=[1,3,7,5,15,35];
values.sort(compare); //1,3,5,7,15,35
那如何利用sort()方法來降序呢?那就是將比較函式結果反過來,引數一應位於引數二後面時返回1,相等時返回0,引數一位於引數二後面時返回-1;
(五)操作方法
concat()方法,slice()方法,splice()方法。
第一種代表的是合併,無論合併的是字串還是陣列,都將合併成一個新的陣列。
var colors=["red","green"];
var colors2=colors.concat("yellow",["black","blue"]);
alert(colors); //["red","green"];
alert(colors2); //["red","green","yellow","black","blue"];
第二種代表的是複製,傳入1個引數,代表的是從引數指定位置到當前陣列末尾的所有項;傳入2個引數,代表的是從第一個引數指定位置到第二個引數指定位置的所有項,但不包括結束位置的項(slice方法不影響原始陣列)。
var colors=["red","green","yellow","black","blue"];
var colors2=colors.slice(1);
alert(colors2); //["green","yellow","black","blue"];
var colors3=colors.slice(1,4);
alert(colors3); //["green","yellow","black"];
splice方法可以算是最強大的陣列方法了,它有刪除,插入,替換功能。
刪除,傳入2個引數,第一個引數代表刪除的起始位置,第二個引數代表刪除的項數。例如arr.splice(0,2)會刪除arr的前兩個項。
插入,傳入3個引數,第一個引數代表插入的起始位置,第二個引數為0,第三個引數代表的是插入項。如果要插入多個項,則可傳入第四,第五等其他項。例如arr.splice(2,0,"red","blue")會從arr的第3個位置插入“red”,“blue”字串。
替換, 傳入3個引數,第一個引數代表插入的起始位置,第二個引數為1,第三個引數代表的是替換項。插入項不必與刪除項相等。例如arr.splice(2,1,"red","blue")會從arr刪除第3個位置的項,並插入“red”,“blue”字串。
(六)迭代方法
陣列有五種迭代方法,分別為every(),filter(),map(),some(),foreach()。
every()與some()類似,都會返回true與false,區別在於every()是全部為true時才返回true,而some只要有一項為true則返回true。
var values=[1,3,5,6,8,9];
var result1=values.every(function(item,index,array){
return item>2;
});
alert(result1); //false
var result2=values.some(function(item,index,array){
return item>2;
});
alert(result2); //true
filter()可以理解為過濾,即可以返回符合某條件的一組陣列。
var values=[1,3,5,6,7,9];
var result=values.filter(function(item,index,array){
return (item>2);
})
alert(result); //[3,5,6,7,9]
map()也返回一組陣列,但可以實現每一項進行加工,例:
var values=[1,3,5,6,7,9];
var result=values.filter(function(item,index,array){
return item*2;
})
alert(result); //[3,5,6,7,9]
foreach類似於for迴圈,這一方法是不含返回值的。
(七)位置方法
顧名思義,通過返回值來判斷某項處於哪個位置。有indexOf方法和lastIndexOf方法,前者是從陣列的開頭向後查詢,後者是從陣列的結尾向前查詢,查不到則返回-1,傳入兩個引數,第一個指要查詢的物件,第二個指查詢的位置。
var values=[1,2,3,4,5,4,3,2,1];
values.indexOf(4); //3
values.lastIndexOf(4); //5
values.indexOf(4,4); //5
(八)歸併方法
指將陣列的所有項進行迭代,然後構建一個最終的返回值。有reduce與reduceRight兩種方法,第一種從左開始歸併,第二種從右開始歸併。
var values=[1,2,3,4,5];
var result=values.reduce(function(pre,cur,index.array){
return pre+cur;
});
alert(result); //15
pre引數代表前一個,cur代表當前,index代表當前索引,array代表陣列物件。從當前陣列來看,pre代表1,cur代表2,這一過程會持續到訪問每一項,最後返回結果。
reduceRight方法類似,只不過方向相反而已。
陣列的八種方法也總結完畢,資料一般以陣列的形式存在,掌握這8種方法,對於操作資料會有很大的把控。