生動形象解釋forEach、filter、map、some、every、find、reduce間的區別
前言
從最開始學的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
因為要檢查所有元素是否都符合條件,所以效能比較差
因此一些簡單的情況,可以反向檢查
比如這一例,可以換成用 some
檢查是否有小個的,再將結果取反,就可以減少遍歷,節省效能
var allbig=!potatos.some(potato => { return potato.weight <= 100 }) //false
顧客:給我個大土豆(返回一個符合的)
來了一個顧客,想要一個大土豆
find
自告奮勇,我去找給他
var big = potatos.find(potato => { return potato.weight > 100 }) //{ id: '1003', weight: 120 }
find
和 some
很類似,都是尋找符合條件的,有一個就可以
不過 some
進去搜羅了一圈回來報了個“有”( true
),而 find
則把那個土豆抱了出來(返回第一個符合條件的物件)
老闆:今年收成如何呀(遞迴累加)
說起來還不知道今年收成到底怎麼樣呢
誰數學好 把表格上那些土豆重量加一加
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) //undefined[object Object]
reduce
能力不止於此,還可以扁平化二維陣列,將物件陣列的屬性放到另外一個數組中,陣列去重等等,這裡不做深入探究,知道基本用法就可以
總結
在土豆身上,我們學會了這些方法的基本應用場景,其實還有一些高階用法,比如 reduce
的扁平陣列,去重,以後再進行更深入的研究與介紹
希望這篇文章對大家區分這些方法有所幫助~