ES6如何用一句代碼實(shí)現(xiàn)函數(shù)的柯里化
柯里化是干什么的?首先看看下面這個(gè)函數(shù)
let store = (a,b,c) => "這是你的七仔面" //函數(shù)就好像一個(gè)小賣部,一碗七仔面要三張軟妹幣:a,b,c (五個(gè)參數(shù))
那函數(shù)柯里化是什么?就是我們買面吃的過(guò)程可能是這樣:
let curryStore = curry(store) //剛剛的小賣部被柯里化了 //最佳狀況 curryStore(1,5,1)// 老板,剛好!不用找了,剛好七塊錢。老板: "這是你的七仔面" //偶爾出現(xiàn)的情況 let boss = curryStore(5) //老板,這五塊錢你先拿著,我找找有沒(méi)有一塊錢。老板:…… boss = boss(1) //有了老板,這一塊錢你先拿著,我找找還有沒(méi)有一塊錢。。老板:…… boss(1) //哈哈,終于找到了,給!老板:"這是你的七仔面" curryStore(5)(1)(1) //等價(jià)于上訴情況
所以這里我們可以看到,函數(shù)柯里化,是可以用來(lái)慢慢湊齊參數(shù),延遲函數(shù)的執(zhí)行。(先分期交錢,后交貨?。?/p>
做個(gè)題
現(xiàn)在,我們的目標(biāo)是實(shí)現(xiàn)一個(gè)curry 函數(shù),達(dá)到以下使用效果:
在給到足夠的參數(shù)時(shí),執(zhí)行函數(shù)。不夠參數(shù)的時(shí)候則返回一個(gè)新的curry函數(shù)。
let curryPlus = curry((a,b,c) => a+b+c) //這里給到一個(gè)有三個(gè)參數(shù)的函數(shù) curryPlus(1)(2)(3) //返回 6 curryPlus(1)(2,3) //返回 6 curryPlus(1,2)(3) //返回 6 let x = curryPlus(1)(2) //喂,怎么才兩個(gè)參數(shù)?返回一個(gè)curry函數(shù)(已經(jīng)帶了兩個(gè)參數(shù)) x(1) //返回 4 x(2) //返回 5
作為一個(gè)js很厲害的人,這種問(wèn)題用一行代碼解決不是問(wèn)題,問(wèn)題是我沒(méi)那么厲害。。。
于是,我們先從土方法說(shuō)起吧orz
按照curry的用法,原理是返回了一個(gè)函數(shù),這個(gè)函數(shù)的參數(shù)個(gè)數(shù)不確定(你可能同時(shí)掏出兩張一塊錢),于是我們可以運(yùn)用不定參數(shù)的寫(xiě)法:
const curry = (fn) => { return (...args) =>{ //不定參數(shù),想給多少給多少 //給錢交貨環(huán)節(jié) } }
柯里化函數(shù)需要記住你已經(jīng)給過(guò)他的參數(shù),如果沒(méi)給的話,則默認(rèn)為一個(gè)空數(shù)組:
const curry = (fn,arr=[]) => { //arr數(shù)組用于記錄已有參數(shù) return (...args) =>{ //給錢交貨環(huán)節(jié) } }
接下來(lái)每次調(diào)用的時(shí)候,需要檢查參數(shù)是否給夠,如果夠了,則執(zhí)行fn,沒(méi)有的話則返回一個(gè)新的curry函數(shù),將現(xiàn)有的參數(shù)塞給他:
const curry = ( fn, arr = []) => { return (...args) => { //判斷參數(shù)總數(shù)是否和fn參數(shù)個(gè)數(shù)相等 if([...arr, ...args].length === fn.length){ return fn(...arr, ...args) //拓展參數(shù),調(diào)用fn }else{ return curry(fn,[...arr, ...args]) //迭代,傳入現(xiàn)有的所有參數(shù) } } }
到這里,其實(shí)我們已經(jīng)實(shí)現(xiàn)了curry函數(shù)。
接下來(lái)就是要看看怎么寫(xiě)才能更簡(jiǎn)潔。
首先,中間的代碼可以寫(xiě)成一個(gè)立即執(zhí)行函數(shù),省掉一些...arr, ...args:
const curry = ( fn, arr = []) => { return (...args) => { return ( a => { //a是一個(gè)數(shù)組 if(a.length === fn.length) { return fn(...a) }else{ return curry(fn, a) } })([...arr, ...args]) //這里把a(bǔ)rr和args攤開(kāi)成一個(gè)數(shù)組賦值給a } }
if語(yǔ)句可以縮減成三元表達(dá)式,也可以省掉很多字啦:
const curry = ( fn, arr = []) => { return (...args) => { return ( a => { return a.length === fn.length ? fn(...a) : curry(fn, a) })([...arr, ...args]) } }
最后,既然函數(shù)里啥事都沒(méi)干,就只是return的話,不妨使用箭頭函數(shù)最省的寫(xiě)法 input => output, 把return和大括號(hào)都給省了:
const curry = ( fn, arr = []) => { return (...args) => { return ( a => a.length === fn.length? fn(...a) : curry(fn, a))([...arr, ...args]) //先折疊一層 } }
再折疊:
const curry = ( fn, arr = []) => { return (...args) => ( a => a.length === fn.length? fn(...a) : curry(fn, a))([...arr, ...args]) //再折疊 }
收工了收工了:
const curry = ( fn, arr = []) => (...args) => ( a => a.length === fn.length? fn(...a) : curry(fn, a))([...arr, ...args]) //衣服給您疊好了
拿去試試:
const curry = ( fn, arr = []) => (...args) => ( a => a.length === fn.length? fn(...a) : curry(fn, a))([...arr, ...args]) let curryPlus = curry((a,b,c,d)=>a+b+c+d) curryPlus(1,2,3)(4) //返回10 curryPlus(1,2)(4)(3) //返回10 curryPlus(1,2)(3,4) //返回10
當(dāng)然了,柯里化函數(shù)的主要作用還是延遲執(zhí)行,執(zhí)行的觸發(fā)條件不一定是參數(shù)個(gè)數(shù)相等,也可以是其他的條件,例如參數(shù)個(gè)為0的情況,那么我們需要對(duì)上面curry函數(shù)稍微做修改:
const curry = ( fn, arr = []) => (...args) => ( (a,b) => b.length === 0? fn(...a) : curry(fn, a))([...arr, ...args],[...args]) let curryPlus = curry((...x)=>x.reduce((a,b)=>a+b)) curryPlus(1) //返回一個(gè)函數(shù) curryPlus(1)(2) //返回一個(gè)函數(shù) //遇到參數(shù)個(gè)數(shù)為0的情況才執(zhí)行 curryPlus(1)(2)(4)() //返回7 curryPlus(1,2)(4)() //返回7
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
網(wǎng)絡(luò)請(qǐng)求axios與fetch的區(qū)別及使用示例
Fetch和Axios是兩個(gè)常用的JavaScript庫(kù),用于處理數(shù)據(jù)請(qǐng)求,下面這篇文章主要給大家介紹了關(guān)于網(wǎng)絡(luò)請(qǐng)求axios與fetch的區(qū)別及使用的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-04-04JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)圖片無(wú)縫滾動(dòng)效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-07-07pace.js和NProgress.js兩個(gè)加載進(jìn)度插件的一點(diǎn)小總結(jié)
這兩個(gè)插件都是關(guān)于加載進(jìn)度動(dòng)畫(huà)的,今天就和大家一起了解下pace.js和NProgress.js兩個(gè)加載進(jìn)度插件的一點(diǎn)小總結(jié),感興趣的朋友一起看看吧2018-01-01JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)詳細(xì)代碼
這篇文章主要給大家介紹了關(guān)于JavaScript滑動(dòng)驗(yàn)證功能實(shí)現(xiàn)的相關(guān)資料,滑動(dòng)拼圖驗(yàn)證功能是一種常見(jiàn)的網(wǎng)站人機(jī)驗(yàn)證方法,旨在防止惡意機(jī)器人或自動(dòng)化程序?qū)W(wǎng)站進(jìn)行惡意攻擊,需要的朋友可以參考下2024-06-06JS實(shí)現(xiàn)仿騰訊微博無(wú)刷新刪除微博效果代碼
這篇文章主要介紹了JS實(shí)現(xiàn)仿騰訊微博無(wú)刷新刪除微博效果代碼,涉及JavaScript實(shí)現(xiàn)Ajax無(wú)刷新刪除的相關(guān)實(shí)現(xiàn)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10JavaScript動(dòng)態(tài)修改彈出窗口大小的方法
這篇文章主要介紹了JavaScript動(dòng)態(tài)修改彈出窗口大小的方法,涉及javascript中window.open方法的使用技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04關(guān)于JavaScript中事件綁定的方法總結(jié)
下面小編就為大家?guī)?lái)一篇JavaScript中事件綁定的方法總結(jié)。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-10-10微信小程序使用webview打開(kāi)pdf文檔以及顯示網(wǎng)頁(yè)內(nèi)容的方法步驟
在線查看PDF文件,已經(jīng)是很常見(jiàn)的需求了,下面這篇文章主要給大家介紹了關(guān)于微信小程序使用webview打開(kāi)pdf文檔以及顯示網(wǎng)頁(yè)內(nèi)容的方法步驟,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-07-07Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法
本篇文章主要介紹了Bootstrap 模態(tài)框多次顯示后臺(tái)提交多次BUG的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-12-12