map,filter,reduce,every,some,find,findIndex詳解

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

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末碌秸,一起剝皮案震驚了整個(gè)濱河市绍移,隨后出現(xiàn)的幾起案子悄窃,更是在濱河造成了極大的恐慌,老刑警劉巖蹂窖,帶你破解...
    沈念sama閱讀 218,122評(píng)論 6 505
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件轧抗,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡瞬测,警方通過查閱死者的電腦和手機(jī)横媚,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,070評(píng)論 3 395
  • 文/潘曉璐 我一進(jìn)店門纠炮,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人灯蝴,你說我怎么就攤上這事恢口。” “怎么了穷躁?”我有些...
    開封第一講書人閱讀 164,491評(píng)論 0 354
  • 文/不壞的土叔 我叫張陵耕肩,是天一觀的道長(zhǎng)。 經(jīng)常有香客問我问潭,道長(zhǎng)猿诸,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,636評(píng)論 1 293
  • 正文 為了忘掉前任狡忙,我火速辦了婚禮梳虽,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘灾茁。我一直安慰自己窜觉,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,676評(píng)論 6 392
  • 文/花漫 我一把揭開白布北专。 她就那樣靜靜地躺著竖螃,像睡著了一般。 火紅的嫁衣襯著肌膚如雪逗余。 梳的紋絲不亂的頭發(fā)上特咆,一...
    開封第一講書人閱讀 51,541評(píng)論 1 305
  • 那天,我揣著相機(jī)與錄音录粱,去河邊找鬼腻格。 笑死,一個(gè)胖子當(dāng)著我的面吹牛啥繁,可吹牛的內(nèi)容都是我干的菜职。 我是一名探鬼主播,決...
    沈念sama閱讀 40,292評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼旗闽,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼酬核!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起适室,我...
    開封第一講書人閱讀 39,211評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤嫡意,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后捣辆,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體蔬螟,經(jīng)...
    沈念sama閱讀 45,655評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,846評(píng)論 3 336
  • 正文 我和宋清朗相戀三年汽畴,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了旧巾。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片耸序。...
    茶點(diǎn)故事閱讀 39,965評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖鲁猩,靈堂內(nèi)的尸體忽然破棺而出坎怪,到底是詐尸還是另有隱情,我是刑警寧澤廓握,帶...
    沈念sama閱讀 35,684評(píng)論 5 347
  • 正文 年R本政府宣布芋忿,位于F島的核電站,受9級(jí)特大地震影響疾棵,放射性物質(zhì)發(fā)生泄漏戈钢。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,295評(píng)論 3 329
  • 文/蒙蒙 一是尔、第九天 我趴在偏房一處隱蔽的房頂上張望殉了。 院中可真熱鬧,春花似錦拟枚、人聲如沸薪铜。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,894評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽隔箍。三九已至,卻和暖如春脚乡,著一層夾襖步出監(jiān)牢的瞬間蜒滩,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,012評(píng)論 1 269
  • 我被黑心中介騙來泰國(guó)打工奶稠, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留俯艰,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,126評(píng)論 3 370
  • 正文 我出身青樓锌订,卻偏偏與公主長(zhǎng)得像竹握,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子辆飘,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,914評(píng)論 2 355