陣列的5中迭代方法 filter()、map()、forEach()、every()、 some()
先來看個牛客網上的題目吧,
在陣列 arr 中,查詢值與 item 相等的元素出現的所有位置
輸入例子:
findAllOccurrences('abcdefabc'.split(''), 'a').sort()
輸出例子:
[0, 6]
有的大牛是這樣子做的的。
function findAllOccurrences(arr, target) {
var temp = [];
arr.forEach(function(val,index){
val !== target || temp.push(index);
});
return temp;
}
受到啟發 這樣子做的
function findAllOccurrences(arr, target) {
var newArr =[];
arr.map(function(item,index){
return (item==target)&&(newArr.push(index));
});
return newArr;
}
其實呢原理 都是陣列中的5中迭代方法。
好了廢話少說,直奔主題吧。
陣列中的迭代方法
ECMAScript5 為陣列定義了5個迭代方法。每個方法都接收兩個引數:要在每一項上執行的函式和(可選的)執行該函式的作用域 物件—–影響this的值。傳入這些方法中的函式會接收三個引數:陣列項的值item、該項在陣列中的位置index 和陣列物件本身array。根據使用的方法不同,這個函式執行後的返回值可能會也可能不會影響方法的返回值。
以下是這5個迭代方法的作用,
- every()對陣列中的每一項執行給定的函式,如果該函式對每一項都返回true,則返回true。
- some()對陣列中的每一項執行給定的函式,如果該函式對任一項返回true,則返回true。
- filter()對陣列中的每一項執行給定的函式,返回該函式會返回true的項組成的陣列。
- map()對陣列中的每一項執行給定的函式,返回每次函式呼叫的結果組成的陣列。
forEach()對陣列中的每一項執行給定的函式,這個方法沒有返回值。
這5個迭代方法中,最相似的是every()和 some(),它們都用於查詢陣列中的項是否滿足某個條件。
對every()來說,傳入的函式必須對每一項都返回true,這個方法才返回true;否則,它就返回false。
而some()方法則是隻要傳入的函式對陣列中的某一項返回true,就會返回true。
還是舉例子說明問題吧!
var arr =[1,2,3,4,6,2,4,6,7,9];
var everyResult = arr.every(function (item,index,array) {
return (item > 2);
});
console.log(everyResult); // false
var someResult = arr.some(function (item,index,array) {
return (item > 2);
});
console.log(someResult);// true
以上程式碼呼叫了every()和some(),傳入的函式只要給定項大於2 就會返回true。
對於every()因為只有部分陣列符合條件,所以它返回false
對於some()因為至少有一項是滿足條件的 所以它返回true
var arr =[1,2,3,4,6,2,4,6,7,9];
var filterResult = arr.filter(function (item,index,array) {
return (item >2);
});
console.log(filterResult); //[3, 4, 6, 4, 6, 7, 9]
通過呼叫filter()方法建立並返回了包含3, 4, 6, 4, 6, 7, 9的陣列,因為傳入的函式對它們的每一項都返回了true。
這個filter()方法對查詢符合某些條件的所有陣列項非常有用。
var arr =[1,2,3,4,6,2,4,6,7,9];
var mapResult = arr.map(function (item,index,array) {
return item *2;
});
console.log(mapResult); //[2, 4, 6, 8, 12, 4, 8, 12, 14, 18]
map()方法返回的陣列包含給每個數乘以2之後的結果。
這個方法適合建立包含的項與另一個數組一一對應的陣列
var arr =[1,2,3,4,6,2,4,6,7,9];
arr.forEach(function (item,index,array) {
//執行某些操作,這個操作是我自己寫著玩的
if(item == 2){
console.log(index); // 1 5
}
});
forEach() 只是對陣列中的每一項執行傳入的函式,這個方法沒有返回值,本質上與使用for迴圈迭代陣列一樣。