1. 程式人生 > >JavaScript之陣列五大迭代方法總結

JavaScript之陣列五大迭代方法總結

如果去問一個不太瞭解JavaScript陣列的開發人員,JavaScript的陣列有多少種迭代方法,你可能得到的答案為,for/while/do-while...等等,這個是迴圈中的方法,和我們陣列的迭代還是有一些區別的。雖然在陣列中我們也可以用這些方法去迭代。但是,為了裝逼為了飛,我們就來寫一點帶有指令碼味道的程式碼吧!    

1、every(): 對陣列中的每一項執行給定的函式,如果該函式對每一項都返回true,則結果返回true。
2、filter(): 對陣列中的每一項執行給定函式,返回該函式會返回true的項組成的陣列。
3、forEach(): 對陣列中的每一項執行給定函式,這個方法沒有返回值。
4、map(): 對陣列中的每一項執行給定函式,返回每次函式呼叫的結果組成的陣列。
5、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);
});

var someResult = numbers.some(function(item) {
    return (item > 2);
});

console.log(everyResult);      //false
console.log(someResult);        //true
需要提醒的是,在some()方法的函式中我並沒有傳入三個引數,而是不在函式體內用不到後兩個引數,所以我省略了。以上的迭代呼叫了every()和some(),傳入的函式只要給定項大於2就會返回true。對於every(),它返回false,因為陣列中只有部分滿足條件。對於some(),結果返回true,因為陣列中至少有一項是大於2的。

下面再來看看filter()函式,他利用指定的函式確定是否在返回的陣列中包含某一項,就是說根據指定的函式來篩選符合條件的項組成新的陣列並返回。例如,要返回一個所有值都大於2的陣列,可以使用下面的程式碼:
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var filterResult = numbers.filter(function(item) {
    return (item > 2);
});

console.log(filterResult);  \\[3, 4, 5, 4, 3]
這裡,通過呼叫filter()方法建立並返回了包含3、4、5、4、3的陣列,因為傳入的函式對它們每一項都返回true。這個方法對查詢符合某些條件的所有陣列項非常有用。

map()方法也返回一個數組,而這個陣列的每一項都是在原始陣列中的對應項上執行傳入函式的結果。例如,可以給陣列中的每一項乘以2,然後返回這些乘積組成的陣列,如下所示:
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
var mapResult = numbers.map(function(item) {
    return (item * 2);
});

console.log(mapResult);     //[2, 4, 6, 8, 10, 8, 6, 4, 2]
以上程式碼返回的陣列中包含給每個數乘以2之後的結果。這個方法適合建立包含的項與另一個數組一一對應的陣列。

最後一個方法就是forEach()。它只是對陣列中的每一項執行傳入的函式。這個方法沒有返回值,本質上與用for迴圈迭代陣列一樣,來看一個例子:
var numbers = [1, 2, 3, 4, 5, 4, 3, 2, 1];
numbers.forEach(function(item, index, arr) {
    //這裡執行一些操作
});
這些陣列方法通過執行不同的操作,可以大大方便處理陣列的任務。還是那句話,在自己的腳本里面寫一些有指令碼味道的程式碼,能夠提高程式碼的質量和可讀性,甚至減少程式碼量。支援這些迭代方法的瀏覽器有IE9+、FireFox 2+、Safari 3+、Opera 9.5+和chrome。