JS中精巧的自動(dòng)柯里化實(shí)現(xiàn)方法
以下內(nèi)容通過(guò)代碼講解和實(shí)例分析了JS中精巧的自動(dòng)柯里化實(shí)現(xiàn)方法,并分析了柯里化函數(shù)的基礎(chǔ)用法和知識(shí),學(xué)習(xí)一下吧。
什么是柯里化?
在計(jì)算機(jī)科學(xué)中,柯里化(Currying)是把接受多個(gè)參數(shù)的函數(shù)變換成接受一個(gè)單一參數(shù)(最初函數(shù)的第一個(gè)參數(shù))的函數(shù),并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。這個(gè)技術(shù)由 Christopher Strachey 以邏輯學(xué)家 Haskell Curry 命名的,盡管它是 Moses Schnfinkel 和 Gottlob Frege 發(fā)明的。
理論看著頭大?沒(méi)關(guān)系,先看看代碼:
柯里化應(yīng)用
假設(shè)我們需要實(shí)現(xiàn)一個(gè)對(duì)列表元素進(jìn)行某種處理的功能,比如說(shuō)讓列表內(nèi)每一個(gè)元素加一,那么很容易想到:
const list = [0, 1, 2, 3]; list.map(elem => elem + 1);
很簡(jiǎn)單是吧?如果又要加2呢?
const list = [0, 1, 2, 3]; list.map(elem => elem + 1); list.map(elem => elem + 2);
看上去效率有點(diǎn)低,處理函數(shù)封裝下?
可是map的回調(diào)函數(shù)只接受當(dāng)前元素 elem 這一個(gè)參數(shù),看上去好像沒(méi)有辦法封裝...
你也許會(huì)想:如果能拿到一個(gè)部分配置好的函數(shù)就好了,比如說(shuō):
// plus返回部分配置好的函數(shù) const plus1 = plus(1); const plus2 = plus(2); plus1(5); // => 6 plus2(7); // => 9
把這樣的函數(shù)傳進(jìn)map:
const list = [0, 1, 2, 3]; list.map(plus1); // => [1, 2, 3, 4] list.map(plus2); // => [2, 3, 4, 5]
是不是很棒棒?這樣一來(lái)不管是加多少,只需要list.map(plus(x))就好了,完美實(shí)現(xiàn)了封裝,可讀性大大提高!
不過(guò)問(wèn)題來(lái)了:這樣的plus函數(shù)要怎么實(shí)現(xiàn)呢?
這時(shí)候柯里化就能派上用場(chǎng)了:
柯里化函數(shù)
// 原始的加法函數(shù)
function origPlus(a, b) {
return a + b;
}
// 柯里化后的plus函數(shù)
function plus(a) {
return function(b) {
return a + b;
}
}
// ES6寫(xiě)法
const plus = a => b => a + b;
可以看到,柯里化的 plus 函數(shù)首先接受一個(gè)參數(shù) a,然后返回一個(gè)接受一個(gè)參數(shù) b 的函數(shù),由于閉包的原因,返回的函數(shù)可以訪問(wèn)到父函數(shù)的參數(shù) a,所以舉個(gè)例子:const plus2 = plus(2)就可等效視為function plus2(b) { return 2 + b; },這樣就實(shí)現(xiàn)了部分配置。
通俗地講,柯里化就是一個(gè)部分配置多參數(shù)函數(shù)的過(guò)程,每一步都返回一個(gè)接受單個(gè)參數(shù)的部分配置好的函數(shù)。一些極端的情況可能需要分很多次來(lái)部分配置一個(gè)函數(shù),比如說(shuō)多次相加:
multiPlus(1)(2)(3); // => 6
這種寫(xiě)法看著很奇怪吧?不過(guò)如果入了JS的函數(shù)式編程這個(gè)大坑的話,這會(huì)是常態(tài)。
JS中自動(dòng)柯里化的精巧實(shí)現(xiàn)
柯里化(Currying)是函數(shù)式編程中很重要的一環(huán),很多函數(shù)式語(yǔ)言(eg. Haskell)都會(huì)默認(rèn)將函數(shù)自動(dòng)柯里化。然而JS并不會(huì)這樣,因此我們需要自己來(lái)實(shí)現(xiàn)自動(dòng)柯里化的函數(shù)。
先上代碼:
// ES5
function curry(fn) {
function _c(restNum, argsList) {
return restNum === 0 ?
fn.apply(null, argsList) :
function(x) {
return _c(restNum - 1, argsList.concat(x));
};
}
return _c(fn.length, []);
}
// ES6
const curry = fn => {
const _c = (restNum, argsList) => restNum === 0 ?
fn(...argsList) : x => _c(restNum - 1, [...argsList, x]);
return _c(fn.length, []);
}
/***************** 使用 *********************/
var plus = curry(function(a, b) {
return a + b;
});
// ES6
const plus = curry((a, b) => a + b);
plus(2)(4); // => 6
這樣就實(shí)現(xiàn)了自動(dòng)的柯里化!
如果你看得懂發(fā)生了什么的話,那么恭喜你!大家口中的大佬就是你!,快留下贊然后去開(kāi)始你的函數(shù)式生涯吧(滑稽
如果你沒(méi)看懂發(fā)生了什么,別擔(dān)心,我現(xiàn)在開(kāi)始幫你理一下思路。
需求分析
我們需要一個(gè) curry 函數(shù),它接受一個(gè)待柯里化的函數(shù)為參數(shù),返回一個(gè)用于接收一個(gè)參數(shù)的函數(shù),接收到的參數(shù)放到一個(gè)列表中,當(dāng)參數(shù)數(shù)量足夠時(shí),執(zhí)行原函數(shù)并返回結(jié)果。
實(shí)現(xiàn)方式
簡(jiǎn)單思考可以知道,柯里化部分配置函數(shù)的步驟數(shù)等于 fn 的參數(shù)個(gè)數(shù),也就是說(shuō)有兩個(gè)參數(shù)的 plus 函數(shù)需要分兩步來(lái)部分配置。函數(shù)的參數(shù)個(gè)數(shù)可以通過(guò)fn.length獲取。
總的想法就是每傳一次參,就把該參數(shù)放入一個(gè)參數(shù)列表 argsList 中,如果已經(jīng)沒(méi)有要傳的參數(shù)了,那么就調(diào)用fn.apply(null, argsList)將原函數(shù)執(zhí)行。要實(shí)現(xiàn)這點(diǎn),我們就需要一個(gè)內(nèi)部的判斷函數(shù) _c(restNum, argsList),函數(shù)接受兩個(gè)參數(shù),一個(gè)是剩余參數(shù)個(gè)數(shù) restNum,另一個(gè)是已獲取的參數(shù)的列表 argsList;_c 的功能就是判斷是否還有未傳入的參數(shù),當(dāng) restNum 為零時(shí),就是時(shí)候通過(guò)fn.apply(null, argsList)執(zhí)行原函數(shù)并返回結(jié)果了。如果還有參數(shù)需要傳遞的話,也就是說(shuō) restNum 不為零時(shí),就需要返回一個(gè)單參數(shù)函數(shù)
function(x) {
return _c(restNum - 1, argsList.concat(x));
}
來(lái)繼續(xù)接收參數(shù)。這里形成了一個(gè)尾遞歸,函數(shù)接受了一個(gè)參數(shù)后,剩余需要參數(shù)數(shù)量 restNum 減一,并將新參數(shù) x 加入 argsList 后傳入 _c 進(jìn)行遞歸調(diào)用。結(jié)果就是,當(dāng)參數(shù)數(shù)量不足時(shí),返回負(fù)責(zé)接收新參數(shù)的單參數(shù)函數(shù),當(dāng)參數(shù)夠了時(shí),就調(diào)用原函數(shù)并返回。
現(xiàn)在再來(lái)看:
function curry(fn) {
function _c(restNum, argsList) {
return restNum === 0 ?
fn.apply(null, argsList) :
function(x) {
return _c(restNum - 1, argsList.concat(x));
};
}
return _c(fn.length, []); // 遞歸開(kāi)始
}
是不是開(kāi)始清晰起來(lái)了?
ES6寫(xiě)法的由于使用了 數(shù)組解構(gòu) 及 箭頭函數(shù) 等語(yǔ)法糖,看上去精簡(jiǎn)很多,不過(guò)思想都是一樣的啦~
// ES6
const curry = fn => {
const _c = (restNum, argsList) => restNum === 0 ?
fn(...argsList) : x => _c(restNum - 1, [...argsList, x]);
return _c(fn.length, []);
}
與其他方法的對(duì)比
還有一種大家常用的方法:
function curry(fn) {
const len = fn.length;
return function judge(...args1) {
return args1.length >= len ?
fn(...args1):
function(...args2) {
return judge(...[...args1, ...args2]);
}
}
}
// 使用箭頭函數(shù)
const curry = fn => {
const len = fn.length;
const judge = (...args1) => args1.length >= len ?
fn(...args1) : (...args2) => judge(...[...args1, ...args2]);
return judge;
}
與本篇文章先前提到的方法對(duì)比的話,發(fā)現(xiàn)這種方法有兩個(gè)問(wèn)題:
依賴(lài)ES6的解構(gòu)(函數(shù)參數(shù)中的 ...args1 與 ...args2);
性能稍差一點(diǎn)。
性能問(wèn)題
做個(gè)測(cè)試:
console.time("curry");
const plus = curry((a, b, c, d, e) => a + b + c + d + e);
plus(1)(2)(3)(4)(5);
console.timeEnd("curry");
在我的電腦(Manjaro Linux,Intel Xeon E5 2665,32GB DDR3 四通道1333Mhz,Node.js 9.2.0)上:
本篇提到的方法耗時(shí)約 0.325ms
其他方法的耗時(shí)約 0.345ms
差的這一點(diǎn)猜測(cè)是閉包的原因。由于閉包的訪問(wèn)比較耗性能,而這種方式形成了兩個(gè)閉包:fn 和 len,前面提到的方法只形成了 fn 一個(gè)閉包,所以造成了這一微小的差距。
相關(guān)文章
JavaScript操作元素教你改變頁(yè)面內(nèi)容樣式
這篇文章主要為大家介紹了JavaScript操作元素,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下,希望能夠給你帶來(lái)幫助2021-11-11
javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹(shù)形菜單的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)在下拉列表中顯示多級(jí)樹(shù)形菜單的方法,涉及javascript屬性菜單的定義、構(gòu)造及遍歷等技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
深入理解js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程
這篇文章主要介紹了js A*尋路算法原理與具體實(shí)現(xiàn)過(guò)程,結(jié)合實(shí)例形式詳細(xì)分析了A*尋路算法的具體概念、原理、實(shí)現(xiàn)方法與相關(guān)操作技巧,需要的朋友可以參考下2018-12-12
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js
腳本吧 - 幻宇工作室用到j(luò)s,超強(qiáng)推薦base.js...2006-12-12
TypeScript泛型參數(shù)默認(rèn)類(lèi)型和新的strict編譯選項(xiàng)
這篇文章主要介紹了TypeScript泛型參數(shù)默認(rèn)類(lèi)型和新的strict編譯選項(xiàng),對(duì)TypeScript感興趣的同學(xué),可以參考下2021-05-05
javascript 變態(tài)的節(jié)點(diǎn)集合
今天想實(shí)現(xiàn)jQuery的unwrap效果,換言之,就是用其孩子把其父節(jié)點(diǎn)干掉。為了效率,用到文檔碎片,而取孩子時(shí)使用到childNodes(返回一個(gè)nodeList)2010-03-03
淺聊一下TypeScript中的4種類(lèi)型守衛(wèi)
類(lèi)型守衛(wèi)是TypeScript中特有的用于在運(yùn)行時(shí)檢查類(lèi)型的方式,它顯式的將javascript代碼按類(lèi)型劃分,從而確保了運(yùn)行安全,下面我們就來(lái)簡(jiǎn)單聊聊TypeScript中的4種類(lèi)型守衛(wèi)吧2023-08-08

