Javascript 常見(jiàn)的高階函數(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
一、常見(jiàn)的高階函數(shù)
ES6
中數(shù)組新增了幾種方法,其中 map
、reduce
、filter
幾個(gè)都是高階函數(shù),除此,普通的sort
也是高階函數(shù)。分別介紹下新增的三個(gè)方法。
1.1、filter
filter
是過(guò)濾數(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è)瓉?lái)的數(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ù)組,出來(lái)是一個(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)來(lái)了,如果我們想把上邊三個(gè)實(shí)例合并到一起執(zhí)行,最終我們可以寫(xiě)得有多簡(jiǎn)單呢?
負(fù)責(zé)寫(xiě)法:
// 復(fù)雜寫(xiě)法 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)單寫(xiě)法:
//簡(jiǎn)單寫(xiě)法 let sum2 = grad .filter( item => {return item <= 100}) .map(item=>{return item*2}) .reduce((tmp,item)=>{return tmp+item})
到此這篇關(guān)于Javascript
常見(jiàn)的高階函數(shù)詳情的文章就介紹到這了,更多相關(guān)Javascript
常見(jiàn)的高階函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來(lái)進(jìn)行設(shè)置和讀取緩存
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)緩存根據(jù)不同的id來(lái)進(jìn)行設(shè)置和讀取緩存的相關(guān)資料,需要的朋友可以參考下2017-06-06微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04JavaScript?設(shè)計(jì)模式之洋蔥模型原理及實(shí)踐應(yīng)用
這篇文章主要介紹了JavaScript?設(shè)計(jì)模式之洋蔥模型原理及實(shí)踐應(yīng)用,主要針對(duì)項(xiàng)目中遇到的問(wèn)題,引申到koa-compose原理解析。通過(guò)學(xué)習(xí)洋蔥模式來(lái)解決我們實(shí)際項(xiàng)目中的問(wèn)題2022-09-09TypeScript與JavaScript對(duì)比及打包工具比較
這篇文章主要為大家介紹了TypeScript與JavaScript對(duì)比及打包工具比較,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-03-03微信小程序(三):網(wǎng)絡(luò)請(qǐng)求
本篇文章主要介紹了微信小程序(三):網(wǎng)絡(luò)請(qǐng)求。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01微信小程序 轉(zhuǎn)發(fā)功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 轉(zhuǎn)發(fā)功能的實(shí)現(xiàn)的相關(guān)資料,這里提供實(shí)現(xiàn)方法及實(shí)例幫助大家學(xué)習(xí)理解,需要的朋友可以參考下2017-08-08微信小程序 五星評(píng)價(jià)功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 五星評(píng)價(jià)功能的實(shí)現(xiàn)的相關(guān)資料,這里附有實(shí)例代碼及實(shí)現(xiàn)效果圖,需要的朋友可以參考下2017-03-03微信小程序 form組件詳解及簡(jiǎn)單實(shí)例
這篇文章主要介紹了微信小程序 form組件詳解及簡(jiǎn)單實(shí)例的相關(guān)資料,需要的朋友可以參考下2017-01-01