首頁 > 文章 > web前端 > 如何實現JS中精巧的自動柯里化功能

如何實現JS中精巧的自動柯里化功能

小云云原創: 2017-12-13 09:27:541224瀏覽

本文給大家詳細分析了JS中精巧的自動柯里化實現方法並透過程式碼實例分析了過程和原理，參考學習下吧，希望能幫助到大家。

什麼是柯里化？

在電腦科學中，柯里化（Currying）是把接受多個參數的函數轉換成接受一個單一參數（最初函數的第一個參數）的函數，並且傳回接受餘下的參數且傳回結果的新函數的技術。這項技術由 Christopher Strachey 以邏輯學家 Haskell Curry 命名的，儘管它是 Moses Schnfinkel 和 Gottlob Frege 發明的。

理論看著頭大？沒關係，先看看程式碼：

柯里化應用

假設我們需要實作一個對列表元素進行某種處理的功能，比如說讓列表內每一個元素加一，那麼很容易想到：

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

看起來效率有點低，處理函數封裝下？

可是map的回呼函數只接受當前元素elem 這一個參數，看上去好像沒有辦法封裝...

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

// plus返回部分配置好的函数
const plus1 = plus(1);
const plus2 = plus(2);
plus1(5); // => 6
plus2(7); // => 9

把這樣的函數傳進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))就好了，完美實現了封裝，可讀性大大提高！

不過問題來了：這樣的plus函數要怎麼實作呢？

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

柯里化函數

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

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

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

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

這種寫法看著很奇怪吧？不過如果入了JS的函數式程式設計這個大坑的話，這會是常態。

JS中自動柯里化的精巧實作

#柯里化（Currying）是函數式程式設計中很重要的一環，很多函數式語言（eg. Haskell）都會預設將函數自動柯里化。然而JS並不會這樣，因此我們需要自己來實現自動柯里化的函數。

先上程式碼：

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

這樣就實作了自動的柯里化！

如果你看得懂發生了什麼事的話，那麼恭喜你！大家口中的大佬就是你！，快留下讚然後去開始你的函數式生涯吧（滑稽

如果你沒看懂發生了什麼，別擔心，我現在開始幫你理一下思路。

需求分析

我們需要一個curry 函數，它接受一個待柯里化的函數為參數，傳回一個用來接收一個參數的函數，接收到的參數放到一個列表中，當參數數量足夠時，執行原始函數並傳回結果。就是說有兩個參數的plus 函數需要分兩步驟來部分配置。在一個參數列表argsList 中，如果已經沒有要傳的參數了，那麼就呼叫fn.apply(null, argsList)將原函數執行。 )，函數接受兩個參數，一個是剩餘參數個數restNum，另一個是已取得的參數的列表argsList；_c 的功能就是判斷是否還有未傳入的參數，當restNum 為零時，就是時候通過fn.apply(null, argsList)執行原函數並回傳結果了。

來繼續接收參數。呼叫。

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

是不是開始清晰起來了？一樣的啦～

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, []);
}

與本篇文章先前提到的方法對比的話，發現這種方法有兩個問題：

#依賴ES6的解構（函數參數中的...args1 與...args2）；

性能稍差一点。

性能问题

做个测试：

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

差的这一点猜测是闭包的原因。由于闭包的访问比较耗性能，而这种方式形成了两个闭包：fn 和 len，前面提到的方法只形成了 fn 一个闭包，所以造成了这一微小的差距。

如何實現JS中精巧的自動柯里化功能

相關文章