1. 程式人生 > >引用型別(陣列)

引用型別(陣列)

引用型別的值(物件)是引用型別的一個例項。在ECMAScript中,引用型別是一種資料結構,用於把資料和功能組織在一起。Javascript中的陣列與其他語言的陣列都是資料的有序列表,但是又與其他語言的陣列有著很大的區別,舉個例子Java中數組裡面只能儲存相同的資料型別,而在ECMAScript中,陣列可以儲存不同型別的資料。陣列的大小也可以動態的調整。隨著資料的增加自動增長以容納新資料。

建立陣列的基本方式有兩種:

(1)使用Array建構函式

         var array=new Array();//一個空陣列

如果預先知道要儲存的專案數量,也可以給建構函式傳遞該數量,該數量會自動變成length屬性的值。例如:

       var arrays=new Array(10);//建立一個長度為10的陣列,每個元素的值是undefined

當向建構函式中傳遞多個數值引數時:(和傳遞多個字串的效果一樣,引數變成陣列中包含的項)

var a=new Array(10,20);

也可以向陣列的建構函式中傳遞陣列中包含的項

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

 另外還可以去掉new,和有new的效果一樣。

(2)第二種方式:(陣列字面量的方式)由一對包含陣列項的方括號表示,陣列項之間可以用逗號分隔如下;

var colors=["green","red","white"]//建立一個包含三個字串的陣列

var names=[];//建立一個空陣列

var values=[1,2,]//不建議,建立一個包含2項或3項的陣列,在IE8版本之前會建立三項(1,2,undefined),其他瀏覽器會建立一個包含2項的陣列,值為(1,2)。

var opotions=[,,,,,,]//不建議,建立一個包含6項或7項的陣列, 瀏覽器支援如上。

讀取和設定陣列值時,要使用方括號對提供相應值的基於0的數字索引,如下:

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

console.log(colors[0]);//red

console.log(colors[1]);//green

console.log(colors[2]);//white

console.log(colors[3]);//undefined

設定也可以使用colors[索引]=‘值’的形式:

colors[3]='';

console.log(colors);

console.log(colors);

陣列的項數儲存在其length屬性中,length始終會返回0或者更大的值,length很有特點,不是隻讀的,因此可以設定這個屬性從陣列的末尾移除項,或者向陣列中新增新項。(注意陣列的最後一個元素的索引是length-1)。

陣列最多可以包含4294967295個項,幾乎可以滿足任何程式設計需求了,超出這個上限會發生異常,而建立一個初始大小與這個上限接近的陣列,則可能會導致執行時間超長的指令碼錯誤。

接下來我們看下陣列的常用方法:

(1)檢測陣列:instanceof操作符,檢測某個物件是不是XXX的例項(如下檢查colors物件是不是Array的例項,是返回true,不是返回false

var colors=["green","red","white"]

console.log(colors instanceof Array);//true

console.log(colors instanceof Object);//true

instanceof操作符存在的問題在於嘉定只有一個全域性執行環境,如果網頁中包含多個框架,那麼實際上就存在兩個以上的不同的執行環境,也就存在兩個以上不同版本的Array建構函式,如果你從一個框架向另外一個框架傳入一個數組,那麼傳入的陣列與第二個框架中原生建立的陣列分別具有各自不同的建構函式。為了解決這個問題ECMAScript5新增加了Array.isArray()方法,這個方法的最終目的是確定某個值到底是不是陣列,而不管她在那個全域性環境中建立的。

if(Array.isArray(colors )){

//要執行的操作

}

(2)轉換方法

valueOf()返回陣列的原始值,也就是陣列本身。

toString()把陣列轉換成字串並返回結果。比如我們alert(colors)的時候就預設的呼叫了陣列的toString();

console.log(colors.toString())

 

把陣列轉換為本地字串。並返回結果

使用join()方法可以重現上述的方法的輸出,join()接下來細講。

如果陣列中有一項是undefined或者是null,該值在join(),toString(),toLocaleString(),valueOf()方法返回的結果都是空字串。

 

(3)棧方法 

ECMAScript5提供了push()和pop()方法,以便實現類似棧的行為。棧是一種後進先出的資料結構。(操作的是陣列的末尾)

push()向陣列的末尾新增一個或更多元素,並返回新的長度。修改的是原陣列。

pop()刪除並返回陣列的最後一個元素,改變原陣列。

(4) 佇列

佇列訪問的資料結構是先進先出,(也就是操作的陣列的開頭)

shift()刪除並返回陣列的第一個元素,改變的是原陣列

和push結合使用可以像使用對壘一樣使用陣列。

unshift()向陣列的開頭新增一個或更多元素,並返回新的長度 ,改變原陣列。

 

使用unshift()和pop()也可以從相反方向實現對列。

(5)重排序方法

陣列中的sort()和reverse()是隻可以用來重排序的方法。

reverse()只是顛倒陣列中元素的順序。操作的是原陣列如下:

var array1=[1,2,"red",8,6,9]; array1.reverse(); console.log(array1);

sort() 方法對陣列的元素進行排序,操作的是原陣列,是按照元素字串順序排列如下:

var arrrr1=[1,2,20,10]; arrrr1.sort(); arrrr1

因此sort()方法可以傳入一個比較器函式,這個函式有兩個引數如下:

function compare(value1,value2){

if(value1<value2){

return -1;

}else if(value1<value2)){

return 1;

}else{

return 0;

}

}

