生動(dòng)形象解釋forEach污秆、filter昧甘、map充边、some、every、find刮吧、findIndex杀捻、reduce間的區(qū)別

前言

從最開始學(xué)的for循環(huán)遍歷方法,到后來層出不窮的各種遍歷方法仅仆,其實(shí)最大的區(qū)別就是應(yīng)用場(chǎng)景的不同垢袱。 我們最需要記住的就是,什么情況下用哪一種方法比較合適咳榜。

從挑橙子開始

這里有一堆橙子,如果換成代碼畔柔,可以表示如下:

var oranges = [{ id: '1001', weight: 50 },
{ id: '1002', weight: 80 },
{ id: '1003', weight: 120 },
{ id: '1004', weight: 40 },
{ id: '1005', weight: 110 },
{ id: '1006', weight: 60 }]

同時(shí)把上面的重量(g)記錄成一個(gè)數(shù)組

var w = [50, 80, 120, 40, 110, 60]

農(nóng)民:我要催熟(批量操作)

我們希望把這一批橙子全部催熟一下靶擦,進(jìn)行增重 可以用到forEach方法

oranges.forEach(orange =>  orange.weight += 20 )

當(dāng)然雇毫,map也跳出來了:我也可以!

oranges.map(orange => orange.weight += 20 )

不過雖然map也能批量操作桩盲,但從語義上來說用forEach方法更合適

農(nóng)場(chǎng)主:給我一份整理好的重量表格

map最適合做的事是映射赌结,生成原始數(shù)據(jù)的特征信息的map

相比較之下孝冒,forEach是沒有返回值的, 即便加上return也沒有用

 w = oranges.forEach(orange => { return orange.weight += 20 })
//undefined

map有返回值,可以把橙子的重量統(tǒng)計(jì)匯總量承,整理出一份表格

w = oranges.map(orange => { return orange.weight += 20 })
//[ 70, 100, 140, 60, 130, 80 ]

老板:我只要大橙子(篩選過濾)

filter是濾波的意思 從名字上看穴店,就知道篩選過濾這樣的活是filter來干的

var bigOnes = oranges.filter(orange => { return orange.weight > 100 })

//[ { id: '1003', weight: 120 }, { id: '1005', weight: 110 } ]

返回一個(gè)新的對(duì)象數(shù)組泣洞,并不會(huì)改變?cè)瓟?shù)組

商販:你這有沒有大的啊(有符合)

旁邊的小商販嘲笑我們說狮腿,我們這都是小橙子呕诉,不中用的 那不得找一個(gè)巨無霸給他看看

當(dāng)只需要判斷數(shù)組中有沒有符合條件的時(shí)候(一個(gè)就行) 就需要我們的some方法登場(chǎng)了

var hasbig = oranges.some(orange => { return orange.weight > 100 })

//true

我們的some小伙計(jì)甩挫,去橙子存放的倉庫進(jìn)行尋找,只要找到一個(gè)符合條件的伊者,就回來報(bào)告true所以并不會(huì)全部遍歷,不做多余的活(性能優(yōu)良)

商販:難道全都是大的嗎(全符合)

小商販不服了贪绘,我不信你這全是大的 派了個(gè)every小伙計(jì)去檢查

var allbig = oranges.every(orange => { return orange.weight > 100 })

//false

every對(duì)每一個(gè)元素執(zhí)行一個(gè)callback兑牡,直到它找到一個(gè)使 callback 返回 false的元素(沒那么大的橙子),就返回false税灌,直到遍歷完成也沒有返回false的話均函,就返回true

顧客:給我個(gè)大橙子(返回一個(gè)符合的)

來了一個(gè)顧客,想要一個(gè)大橙子 find自告奮勇菱涤,我去找給他

var big = oranges.find(orange => { return orange.weight > 100 })

//{ id: '1003', weight: 120 }

findsome很類似苞也,都是尋找符合條件的,有一個(gè)就可以 不過some進(jìn)去搜羅了一圈回來報(bào)了個(gè)“有”(true)粘秆,而find則把那個(gè)橙子抱了出來(返回第一個(gè)符合條件的對(duì)象)

收銀員:這橙子是倉庫的第幾個(gè)來著(返回序號(hào))

收銀員賣完準(zhǔn)備記錄一下

“哎如迟,這橙子是倉庫的第幾個(gè)?” find說:“哎呀我光顧著抱橙子了攻走,沒看是第幾個(gè)”

“你這粗心鬼,早知道讓findIndex跟你一起去了”

var i = oranges.findIndex(orange=>{ return orange.weight > 100 })

//2

當(dāng)需要知道所需元素的索引昔搂,就可以用findIndex

