Array中的map,filter,reduce,every,some,find,findIndex等方法
首先說map,filter,reduce,every,some,他們的相同點(diǎn)都是需要遍歷數(shù)組中的每一項(xiàng)挪凑,不同點(diǎn)就需要我們一一弄清它們各自的用法段化。
some和every
every表示每一項(xiàng)都必須通過才會(huì)返回true,some表示只要數(shù)組元素某一項(xiàng)滿足即可
var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
var res1 = arr.every(function(item, index){
return item > 20;
});
console.log(res1); // false
var res2 = arr.some(function(item, index){
return item > 20;
});
console.log(res2); // true
filter
調(diào)用 filter 的結(jié)果是創(chuàng)建一個(gè)新數(shù)組薪棒,數(shù)組的元素是通過所提供函數(shù)通過測(cè)試的所有元素
var res3 = arr.filter(function(item, index, array){
return item > 20;
});
console.log(res3); // 32,44,120
如果處理表達(dá)式是運(yùn)算手蝎,將無效,返回元素組成員組成的數(shù)組
var res33 = arr.filter(function(item, index, array){
return item * 2;
});
console.log('res33', res33); // 1, 12, 32, 2, 3, 44, 120, 3, 5
這個(gè)一點(diǎn)可以和 map 比較一下
map
調(diào)用map 的結(jié)果也是創(chuàng)建一個(gè)新數(shù)組俐芯,不同的是:
1.如果給定的處理函數(shù)的表達(dá)式是邏輯判斷棵介,它返回的是布爾值組成的數(shù)組
var res4 = arr.map(function(item, index, array){
return item > 20;
});
console.log(res4); // false,false,true,false,false,true,true,false,false
2.如果給定處理函數(shù)的表達(dá)式是運(yùn)算表達(dá)式,它返回的是每一項(xiàng)運(yùn)算后的結(jié)果的數(shù)組
var res5 = arr.map(function(item, index, array){
return item * 2;
});
console.log(res5); // 2,24,64,4,6,88,240,6,10
reduce
reduce方法對(duì)累加器和數(shù)組中的每個(gè)元素(從左到右)應(yīng)用一個(gè)函數(shù)吧史,將其減少為單個(gè)值邮辽。回調(diào)函數(shù)有兩個(gè)必須的參數(shù):
1.accumulator贸营,累加器累加回調(diào)的返回值; 它是上一次調(diào)用回調(diào)時(shí)返回的累積值
2.currentValue吨述,數(shù)組中正在處理的元素。
var res6 = arr.reduce(function(accumulator, item){
return accumulator + item;
});
console.log(res6); // 222
reduce的最重要點(diǎn)就是利用累加器參數(shù)(accumulator)了钞脂,如果值操作第二個(gè)參數(shù) item, 將會(huì)只處理數(shù)組最后一項(xiàng)揣云,跟for循環(huán)中的i的效果一樣
var arr = [1, 12, 32, 2, 3, 44, 120, 3, 5];
var res66 = arr.reduce(function(accumulator, item){
return item * 2;
});
console.log('res66', res66); // 10
上面的代碼試圖只操作 item ,結(jié)果只是返回了數(shù)組最后一項(xiàng)的處理結(jié)果:5 * 2 = 10
S6為Array增加了find()冰啃,findIndex函數(shù)邓夕。find()函數(shù)用來查找目標(biāo)元素肋层,找到就返回該元素,找不到返回undefined翎迁,而findIndex()函數(shù)也是查找目標(biāo)元素况木,找到就返回元素的位置纷跛,找不到就返回-1矢劲。
數(shù)組實(shí)例的find方法潭苞,用于找出第一個(gè)符合條件的數(shù)組成員。它的參數(shù)是一個(gè)回調(diào)函數(shù)痴腌,所有數(shù)組成員依次執(zhí)行該回調(diào)函數(shù)雌团,直到找出第一個(gè)返回值為true的成員,然后返回該成員士聪。如果沒有符合條件的成員锦援,則返回undefined。
[1, 4, -5, 10].find((n) => n < 0)
// -5
[1, 5, 10, 15].find(function(value, index, arr) {
return value > 9;
}) // 10
上面代碼中剥悟,find方法的回調(diào)函數(shù)可以接受三個(gè)參數(shù)灵寺,依次為當(dāng)前的值、當(dāng)前的位置和原數(shù)組区岗。
數(shù)組實(shí)例的findIndex方法的用法與find方法非常類似略板,返回第一個(gè)符合條件的數(shù)組成員的位置,如果所有成員都不符合條件慈缔,則返回-1叮称。
[1, 5, 10, 15].findIndex(function(value, index, arr) {
return value > 9;
}) // 2
這兩個(gè)方法都可以接受第二個(gè)參數(shù),用來綁定回調(diào)函數(shù)的this對(duì)象藐鹤。
另外瓤檐,這兩個(gè)方法都可以發(fā)現(xiàn)NaN,彌補(bǔ)了數(shù)組的IndexOf方法的不足娱节。
[NaN].indexOf(NaN)
// -1
[NaN].findIndex(y => Object.is(NaN, y))
// 0
上面代碼中挠蛉,indexOf方法無法識(shí)別數(shù)組的NaN成員,但是findIndex方法可以借助Object.is方法做到括堤。
參考文章:https://blog.csdn.net/tang15886395749/article/details/65629898