本文實(shí)例講述了JavaScript函數(shù)式編程(Functional Programming)高階函數(shù)(Higher order functions)用法。分享給大家供大家參考，具體如下：

高階函數(shù)（higher-order functions），就是返回其它函數(shù)的函數(shù)，或者使用其它函數(shù)作為它的參數(shù)的函數(shù)。

使用函數(shù)作為參數(shù)

因?yàn)楹瘮?shù)本身就是一個(gè)值，所以可以讓函數(shù)作為參數(shù)傳遞給其它的函數(shù)。JavaScript 有些函數(shù)就需要用到函數(shù)類型的參數(shù)，比如 Array.map。

比如我有一組數(shù)據(jù)：

const names = ['小貓', '小狗', '小刺猬']

我要分別問候一下這組數(shù)據(jù)里的每個(gè)項(xiàng)目：

const greetings = names.map(function(name) {
 return `hi ~ ${name}`
})
console.log(greetings)
// ["hi ~ 小貓", "hi ~ 小狗", "hi ~ 小刺猬"]

上面的 map 方法里用了一個(gè)匿名函數(shù)作為它的參數(shù)。在這個(gè)函數(shù)里面，我們?cè)跀?shù)組里的每個(gè)項(xiàng)目的前面都加上了一個(gè) “hi ~” ，map 會(huì)返回一個(gè)新的數(shù)組，這個(gè)數(shù)組我交給了 greetings 變量。

用箭頭函數(shù)會(huì)更簡潔一些：

const greetings = names.map(name => `hi ~ ${name}`)

高階函數(shù)

高階函數(shù)（higher-order functions）。在 JavaScript 里面，函數(shù)跟普通的對(duì)象沒啥大區(qū)別，所以你可以讓函數(shù)作為參數(shù)傳遞到其它的函數(shù)里面，你也可以在函數(shù)里返回函數(shù)。使用函數(shù)作為參數(shù)的函數(shù)，或者返回函數(shù)的函數(shù)，這些函數(shù)被稱為高階函數(shù)（higher-order functions）。

比如剛才我們用的 map 就是一個(gè)高階函數(shù)，因?yàn)樗鼤?huì)用到一個(gè)函數(shù)作為它的參數(shù)。

再看一個(gè)例子：

const robot = (name, action) => {
 return action(name)
}
const greet = (name) => {
 return `hello, ${name}`
}
const greeting = robot(' 您好 ', greet)
// 返回 “ hello, 您好 ”

robot 是個(gè)函數(shù)，它支持兩個(gè)參數(shù)，name 與 action，這里的 action 參數(shù)的類型是一個(gè)函數(shù)。在 robot 里面返回了 action ，并且把 name 參數(shù)的值交給了 action。接下面我們又定義了一個(gè)函數(shù)叫 greet，它接受一個(gè)參數(shù)是 name ，這個(gè)函數(shù)會(huì)返回一個(gè)字符串。

然后我們用了一下 robot 這個(gè)函數(shù)，設(shè)置了一下它的兩個(gè)參數(shù)的值，name 參數(shù)的值是 ' 您好 ‘，action 參數(shù)的值是我們定義的 greet 這個(gè)函數(shù)。執(zhí)行的結(jié)果就會(huì)是：

hello, 您好

我們可以再去定義一下函數(shù)：

const goodbye = (name) => {
 return `bye, ${name}`
}

然后再用一下 robot 函數(shù)：

const byeBye = robot(' 您好 ', goodbye)

這次會(huì)返回：

bye, 您好

完整的例子：

const robot = (name, action) => {
 return action(name)
}
const greet = (name) => {
 return `hello, ${name}`
}
const greeting = robot(' 您好 ', greet)
console.log(greeting)
const goodbye = (name) => {
 return `bye, ${name}`
}
const byeBye = robot(' 您好 ', goodbye)
console.log(byeBye)

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

最新評(píng)論