findIndex返回第一個(gè)符合條件的索引號(hào)

老板:今年收成如何呀(遞歸累加)

說起來還不知道今年收成到底怎么樣呢 誰數(shù)學(xué)好 把表格上那些橙子重量加一加

reduce說:那不得我來么

var sum = weight.reduce((sum, w) => { return w + sum },0)

//460
//并不會(huì)改變?cè)砀?

reduce()方法接收一個(gè)回調(diào)函數(shù)作為第一個(gè)參數(shù)玲销,回調(diào)函數(shù)又接受四個(gè)參數(shù),分別是摘符;
1贤斜、previousValue =>初始值或上一次回調(diào)函數(shù)疊加的值;
2逛裤、currentValue => 本次回調(diào)(循環(huán))將要執(zhí)行的值瘩绒;
3、index=>“currentValue”的索引值带族;
4锁荔、arr => 數(shù)組本身;
reduce()方法返回的是最后一次調(diào)用回調(diào)函數(shù)的返回值炉菲;

也可以這樣

  var sum = oranges.reduce((sum, p) => 
  { return p.weight + sum },0)

  //460

reduce能力其實(shí)不止于此堕战,這里知道基本用法即可

總結(jié)

在橙子身上坤溃,我們學(xué)會(huì)了這些方法的基本應(yīng)用場(chǎng)景拍霜,還有一些高階用法,比如上面提到的reduce薪介,可以用來扁平數(shù)組祠饺,數(shù)組去重等等,以后再進(jìn)行更深入的研究與介紹

本文參照https://juejin.im/post/5d08467fe51d451063431814

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末汁政,一起剝皮案震驚了整個(gè)濱河市道偷,隨后出現(xiàn)的幾起案子缀旁,更是在濱河造成了極大的恐慌,老刑警劉巖勺鸦,帶你破解...
    沈念sama閱讀 217,277評(píng)論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件并巍,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡换途,警方通過查閱死者的電腦和手機(jī)懊渡,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,689評(píng)論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來军拟,“玉大人剃执,你說我怎么就攤上這事⌒赶ⅲ” “怎么了肾档?”我有些...
    開封第一講書人閱讀 163,624評(píng)論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)辫继。 經(jīng)常有香客問我怒见,道長(zhǎng),這世上最難降的妖魔是什么骇两? 我笑而不...
    開封第一講書人閱讀 58,356評(píng)論 1 293
  • 正文 為了忘掉前任速种,我火速辦了婚禮,結(jié)果婚禮上低千,老公的妹妹穿的比我還像新娘配阵。我一直安慰自己,他們只是感情好示血,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,402評(píng)論 6 392
  • 文/花漫 我一把揭開白布棋傍。 她就那樣靜靜地躺著,像睡著了一般难审。 火紅的嫁衣襯著肌膚如雪瘫拣。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,292評(píng)論 1 301
  • 那天告喊,我揣著相機(jī)與錄音麸拄,去河邊找鬼。 笑死黔姜,一個(gè)胖子當(dāng)著我的面吹牛拢切,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播秆吵,決...
    沈念sama閱讀 40,135評(píng)論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼淮椰,長(zhǎng)吁一口氣:“原來是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起主穗,我...
    開封第一講書人閱讀 38,992評(píng)論 0 275
  • 序言:老撾萬榮一對(duì)情侶失蹤泻拦,失蹤者是張志新(化名)和其女友劉穎,沒想到半個(gè)月后忽媒,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體争拐,經(jīng)...
    沈念sama閱讀 45,429評(píng)論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,636評(píng)論 3 334
  • 正文 我和宋清朗相戀三年晦雨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了陆错。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 39,785評(píng)論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡金赦,死狀恐怖音瓷,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情夹抗,我是刑警寧澤绳慎,帶...
    沈念sama閱讀 35,492評(píng)論 5 345
  • 正文 年R本政府宣布,位于F島的核電站漠烧,受9級(jí)特大地震影響杏愤,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜已脓,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,092評(píng)論 3 328
  • 文/蒙蒙 一珊楼、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧度液,春花似錦厕宗、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,723評(píng)論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至霹购,卻和暖如春佑惠,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背齐疙。 一陣腳步聲響...
    開封第一講書人閱讀 32,858評(píng)論 1 269
  • 我被黑心中介騙來泰國打工膜楷, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人贞奋。 一個(gè)月前我還...
    沈念sama閱讀 47,891評(píng)論 2 370
  • 正文 我出身青樓赌厅,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國和親忆矛。 傳聞我的和親對(duì)象是個(gè)殘疾皇子察蹲,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,713評(píng)論 2 354

推薦閱讀更多精彩內(nèi)容