生動形象解釋forEach、filter、map、some、every、find、findIndex、reduce間的區別
[(8) 生動形象解釋forEach、filter、map、some、every、find、findIndex、reduce間的區別 - SegmentFault 思否](https://segmentfault.com/a/1190000018826980 )]
前言
從最開始學的for迴圈遍歷方法,到後來層出不窮的各種遍歷方法,其實最大的區別就是應用場景的不同。
我們最需要記住的就是,什麼情況下用哪一種方法比較合適。
從挑土豆開始
這裡有一堆土豆,如果換成程式碼,可以表示如下:
var potatos = [{ id: '1001', weight: 50 },
{ id: '1002', weight: 80 },
{ id: '1003', weight: 120 },
{ id: '1004', weight: 40 },
{ id: '1005', weight: 110 },
{ id: '1006', weight: 60 }]
同時把上面的重量(g)記錄成一個數組
var w = [50, 80, 120, 40, 110, 60]
農民:我要催熟(批量操作)
我們希望把這一批土豆全部催熟一下,進行增重
可以用到forEach
方法
potatos.forEach(potato => { potato.weight += 20 })
map
方法說:我也可以!
potatos.map(potato => { potato.weight += 20 })
map
補充了一句,我還可以把重量統計表格,更新出一份新的給你
w = potatos.map(potato =>
{ return potato.weight += 20 })
//[ 70, 100, 140, 60, 130, 80 ]
forEach和map的最大區別就在於,forEach沒有返回值。
即便你給forEach加上return也沒用
w = potatos.forEach(potato =>
{ return potato.weight += 20 })
//undefined
老闆:我只要大土豆(篩選過濾)
filter
是濾波的意思
從名字上看,就知道篩選過濾這樣的活是filter
來乾的
var bigOnes = potatos.filter(potato => { return potato.weight > 100 })
//[ { id: '1003', weight: 120 }, { id: '1005', weight: 110 } ]
返回一個新的物件陣列,並不會改變原陣列
商販:你這有沒有大的啊(有符合)
旁邊的小商販嘲笑我們說,我們這都是小土豆,不中用的
那不得找一個巨無霸給他看看
當只需要判斷陣列中有沒有符合條件的時候(一個就行)
就需要我們的some
方法登場了
var hasbig = potatos.some(potato => { return potato.weight > 100 })
//true
我們的some
小夥計,去土豆存放的倉庫進行尋找,只要找到一個符合條件的,就回來報告true
所以並不會全部遍歷,不做多餘的活(效能優良)
商販:難道全都是大的嗎(全符合)
小商販不服了,我不信你這全是大的
派了個every
小夥計去檢查
var allbig = potatos.every(potato => { return potato.weight > 100 })
//false
every
對每一個元素執行一個callback
,直到它找到一個使callback
返回false
的元素(沒那麼大的土豆),就返回false
,直到遍歷完成也沒有返回false
的話,就返回true
顧客:給我個大土豆(返回一個符合的)
來了一個顧客,想要一個大土豆find
自告奮勇,我去找給他
var big = potatos.find(potato => { return potato.weight > 100 })
//{ id: '1003', weight: 120 }
find
和some
很類似,都是尋找符合條件的,有一個就可以
不過some
進去搜羅了一圈回來報了個“有”(true
),而find
則把那個土豆抱了出來(返回第一個符合條件的物件)
收銀員:這土豆是倉庫的第幾個來著(返回序號)
收銀員賣完準備記錄一下
“哎,這土豆是倉庫的第幾個?”find
說:“哎呀我光顧著抱土豆了,沒看是第幾個”
“你這粗心鬼,早知道讓findIndex
跟你一起去了”
var i = potatos.findIndex(potato=>{ return potato.weight > 100 })
//2
當需要知道所需元素的索引,就可以用findIndex
findIndex
返回第一個符合條件的索引號
老闆:今年收成如何呀(遞迴累加)
說起來還不知道今年收成到底怎麼樣呢
誰數學好 把表格上那些土豆重量加一加reduce
說:那不得我來麼
var sum = weight.reduce((sum, w) => { return w + sum },0)
//460
//並不會改變原表格
reduce()方法接收一個回撥函式作為第一個引數,回撥函式又接受四個引數,分別是:
1、previousValue =>初始值或上一次回撥函式疊加的值;
2、currentValue => 本次回撥(迴圈)將要執行的值;
3、index=>“currentValue”的索引值;
4、arr => 陣列本身;
reduce()方法返回的是最後一次呼叫回撥函式的返回值;
也可以這樣
var sum = potatos.reduce((sum, p) =>
{ return p.weight + sum },0)
//460
reduce
能力其實不止於此,這裡知道基本用法即可
總結
在土豆身上,我們學會了這些方法的基本應用場景,還有一些高階用法,比如上面提到的reduce
,可以用來扁平陣列,陣列去重等等,以後再進行更深入的研究與介紹
希望這篇文章對大家區分這些方法有所幫助~