聊聊 Javascript 常見的高階函數(shù)
高階函數(shù),英文叫 Higher Order function。一個(gè)函數(shù)可以接收另外一個(gè)函數(shù)作為參數(shù),這種函數(shù)就叫做高階函數(shù)。
示例:
- function add(x, y, f) {
- return f(x) + f(y);
- }
- //用代碼驗(yàn)證一下:
- add(-5, 6, Math.abs); // 11
一、常見的高階函數(shù)
ES6中數(shù)組新增了幾種方法,其中 map、reduce、filter 幾個(gè)都是高階函數(shù),除此,普通的sort也是高階函數(shù)。分別介紹下新增的三個(gè)方法。
1.1、filter
filter 是過濾數(shù)組,返回滿足條件的數(shù)據(jù),組成一個(gè)新的數(shù)組返回,不滿足條件的被丟棄。
實(shí)例1:取出數(shù)組中小于 100 的數(shù)據(jù),放到一個(gè)新數(shù)組中
- let grad = [ 102, 188, 55, 66, 200, 800 ]
- let arr2 = grad.filter( function(item){
- return item <= 100
- })
- console.log("arr2",arr2)// 55, 66
上述實(shí)例中,filter傳入的參數(shù)是一個(gè)函數(shù),傳入的函數(shù)依次作用于每個(gè)元素,然后根據(jù)返回值是 true 或 false 決定保留還是丟棄元素。因?yàn)橹挥? 55 66 兩個(gè)滿足條件,所以新的數(shù)組中只有這兩個(gè)元素。
1.2、map
map 是映射的意思。
原數(shù)組被映射成一個(gè)新的數(shù)組,返回值是一個(gè)新數(shù)組,不改變?cè)瓉淼臄?shù)組。新的數(shù)組與原數(shù)組的長(zhǎng)度是不會(huì)改變的。
實(shí)例2:給數(shù)據(jù)每個(gè)元素放大 2 倍。
- let arr2 = [ 55, 66 ]
- let arr3 = arr2.map( item => {
- return item*2
- })
- //返回結(jié)果 [ 110, 132 ]
上述實(shí)例,map接收的參數(shù)是一個(gè)函數(shù),該函數(shù)依次作用于每個(gè)元素,對(duì)元素放大了2倍,也可以對(duì)其進(jìn)行任意的復(fù)雜操作。
1.3、reduce
reduce 是對(duì)數(shù)組進(jìn)行匯總的,往往進(jìn)去一個(gè)數(shù)組,出來是一個(gè)數(shù)據(jù)。經(jīng)常用于求和和計(jì)算平均值。
實(shí)例3:對(duì)上個(gè)實(shí)例返回的結(jié)果進(jìn)行求和。
- let sum = arr3.reduce((tmp,item)=>{
- return tmp+item
- })
- //返回結(jié)果 242
重點(diǎn)來了,如果我們想把上邊三個(gè)實(shí)例合并到一起執(zhí)行,最終我們可以寫得有多簡(jiǎn)單呢?
- // 復(fù)雜寫法
- let grad = [102,188,55,66,200,800]
- let arr2 = grad.filter(function(item){
- return item <= 100
- })
- let arr3 = arr2.map(item=>{
- return item*2
- })
- let sum = arr3.reduce((tmp,item)=>{
- return tmp+item
- })
- //簡(jiǎn)單寫法
- let sum2 = grad
- .filter( item => {return item <= 100})
- .map(item=>{return item*2})
- .reduce((tmp,item)=>{return tmp+item})