這篇文章給大家分享的是有關(guān)JS中如何實(shí)現(xiàn)自動柯里化的內(nèi)容。小編覺得挺實(shí)用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。

創(chuàng)新互聯(lián)公司是一家專注于網(wǎng)站制作、做網(wǎng)站與策劃設(shè)計,宜春網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)公司做網(wǎng)站,專注于網(wǎng)站建設(shè)10余年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:宜春等地區(qū)。宜春做網(wǎng)站價格咨詢:18982081108

什么是柯里化？

在計算機(jī)科學(xué)中，柯里化（Currying）是把接受多個參數(shù)的函數(shù)變換成接受一個單一參數(shù)（最初函數(shù)的第一個參數(shù)）的函數(shù)，并且返回接受余下的參數(shù)且返回結(jié)果的新函數(shù)的技術(shù)。這個技術(shù)由 Christopher Strachey 以邏輯學(xué)家 Haskell Curry 命名的，盡管它是 Moses Schnfinkel 和 Gottlob Frege 發(fā)明的。

理論看著頭大？沒關(guān)系，先看看代碼：

柯里化應(yīng)用

假設(shè)我們需要實(shí)現(xiàn)一個對列表元素進(jìn)行某種處理的功能，比如說讓列表內(nèi)每一個元素加一，那么很容易想到：

const list = [0, 1, 2, 3];
list.map(elem => elem + 1);

很簡單是吧？如果又要加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 這一個參數(shù)，看上去好像沒有辦法封裝...

你也許會想：如果能拿到一個部分配置好的函數(shù)就好了，比如說：

// 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]

是不是很棒棒？這樣一來不管是加多少，只需要list.map(plus(x))就好了，完美實(shí)現(xiàn)了封裝，可讀性大大提高！

不過問題來了：這樣的plus函數(shù)要怎么實(shí)現(xiàn)呢？

這時候柯里化就能派上用場了：

柯里化函數(shù)

// 原始的加法函數(shù)
function origPlus(a, b) {
 return a + b;
}
// 柯里化后的plus函數(shù)
function plus(a) {
 return function(b) {
  return a + b;
 }
}
// ES6寫法
const plus = a => b => a + b;

可以看到，柯里化的 plus 函數(shù)首先接受一個參數(shù) a，然后返回一個接受一個參數(shù) b 的函數(shù)，由于閉包的原因，返回的函數(shù)可以訪問到父函數(shù)的參數(shù) a，所以舉個例子：const plus2 = plus(2)就可等效視為function plus2(b) { return 2 + b; }，這樣就實(shí)現(xiàn)了部分配置。

通俗地講，柯里化就是一個部分配置多參數(shù)函數(shù)的過程，每一步都返回一個接受單個參數(shù)的部分配置好的函數(shù)。一些極端的情況可能需要分很多次來部分配置一個函數(shù)，比如說多次相加:

multiPlus(1)(2)(3); // => 6

這種寫法看著很奇怪吧？不過如果入了JS的函數(shù)式編程這個大坑的話，這會是常態(tài)。

JS中自動柯里化的精巧實(shí)現(xiàn)

柯里化（Currying）是函數(shù)式編程中很重要的一環(huán)，很多函數(shù)式語言（eg. Haskell）都會默認(rèn)將函數(shù)自動柯里化。然而JS并不會這樣，因此我們需要自己來實(shí)現(xiàn)自動柯里化的函數(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)了自動的柯里化！

如果你看得懂發(fā)生了什么的話，那么恭喜你！大家口中的大佬就是你！，快留下贊然后去開始你的函數(shù)式生涯吧（滑稽

如果你沒看懂發(fā)生了什么，別擔(dān)心，我現(xiàn)在開始幫你理一下思路。

需求分析

我們需要一個 curry 函數(shù)，它接受一個待柯里化的函數(shù)為參數(shù)，返回一個用于接收一個參數(shù)的函數(shù)，接收到的參數(shù)放到一個列表中，當(dāng)參數(shù)數(shù)量足夠時，執(zhí)行原函數(shù)并返回結(jié)果。

實(shí)現(xiàn)方式

簡單思考可以知道，柯里化部分配置函數(shù)的步驟數(shù)等于 fn 的參數(shù)個數(shù)，也就是說有兩個參數(shù)的 plus 函數(shù)需要分兩步來部分配置。函數(shù)的參數(shù)個數(shù)可以通過fn.length獲取。

總的想法就是每傳一次參，就把該參數(shù)放入一個參數(shù)列表 argsList 中，如果已經(jīng)沒有要傳的參數(shù)了，那么就調(diào)用fn.apply(null, argsList)將原函數(shù)執(zhí)行。要實(shí)現(xiàn)這點(diǎn)，我們就需要一個內(nèi)部的判斷函數(shù) _c(restNum, argsList)，函數(shù)接受兩個參數(shù)，一個是剩余參數(shù)個數(shù) restNum，另一個是已獲取的參數(shù)的列表 argsList；_c 的功能就是判斷是否還有未傳入的參數(shù)，當(dāng) restNum 為零時，就是時候通過fn.apply(null, argsList)執(zhí)行原函數(shù)并返回結(jié)果了。如果還有參數(shù)需要傳遞的話，也就是說 restNum 不為零時，就需要返回一個單參數(shù)函數(shù)

function(x) {
 return _c(restNum - 1, argsList.concat(x));
}

來繼續(xù)接收參數(shù)。這里形成了一個尾遞歸，函數(shù)接受了一個參數(shù)后，剩余需要參數(shù)數(shù)量 restNum 減一，并將新參數(shù) x 加入 argsList 后傳入 _c 進(jìn)行遞歸調(diào)用。結(jié)果就是，當(dāng)參數(shù)數(shù)量不足時，返回負(fù)責(zé)接收新參數(shù)的單參數(shù)函數(shù)，當(dāng)參數(shù)夠了時，就調(diào)用原函數(shù)并返回。

現(xiàn)在再來看：

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寫法的由于使用了 數(shù)組解構(gòu) 及 箭頭函數(shù) 等語法糖，看上去精簡很多，不過思想都是一樣的啦～

// ES6
const curry = fn => {
 const _c = (restNum, argsList) => restNum === 0 ?
  fn(...argsList) : x => _c(restNum - 1, [...argsList, x]);

 return _c(fn.length, []);
}

與其他方法的對比

還有一種大家常用的方法：

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;
}

與本篇文章先前提到的方法對比的話，發(fā)現(xiàn)這種方法有兩個問題：

依賴ES6的解構(gòu)（函數(shù)參數(shù)中的 ...args1 與 ...args2）；

性能稍差一點(diǎn)。

性能問題

做個測試：

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）上：

本篇提到的方法耗時約 0.325ms

其他方法的耗時約 0.345ms

感謝各位的閱讀！關(guān)于“JS中如何實(shí)現(xiàn)自動柯里化”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，讓大家可以學(xué)到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！