日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關咨詢
選擇下列產品馬上在線溝通
服務時間：8:30-17:00
你可能遇到了下面的問題
關閉右側工具欄

新聞中心

這里有您想知道的互聯網營銷解決方案
JS中的柯里化及精巧的自動柯里化實現

什么是柯里化？

為朔城等地區(qū)用戶提供了全套網頁設計制作服務，及朔城網站建設行業(yè)解決方案。主營業(yè)務為網站設計制作、網站設計、朔城網站設計，以傳統方式定制建設網站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！

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

理論看著頭大？沒關系，先看看代碼：

柯里化應用

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

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

很簡單是吧？如果又要加2呢？

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

看上去效率有點低，處理函數封裝下？
可是map的回調函數只接受當前元素elem這一個參數，看上去好像沒有辦法封裝...

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

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

把這樣的函數傳進map：

 
 
 
    
  
  
  
  1. const list = [0, 1, 2, 3];
    2. 
  
  
  
  2. list.map(plus1); // => [1, 2, 3, 4]
    3. 
  
  
  
  3. list.map(plus2); // => [2, 3, 4, 5]
    4.

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

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

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

柯里化函數

 
 
 
    
  
  
  
  1. // 原始的加法函數
    2. 
  
  
  
  2. function origPlus(a, b) {
    3. 
  
  
  
  3.   return a + b;
    4. 
  
  
  
  4. }
    5. 
  
  
  
  5. 
  
  
  
  6. // 柯里化后的plus函數
    7. 
  
  
  
  7. function plus(a) {
    8. 
  
  
  
  8.   return function(b) {
    9. 
  
  
  
  9.     return a + b;
    10. 
  
  
  
  10.   }
    11. 
  
  
  
  11. }
    12. 
  
  
  
  12. 
  
  
  
  13. // ES6寫法
    14. 
  
  
  
  14. const plus = a => b => a + b;
    15.

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

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

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

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

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

柯里化（Currying）是函數式編程中很重要的一環(huán)，很多函數式語言（eg. Haskell）都會默認將函數自動柯里化。然而JS并不會這樣，因此我們需要自己來實現自動柯里化的函數。

先上代碼：

 
 
 
    
  
  
  
  1. // ES5
    2. 
  
  
  
  2. function curry(fn) {
    3. 
  
  
  
  3.   function _c(restNum, argsList) {
    4. 
  
  
  
  4.     return restNum === 0 ?
    5. 
  
  
  
  5.       fn.apply(null, argsList) :
    6. 
  
  
  
  6.       function(x) {
    7. 
  
  
  
  7.         return _c(restNum - 1, argsList.concat(x));
    8. 
  
  
  
  8.       };
    9. 
  
  
  
  9.   }
    10. 
  
  
  
  10.   return _c(fn.length, []);
    11. 
  
  
  
  11. }
    12. 
  
  
  
  12. 
  
  
  
  13. // ES6
    14. 
  
  
  
  14. const curry = fn => {
    15. 
  
  
  
  15.   const _c = (restNum, argsList) => restNum === 0 ?
    16. 
  
  
  
  16.     fn(...argsList) : x => _c(restNum - 1, [...argsList, x]);
    17. 
  
  
  
  17. 
  
  
  
  18.   return _c(fn.length, []);
    19. 
  
  
  
  19. }
    20. 
  
  
  
  20. 
  
  
  
  21. /***************** 使用 *********************/
    22. 
  
  
  
  22. 
  
  
  
  23. var plus = curry(function(a, b) {
    24. 
  
  
  
  24.   return a + b;
    25. 
  
  
  
  25. });
    26. 
  
  
  
  26. 
  
  
  
  27. // ES6
    28. 
  
  
  
  28. const plus = curry((a, b) => a + b);
    29. 
  
  
  
  29. 
  
  
  
  30. plus(2)(4); // => 6
    31.

這樣就實現了自動的柯里化！(╭￣3￣)╭

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

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

需求分析

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

實現方式

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

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

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

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

現在再來看：

 
 
 
    
  
  
  
  1. function curry(fn) {
    2. 
  
  
  
  2.   function _c(restNum, argsList) {
    3. 
  
  
  
  3.     return restNum === 0 ?
    4. 
  
  
  
  4.       fn.apply(null, argsList) :
    5. 
  
  
  
  5.       function(x) {
    6. 
  
  
  
  6.         return _c(restNum - 1, argsList.concat(x));
    7. 
  
  
  
  7.       };
    8. 
  
  
  
  8.   }
    9. 
  
  
  
  9.   return _c(fn.length, []); // 遞歸開始
    10. 
  
  
  
  10. }
    11.

是不是開始清晰起來了？ (?▽?)

ES6寫法的由于使用了數組解構及箭頭函數等語法糖，看上去精簡很多，不過思想都是一樣的啦～

 
 
 
    
  
  
  
  1. // ES6
    2. 
  
  
  
  2. const curry = fn => {
    3. 
  
  
  
  3.   const _c = (restNum, argsList) => restNum === 0 ?
    4. 
  
  
  
  4.     fn(...argsList) : x => _c(restNum - 1, [...argsList, x]);
    5. 
  
  
  
  5. 
  
  
  
  6.   return _c(fn.length, []);
    7. 
  
  
  
  7. }
    8.

與其他方法的對比

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

 
 
 
    
  
  
  
  1. function curry(fn) {
    2. 
  
  
  
  2.   const len = fn.length;
    3. 
  
  
  
  3.   return function judge(...args1) {
    4. 
  
  
  
  4.     return args1.length >= len ?
    5. 
  
  
  
  5.     fn(...args1):
    6. 
  
  
  
  6.     function(...args2) {
    7. 
  
  
  
  7.       return judge(...[...args1, ...args2]);
    8. 
  
  
  
  8.     }
    9. 
  
  
  
  9.   }
    10. 
  
  
  
  10. }
    11. 
  
  
  
  11. 
  
  
  
  12. // 使用箭頭函數
    13. 
  
  
  
  13. const curry = fn => {
    14. 
  
  
  
  14.   const len = fn.length;
    15. 
  
  
  
  15.   const judge = (...args1) => args1.length >= len ?
    16. 
  
  
  
  16.     fn(...args1) : (...args2) => judge(...[...args1, ...args2]);
    17. 
  
  
  
  17.   return judge;
    18. 
  
  
  
  18. }
    19.

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

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

  2. 性能稍差一點。

性能問題

做個測試：

 
 
 
    
  
  
  
  1. console.time("curry");
    2. 
  
  
  
  2. const plus = curry((a, b, c, d, e) => a + b + c + d + e);
    3. 
  
  
  
  3. plus(1)(2)(3)(4)(5);
    4. 
  
  
  
  4. console.timeEnd("curry");
    5.

在我的電腦（Manjaro Linux，Intel Xeon E5 2665，32GB DDR3 四通道1333Mhz，Node.js 9.2.0）上：

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

  • 其他方法的耗時約0.345ms

差的這一點猜測是閉包的原因。由于閉包的訪問比較耗性能，而這種方式形成了兩個閉包：fn和len，前面提到的方法只形成了fn一個閉包，所以造成了這一微小的差距。

也希望大家能自己測試下并說說自己的看法～


文章標題：JS中的柯里化及精巧的自動柯里化實現
網站URL：http://www.dlmjj.cn/article/coggcco.html