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ù)責(zé)寫法:
// 復(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)單寫法:
//簡(jiǎn)單寫法
let sum2 = grad
.filter( item => {return item <= 100})
.map(item=>{return item*2})
.reduce((tmp,item)=>{return tmp+item})
到此這篇關(guān)于Javascript 常見的高階函數(shù)詳情的文章就介紹到這了,更多相關(guān)Javascript 常見的高階函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
JS觸摸屏網(wǎng)頁版仿app彈窗型滾動(dòng)列表選擇器/日期選擇器
這篇文章主要介紹了觸摸屏網(wǎng)頁版仿app彈窗型滾動(dòng)列表選擇器/日期選擇器的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-10-10
微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 向左滑動(dòng)刪除功能的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-03-03
http proxy 對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行代理使用詳解
這篇文章主要為大家介紹了http proxy 對(duì)網(wǎng)絡(luò)請(qǐng)求進(jìn)行代理使用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09
微信小程序開發(fā)之相冊(cè)選擇和拍照詳解及實(shí)例代碼
這篇文章主要介紹了微信小程序開發(fā)之相冊(cè)選擇和拍照詳解及實(shí)例代碼的相關(guān)資料,需要的朋友可以參考下2017-02-02
微信小程序 數(shù)據(jù)遍歷的實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 數(shù)據(jù)遍歷的實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
創(chuàng)建圖片對(duì)比slider滑塊示例詳解
這篇文章主要為大家介紹了創(chuàng)建圖片對(duì)比slider滑塊示例詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-08-08