(6)操作方法

concat()連線兩個或更多的陣列,並返回新陣列。不改變原陣列

 slice()從某個已有的陣列返回選定的元素,可以接受兩個引數,既要返回項的起始和結束位置。只有一個引數的情況下,返回從該引數指定的位置到陣列末尾的所有項。如果有兩個引數,返回起始位置和結束位置之間的項,不包括結束位置的項(含頭不含尾),不影響原陣列,返回新的陣列是陣列擷取的方法。如下:

var colors=['red',"green","white","purper","pink"]; var b=colors.slice(2); console.log(colors);

console.log(b)

兩個引數時:

 var colors=['red',"green","white","purper","pink"]; var b=colors.slice(2,4); console.log(colors);

console.log(b);

splice() 陣列中功能強大的方法。splice()方法改變原陣列。

刪除:兩個引數,開始位置和要刪除的項數

var colors=["red","green","bule"];

var removeEle=colors.splice(1,2); console.log(colors);

console.log(removeEle);

插入:三個引數,起始位置,0(要刪除的項數),要插入的項.注意從1的索引位置開始,原來1索引位置的元素向後移。

var colors=["red","green","bule"];

var add=colors.splice(1,0,"yellow","lightGreen"); console.log(colors);

console.log(add);

替換:三個引數,起始位置,要刪除的項數,要插入的項

var colors=["red","green","bule"];

var remove=colors.splice(1,3,"yellow","lightGreen");

console.log(colors);

console.log(remove);

join()陣列拼接,把陣列的所有元素放入一個字串。元素通過指定的分隔符進行分隔。不改變原陣列

var array=["red","green","bule"];

array.join("||"); console.log(array);

使用join()把陣列變成字串"redgreenbule"

var array1=["red","green","bule"]; var c =array1.join(""); console.log(c);

(7)位置方法

indexOf()和lastIndexOf()這兩個方法都接收兩個引數,要查詢的項和查詢起點位置的索引(可選),indexOf()從陣列的開頭查詢,lastIndexOf()從陣列的結尾向前開始查詢。都會返回查詢想在陣列中的位置,沒找到的情況返回-1,在比較都一個引數與陣列的每一項會使用全等操作符,也就是說查詢的項必須嚴格相等(使用===)。

var numbers=[1,2,3,4,5,4,3,2,1];

console.log(numbers.indexOf(4));//3

console.log(numbers.lastIndexOf(4));//5

console.log(numbers.lastIndexOf(4,4));//3

(8)迭代方法

every(),filter(),forEach(),some(),map()

every()對陣列執行的每一項給定函式,如果該函式對每一項都返回true,則返回true;

filter()對陣列執行的每一項給定函式,返回該函式會返回true的項組成的陣列。

forEach()對陣列執行的每一項給定函式,這個方法沒有返回值。

map()對陣列執行的每一項給定函式,返回每次函式呼叫的組成的陣列

some()對陣列執行的每一項給定函式,如果該函式對任意一項返回true就會返回true。

every()和some()都是用於查詢陣列中的項是否滿足某個條件,對every()來說,傳入的函式必須不許對每一項都返回true,這個方法才返回true,否則他就返回false,而some()方法則是隻要傳入的函式對陣列的某一項返回true,就會返回true。

var numbers=[1,2,3,4,5,4,3,2,1];

var everyresult=numbers.every(function(item,index,array){

return (item>2)

})

console.log(everyresult);//false

var numbers=[1,2,3,4,5,4,3,2,1];

var everyresult=numbers.some(function(item,index,array){

return (item>2)

})

console.log(everyresult);//true

filter()函式,他利用指定的函式確定是否在返回的陣列中包含某一項,例如要返回所有陣列都大於2的陣列

var numbers=[1,2,3,4,5,4,3,2,1];

var everyresult=numbers.filter(function(item,index,array){

return (item>2)

})

console.log(everyresult);

map()函式也返回一個數組,而這個陣列的每一項都在原陣列中的對應項上執行傳入函式的結果,例如要給陣列的每一項乘以二,返回這些乘積組成的陣列。

var numbers=[1,2,3,4,5,4,3,2,1];

var everyresult=numbers.map(function(item,index,array){

return item*2

})

console.log(everyresult);

forEach()對陣列的每一項執行傳入的函式,沒有返回值本質上與使用for迴圈遍歷陣列一樣。

var numbers=[1,2,3,4,5,4,3,2,1];

numbers.forEach(function(item,index,array){

alert(item+2);

})

(9)歸併方法

reduce(),reduceRight()這兩個方法都會迭代陣列的所有項,然後構建一個最終返回的值,reduce()從陣列的第一項開始,逐個遍歷到最後,reduceRight()是從陣列的最後一項開始,向前遍歷到第一項。這兩個方法都接收兩個引數:一個在每一項上呼叫的函式,和(可選)作為歸併基礎的初始值。傳給reduce(),reduceRight()的函式接收四個引數:前一個值,當前值,項的索引和陣列物件這個函式返回的任何值都會作為第一個引數傳遞給下一項。第一次迭代發生在陣列的第二項上,因此第一個引數時陣列的第一項,第二個引數是陣列的第二項。

一般用這個方法可以做陣列所有元素求和:

var numbers=[1,2,3,4,5,4,3,2,1];

var everyresult=numbers.reduce(function(pre,curr,index,array){

return pre+curr;

})

console.log(everyresult);