1. 程式人生 > >js 資料引用型別(二)——陣列Array

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種方法,對於操作資料會有很大的把控。