目錄
- 陣列的建立
- 陣列的檢測
- 轉換方法
- 棧方法
- 佇列方法
- 重排方法
- 操作方法
- 位置方法
- 迭代方法
- 遞迴方法
小夥伴們看了一下目錄是不是有點驚慌失措啊,10個目錄,不要慌接下來回簡介19個Array的方法和幾個檢查資料型別、建立陣列的方法,那也不要怕”有司機帶路“ 哈哈,廢話不說看下文
前言
除了Object之外,Array型別恐怕是ECMAScript中最常用的型別了。而且,ECMAScript中的陣列與其他多數語言中的陣列有著相當大的區別。ECMAScript陣列的每一項可以保持任何型別的資料。也就是說,可以用陣列的第一個位置來保持字串,用第二個位置來儲存數值,用第三個位置儲存物件,以此類推。而且,ECMAScript陣列的大小是可以動態調整的,即可以隨著資料的新增自動增長以容納新增資料。
建立方式
陣列的建立方式由兩種。第一中是使用Array建構函式,如下
var colors = new Array();
複製程式碼
如果預選知道陣列要儲存的專案數量,也可以給建構函式傳遞該數量,而該數量會自動變成length屬性的值。例如,下面的程式碼將建立length值為20的陣列
var colors = new Array(20);
複製程式碼
也可以向Array建構函式傳遞陣列中應該包含的項,以下程式碼建立了一個包含3個字串值的陣列:
var colors = new Array('red','blue','green');
複製程式碼
當然,給建構函式傳遞一個值也可以建立陣列。但這時候問題就複雜一點了,因為如果傳遞的是數值,則會按照該數值建立包含給定項的陣列;而如果傳遞的是其他型別的引數,則會建立包含那個值只有一項的陣列。看下面的例子
var colors = new Array(3);//建立一個包含三項的陣列
var names = new Array('Greg');//建立一個包含1項,及字串‘Greg’的陣列
複製程式碼
另外,在使用Array建構函式的時候可以省略new操作符。如下的例子,省略new操作符的結果相同
var colors = Array(3);// 建立一個包含三項的陣列
var names = Array('Greg');//建立一個包含1項,及字串‘Greg’的陣列
複製程式碼
第二種方式 建立陣列的第二種基本方式是使用陣列字面量表示法。陣列字面量由一對函式組項的方括號表示,多個數值之間可以逗號隔開。如下:
var colors = ['red','bule','green'];// 建立一個包含 3 個字串的陣列
var names = [];// 建立一個空陣列
var values =[1,2,]// 不要這樣!這樣會建立一個包含 2 或 3 項的陣列
var options = [,,,,,,]// 不要這樣!這樣會建立一個包含 5 或 6 項的陣列
複製程式碼
以上的程式碼第一行建立一個包含3個字串的陣列。第二行使用一對空方括號建立一個空陣列。帶三個展示了在陣列字面量的最後一項新增逗號的結果:在IE8及以下的版本中,values會成為一個包含3項的最後一項的值是undefined的陣列;在其他的瀏覽器中,values會成為包含2項的陣列。原因是IE8以及之前的版本中的ECMAScript實現陣列字面量方面存在bug。
由於這個bug導致的另一種情況如最後一行程式碼所示,改行程式碼可能會建立包含5項的陣列(在IE9+、Firefox、Opera、Safari和Chrome中),也有可能會建立6項陣列(IE8以及之前)。在像這種省略值的情況下,每一項都將獲得undefained值;這個結果與呼叫的Array建構函式時傳遞項數在邏輯上是相同的。但是由於IE的實現與其他瀏覽器不一致,因此不建議使用這種語法。與物件一樣,在使用陣列字面量表示法時,也不會呼叫Array建構函式(除了FireFox3以及更早的版本)
在讀取和設計陣列的值時,要使用方括號並提供相應值的基於0的數字索引,如下:
var colors = ['red','blue','green'];// 定義一個字串陣列
alert(colors[0]);// 顯示第一項
colors[2]='black';// 修改第三項
colors[3]='brown';// 新增第四項
複製程式碼
方括號的索引表示要訪問的值。如果索引小於陣列中的項數,則返回對應的值,就像這個例子中的colors[0]會顯示‘red’一樣。設定陣列的值也是相同的語法,但會替代指定位置的值。如果設定某個的索引超過了陣列的項數,救贖例子中的colors[3]所示,陣列會自動增加到該索引值加1的長度
陣列的項數儲存在其length屬性中,這個屬性始終會返回0或者更大的值,如下面這個例子所示:
var colors = ["red", "blue", "green"]; var names = [];
alert(colors.length); //3
alert(names.length);//0
複製程式碼
陣列length屬性很有特點----它不是隻讀的。因此,通過設定這個屬性,可以從陣列的末尾移除項或者向陣列中新增新項。請看下面的例子
var colors =['red','blue','green'];
colors.length = 2;
alert(colors[2])//"undefined"
複製程式碼
這個例子中的陣列colors一開始有3個值。將其length屬性設定為2會移除最有一項(位置為2的那一項),結果再訪問colors[2]就會顯示undefined了。如果將其length屬性設定為大於該陣列項的值,這是新增的每一項都會取得undefined值,如下
var colors = ["red", "blue", "green"]; // 建立一個包含 3 個字串的陣列 colors.length = 4; alert(colors[3]); //undefined
複製程式碼
在此,雖然colors陣列只有3個項,但把它的length屬性設定成了4.這個陣列不存在位置3,所訪問這個位置的值就是undefaind。
利用length屬性也可以方便地在陣列末尾新增新項,如下:
var colors = ['red','blue','green'];
colors[colors.length]='black';
cplors[colors.length]='brown';
複製程式碼
由於陣列最後一項的索引始終是length-1,因此下一個新項就是length。每當在陣列末尾天機一項後。其實length屬性就會自動更新,陣列的length就是最後一項的索引加一。看下面程式碼
var colors=['red','blue','green'];
colors[99]='black';
alert(colors.length);// "100"
複製程式碼
這個例子中,我們想colors陣列的位置99插入一個值,結果陣列新的長度是100,位置3到98實際上都是不存在的,所以訪問它們都會返回undfined。陣列最多可以包含42億多個項,幾乎已經滿足任何程式設計需求,如果新增的項數超過了這個限制值,就會發生異常。而建立你一個初始化大小與這個上限接近的陣列,則可能會導致執行時間超長的指令碼錯誤。
檢測陣列
自從ECMAScript3 做出規定以後,就出現了確定某個物件是不是陣列的經典問題。對於一個網頁,或者一個全域性作用域而言,使用instanceof操作符就能得到滿意的結果:
if(value instanceof Array){
//對陣列執行某些操作
}
複製程式碼
instanceof 操作符的問題在於,它假定只有一個全域性執行環境。如果網頁中包含多個框架,那實際上存在兩個以上不同的全域性執行環境,從而存在兩個以上不同的Array建構函式。如果你從一個框架向另一個框架傳入一個陣列,那麼傳入的陣列與第二個框架的陣列中原生建立的陣列分別具有各自不同的建構函式。
為了解決這個問題,ECMAScript5新增了Array.isArray()這個方法。這個方法的目的就是最終確定某個值到底是不是陣列,而不管它是從哪個全域性環境建立的。這個方法的用法如下。
if(Array.isArray(value)){
// 對陣列操作
}
複製程式碼
支援Array.isArray()方法的瀏覽器有IE9+、FrieFox4+、Safari5+、Open 10.5+和chrome。
轉換方法
我們們大家都知道所有的物件都具備有 toLocaleString()、toString()和valueOf方法。其中,呼叫陣列的toString()方法會返回由陣列中每個值的字串拼接而成的一個以逗號分隔的字串。而呼叫valueOf()返回的還是原陣列。實際上,為了建立這個字串會呼叫陣列每一項的toString()方法,看下面的這個例子。
var colors = ['red','blue','green'];
alert(colors.toString());//'red,blue,green'
alert(colors.valueOf())://'red,blue,green'
alert(colors);//'red,blue,green'
複製程式碼
這裡我們先顯示的呼叫了toString()方法,以便返回陣列的字串表示,每個字串表示拼接成了一個字串,中間以逗號分隔。接著呼叫valueOf()方法,而最後一行程式碼直接將陣列傳遞給了alert()。由於alert()要接受字串引數,所以會在後臺呼叫toString()方法,由此會得到與其直接呼叫toString()方法相同的結果。
另外,toLocaleString()方法經常會返回與toString()和valueOf()方法相同的值,但也不總是如此。當呼叫陣列的toLocaleString()方法時,它也會建立一個數字值的以逗號分隔的字串。而與前兩個方法唯一的不同之處在於,這一次為了取得每一項的值,呼叫的是每一項的toLocaleString()的方法,而不是toString()方法。請看下面的例子。
var person1 = {
toLocaleString:()=>{
return :'Nikolaos';
},
toString:()=>{
return 'Nikolaos'
}
}
var person2 = {
toLocaleString:()=>{
return :'Grigorios';
},
toString:()=>{
return 'Greg'
}
}
var people = [person1,person2];
alert(people);//Nikolaos,Greg
alert(people.toString());//Nikolaos,Greg
alert(people.toLocaleString());//Nikolaos,Grigorios
複製程式碼
這上面的例子中我們定義了兩個物件:person1和person2.而且還分別為每個物件定義了一個toString()方法和toLocaleString()方法,這個兩個方法返回不同的值。然後,建立一個包含前定義的兩個物件的陣列。將陣列傳遞給alert()時,輸出結果是Nikolaos,Greg,因為呼叫陣列每一項的toString()方法,同樣直接呼叫toString()的方法得到結果相同。而當呼叫陣列的toLocaleString方法時,輸出的結果是Nikolaos,Grigorios,原因是呼叫了陣列每項的toLocaleString()方法。
陣列繼承的toLocaleString()、toString()和valueOf()方法,在預設情況下都會以逗號分隔的字串的形式返回陣列項。而如果使用join方法,則可以使用不同的分隔符來構建這個字串,join()方法只接受一個引數,即用作分隔符的字串,然後返回包含所有陣列項的字串。看下面的例子
var colors =['red','green','blue'];
alert(colors.join(','))//red,green,blue
alert(colors.join('||'));//red||green||blue
複製程式碼
在這裡,我們使用join方法重現了toString()方法的輸出。在傳遞逗號的情況下,得到以逗號分隔的陣列值。而在最後一行程式碼中,我們傳遞了雙豎線符號,結果得到字串“red||green||blue”。如果不給join()傳遞引數,或者傳遞undefined,則使用逗號作為分隔符。IE7及更早的版本會錯誤的使用字串“undefinde”作為分隔符。如果陣列中某一項的值是null或者undefined,那麼該值在join()、toString()、toLocaleString()和valueOf()方法返回的結果中以空字串表示。
棧方法
ECMAScript陣列也提供一種讓陣列的行為類似於其他資料結構的方法。具體來說,陣列可以表現的想棧一樣,後者是一種可以限制插入和刪除項的資料夠。棧是一種LIFO(last in first out,新進後出)的資料結構,也就是最新新增的項最早被移除。而棧中項的插入(叫做推入)和移除,只發生在一個位置-----棧的頂部。ECMAScript為陣列專門提供push()和pop()方法,以便實現類似棧的行為。
push()可以接受任意引數,把它們逐個新增到陣列的尾部,並返回當前陣列最新的length,而pop則是移除陣列末尾一項並減少當前陣列的length,並返回移除的哪一項,看程式碼
var colors = new Array();
var cunt = 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
複製程式碼
以上程式碼中的陣列可以看做棧(程式碼本身沒有任何的區別,而pop()和push()都是陣列預設的方法)。首先,我們使用push()將兩個字串推入陣列的末尾,並返回的結果儲存在變數count中(值為2)。然後,再推入一個值,而結果仍然儲存在count中。因為此時陣列中包含3項,所以push()返回3.在呼叫pop()時,他們會返回陣列的最後一項,即字串“black”。此後,陣列中僅剩兩項。
可以將棧方法與其他陣列的方法連用,就像下面
var colors = ['red','blure'];
colors.push('brown');
colors[3] = 'black';
alert(colors.length);
var item = colors.pop();
alert(item)
複製程式碼
在此我們首先用兩個值來初始化這個陣列。然後,使用push()新增第三個值,載通過直接在位置3上賦值來新增第四個值。而在呼叫pop()時,該方法返回了字串“black”,即最後一個新增到陣列的值。
佇列方法
棧資料結構的訪問規則是list in first out LIFO ,而佇列的資料結構的訪問規則是FIFO(first in first out,先進先出)。佇列在列表的末端新增項,從列表的前端移除項。由於push()是項陣列嗎,末端新增項的方法,因此要模擬佇列只需從一個陣列前端取得項的方法。實現這一操作的陣列方法就是shift(),它能夠移除陣列中的第一項並返回該項,同時將陣列的長度減一。結合shift()和push()方法,可以向使用佇列一樣使用陣列。
var colors = new Array();
var count = colors.push('red','grreen');//2
alert(count);//2
count = colors.push('black');//3
alert(count);//3
var item = colors.shift();//'red'
alert(item);//red
alert(colors.length)//2
複製程式碼
這個例子首先使用push()方法建立一個包含3中顏色名稱的陣列。然後使用shift()方法從陣列中取得了第一項,即‘red’。在移除第一項之後,‘green’就變成第一選項,‘black’就變成了第二項,陣列也只包含兩項了。
ECMAScript 還為陣列提供了一個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);
alert(colors.length);//2
複製程式碼
這個例子建立了一個陣列並屬於unshift()方法先後推入3個值。首先是‘red’和‘green’,然後是‘black’,陣列中的順序是‘black’、‘red’、‘black’。在呼叫pop()方法時,移除並返回的是最後一項,及‘green’。IE7 及更早的版本對javaScript的實現中存在一個偏差,其中unshift()方法總是返回undefined而不是陣列的新長度。IE8在非相容模式下會返回正確的長度值
重排序方法
陣列中已經存在兩個可以直接用來重新排序的方法; reverse()和sort()。reverse()方法是反轉陣列的順序
var arr = [1,2,3,4,5];
arr.reverse()
alert(arr)// 54321
複製程式碼
陣列初始化的時候是[1,2,3,4,5],經過reverse()方法處理後就變成了[5,4,3,2,1]。
在預設的情況下,sort()的方法會按升序來排了陣列的每一項------最小值在最前面,最大值排在陣列的最後面。為了實現排序,sort()方法會呼叫陣列每一項的的toString()轉換方法,然後在比較得到字串,確定如何排序,及時陣列中的每一項都是數值,sort()方法比較的也是字串,如下
var values = [0,1,5,10,15];
values.sort();
alert(values)//0,1,10,15,5
複製程式碼
可見,及時例子中的未排序之前順序沒有問題,但是sort()方法也會根據測試字串的結果改變原來的順序。因為數值5雖然小於10.但在進行字串比較時,’10‘則位於’4‘的前面,於是陣列的順序就被改變了,不用說,這種排序方式在很多情況下都不是最佳方案。因此sort()方法可以接受一個比較函式作為引數,以便我們定位那個值位於那個值的前面。
比較函式接受兩個引數,如果第一個引數應該位於第二個引數則返回一個負數,如果兩個引數相等則返回0,如果第一個引數應該位於第二個之後則返回正數,如果不排序就返回0.
function compare(value1,value2){
return value1-value2
}
var values = [0,5,1,18,15];
values.sort(compare);
alert(values)//0,1,5,15,18
複製程式碼
當然如果想降序的,我們們需要把compare的 return value1-value2換成 return value2-value1
function compare(value1,value2){
return value2-value1
}
var values = [0,5,1,18,15];
values.sort(compare);
alert(values)//18,15,5,1,0
複製程式碼
當然我們們也可以在簡化一下上面的程式碼
var values = [0,5,1,18,15];
values.sort((value1,value2){
return value2-value1
});
alert(values)//18,15,5,1,0
複製程式碼
reverse()和 sort()方法的返回值是經過排序之後的陣列。原陣列也會放生改變
操作方法
ECMAScript為了操作已經包含在陣列中的項提供了很多的方法。其中,concat()方法可以基於當陣列中的所有項建立一個新陣列。具體來說,原陣列不改變,會建立一個新的陣列副本,然後將接受的引數新增到這副本的末尾,最後返回新構建的陣列。沒有給concat傳遞引數的就會建立當前陣列的副本,如果傳遞給concat()方法的是一個或者多個陣列,則該方法會將這些陣列中的每一項都新增到結果的陣列中。如果新增的不是陣列,這些值就會被簡單的新增到結果陣列的末尾。下面一個例子
var colors = ['red','green','blue'];
var colors2 = colors.concat('yellow',['black','brown']);
alert(colors); //red,green,blue
alert(coloes2);// red,green,blue,yellow,black,brown
複製程式碼
concat(),使用的特點如下
-
可以傳入多個引數
- 引數是陣列,這個陣列的每一項都會被新增到結果陣列中(copy的原陣列+每項引數)
- 如果不是陣列,則每個引數也會被新增到結果陣列中(copy的原陣列+每項引數)
- 如果沒有引數就會返回結果陣列 (copy的原陣列)
-
原陣列不會發生改變
-
返回一個新的合併後的結果陣列(copy的原陣列+每項引數)
slice()方法,它能夠基於當前陣列中的一或者多項建立一個新的陣列。slice()方法可以接受一或者兩個引數,既要返回項的起始值和結束位置。在只有一個引數的情況下,slice()方法會返回從該引數指定位置開始到當前陣列末尾的所有項。如果有兩個引數,該方法返回起始位置和結束位置之間的項,但是不包含結束位置的項,slice()方法不會影響原始的陣列。如果 slice()方法的引數中有一個負數,則用陣列長度加上該數來確定相應的位 置。例如,在一個包含 5 項的陣列上呼叫 slice(-2,-1)與呼叫 slice(3,4)得到的 結果相同。如果結束位置小於起始位置,則返回空陣列看例子
var arr = [1,2,3,4,5,6,7,8];
var arr2 = arr.slice(1);
var carr3 = arr.slice(1,4);
var arr4 = arr.slice(-2,-1)===arr.slice(6,7);
var arr5 = arr.slice(-1,-2)
var arr6 = arr.slice(8,1)
var arr7 = arr.slice();
var arr8 = arr.slice(0);
alert(arr2) // 2,3,4,5,6,7,8
alert(arr3) // 2,3,4
alert(arr4) // 6
console.log(arr5) // []
console.log(arr6) // []
console.log(arr7) // [1,2,3,4,5,6,7,8]
console.log(arr8) // [1,2,3,4,5,6,7,8]
alert(arr) // 1,2,3,4,5,6,7,8
複製程式碼
使用slice的特點
- 原陣列不變,會建立一個根據引數而擷取的一個副本
- 引數(m,n)
- 不傳入引數或者傳入0,會建立一個原陣列的副本,返回
- 傳入的m 大於或者等於n 則返回一個[]
- 傳入的m 小於n 則返回一個起始位置為n到m位置的陣列,但是不包含m位置的拿一項
- 如果 m和n都是負數並m小於n,這個陣列的長度數x,則會返回一個x+(-m)起始項,到結束位置x+(-n)項的陣列,但是不包含結束位置x+(-n)項
下面我們們看看在陣列最靈活並且最複雜的一個方法 splice(),它有很多種用途,splice主要用於向陣列中途插入項,但是用這種方法的方式有下面三種
- 刪除: 可以刪除任意數量的項,但是要指定兩個引數:要刪除的第一項的位置和要刪除的項數。例如,splice(0,2)會刪除陣列中的前兩項。
- 插入:可以向指定位置插入任何數量的項,只需要提供3個引數:起始位置、要刪除的項數、要插入的項。如果要插入多個項,可以再傳入任意多個項。例如[1,2,3].splice(2,0,4,5,6,7)則會在在陣列[1,2,3]的3後面新增4,5,6,7最後陣列變成[1,2,3,4,5,6,7].
- 替換:可以在指定的位置插入任何數量的項,且同時刪除任意數量的項,需要指定3個引數:其實位置、要刪除的項的任意數量,要插入陣列的項,要插入的陣列項沒有必要和刪除項的數量相等例如,[1,2,3,4,5].splice(0,1,0,1) 返回的是擷取的那一項1,並在原陣列內新增0,1,原陣列變成 [0,1,2,3,4,5]
splice()方法始終都會返回一個陣列,該陣列中包含原始陣列中刪除的項(如果美歐刪除任何項,則返回一個空的陣列)。下面程式碼針對增刪改的例項
var arr = [1,2,3,4,5]
var removed = arr.splice(0,1);//從位置0 開始刪除,刪除一項
alert(arr)// 2,3,4,5
alert(removed)// 1
removed = arr.splice(0,0,0,1)//
從位置0開始刪除,刪除0項,從位置0開始插入,插入兩項
alert(arr)//0,1,2,3,4,5
alert(removed)//''
removed = arr.splice(0,2,0,1,2)//
從位置0開始刪除,刪除0項,從位置0開始插入,插入兩項
alert(arr)//0,1,2,2,3,4,5
alert(removed)//0,1
複製程式碼
位置方法
ECMAScript為陣列新增了兩個位置方法:indexOf()和lastIndexOf()。這兩個方法都接受兩個引數:要查詢的項和(可選的)表示查詢起點的索引。其中,indexOf()方法從陣列的開頭(位置0)開始向後查詢,lastIndexOf方法則從陣列的末尾開始相前查詢。
這兩個方法都返回要查詢項在陣列中的位置,或者沒有找到的情況下返回-1.在比較第一個引數與陣列中的每一項時,會使用全等於操作符;也就是說,要求查詢的項必須嚴格相等(===),下面的例子
var number = [1,2,3,4,5,4,3,2,1];
alert(number.indexOf(4))//3
alert(number.lastIndexOf(4))//4
alert(number.indexOf(4,4))//4
alert(number.lastIndexOf(4,4))//3
var person = {name:'Nicholas'};
var people =[{name:'Nicholas'}];
var morePeople=[person];
alert(people.indexOf(person));//-1
alert(morePeople.indexOf(person));//0
複製程式碼
使用indexOf()和lastIndexOf()方法查詢特定項在陣列中的位置非常簡單,支援它們的瀏覽器包含IE9+ Firefox2+ safari 3+ Opera9.5+和Chrome。
indexOf()方法的特點和屬性
- 該方法不會改變原來的陣列,查詢的方式是從陣列的前端開始
- 該方法可以傳遞2個引數,第二個可選,第一個引數代表要在該陣列中查詢的項,第二個引數是查詢的起始位置。
- 該方法返回的結果,在未查到的情況下是-1,在查到的情況下是當前項的索引
lastIndexOf()方法的特點和屬性
- 該方法不會改變原來的陣列,查詢的方式是從陣列的後端開始
- 該方法可以傳遞2個引數,第二個可選,第一個引數代表要在該陣列中查詢的項,第二個引數是查詢的起始位置。
- 該方法返回的結果,在未查到的情況下是-1,在查到的情況下是當前項的索引
迭代的方法
ECMAScript5 為陣列定義了5個迭代的方法。每個方法都會有兩個引數;要在每一項上執行的函式和(可選的)執行該函式的作用域---影響this的值。傳入這些方法中的函式會接受三個引數;陣列項的值、該項在陣列中的位置,陣列物件本身。根據使用的方法不同,這個函式執行後的返回值也是不同的,看下面五個方法的作用
- every():對陣列中的每一項執行給定函式,如果每一項都返回true,則返回true。
- some():對陣列中的每一項執行給定函式,如果任意一項都返回true,則返回true。
- filter():對陣列中的每一項執行給定函式,返回該函式返回true的項陣列
- map():對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列。
- forEach():對陣列的每一項給定一個函式,這個方法沒有任何的返回值。
以上的方法都不會修改原陣列。 這些方法中最為相似的是every()和some(),它們都用於查詢陣列中的項是否滿足某個條件。對every()來說,傳入的函式必須對沒一項都返回true,這個方法才會返回true;否則,它們就會返回false。而some()方法則是隻要傳入函式對陣列中的某一項返回true,就會返回true。
var numbers = [1,2,3,4,5,6,7];
var everyResult = numbers.every((item,index,arry)=>(item>2));
alert(everyResult);// false
var someResult = numbers.some((item,index,arr)=(item>2))
alert(someResult);//true
複製程式碼
看一下 filter()方法,它利用指定的函式確定是否在返回的陣列中包含某一項。例如,要返回一個所有數值都大於2的陣列,可以使用一下程式碼。
var numbers = [1,2,3,4,3,2,1];
var filterResult = numbers.filter((item,index,array)=>(item>2))
alert(filterReault);//[3,4,3]
複製程式碼
map()方法也會返回一個陣列,而這個陣列的每一項都是在原始陣列中的對於項上執行傳入函式的結果。例如,可以給陣列中的每一項乘以2,然後返回這些乘積的陣列,如下所示。
var numbers = [1,2,3,4,5,6];
var mapRes = numbers.map((item,index,array)=>(item*2))
alert(mapRes);//[2,4,6,8,12]
複製程式碼
forEach()方法,它只對是物件陣列中的每一項執行傳入函式執行。這個方法沒有返回值,本質上與使用for迴圈迭代陣列一樣。看一例子。
var numbers = [1,2,3,4,5,6];
numbers.forEach((item,index,array)={
// 執行某些操作
})
複製程式碼
這些陣列的方法通過執行不同的操作,可以大大方便處理陣列的任務。支援這些迭代方法的瀏覽器有IE9+、Firefox2+、Safari3+、Opera9.5+和chrome。
遞迴方法
ECMAScript5 還新增了兩個遞迴陣列方法:reduce()和reduceRight()。這兩個方法都會迭代陣列的所有項,然後構建一個最終返回的值。其中,reduce()方法從陣列的第一項開始,逐個遍歷到最後。而redurceRight()則從陣列的最後一項開始,向前遍歷到第一項。
這兩個方法都會接受兩個引數;一個在每一下上呼叫的函式和(可選的)作為遞迴基礎的初始值。傳給reduce()和redurceRight()函式接受4個引數:前一個值、當前值、項的索引和陣列物件。這個函式返回的任何值都會作為第一個引數自動傳遞給下一項。第一次迭代發生在陣列的第二項上,因此第一個引數是陣列的第一項,第二個引數就是陣列的第二項。
使用reduce()方法可以執行求陣列中所有值之後的操作
var values = [1,2,3,4,5];
var sum = values.reduce((prev,cur,index,array)=>(prev+cur))
alert(sum) ;// 15
複製程式碼
第一次執行回撥函式,prev是1,cur是2。第二次,perv是3(1+2的結果),cur是3(陣列的第三項)。這個過程會持續到把陣列中的每一項都訪問一遍,最後返回結果。
reduceRight()的作用類似,只不過方向相反而已。看一下面的例子
var values = [1,2,3,4,5];
var sum = values.reduceRight((prev,cur,index,array)=>(prev+cur))
alert(sum)//15
複製程式碼
在這個例子中,第一次執行回撥函式,prev是5,cur是4.當然,最終結果相同,因為執行的都是簡單相加的操作。
使用redurce和redurceRight(),主要的差別是從那頭開始遍歷。
陣列的方法大概有22個,小夥伴們都記住了嗎,接下來一一列出來
- 陣列的建立方法 new Array()
- 陣列的轉換方法 join()、toString()、valueOf()、toLocaleString()
- 增加個刪除方法 push() unShift() shift() pop()
- 操作 concat() slice() splice()
- 排序 sort() reverse()
- 遍歷方法 filter() map() forEach() some() every()
- 遞迴方法 reduce() reduceRight()
- 檢查方法 indexOf() lastIndexOf()