首頁 > web前端 > js教程 > 主體

在JS中如何實現自動柯里化

亚连
發布: 2018-06-21 13:59:49
原創
1458 人瀏覽過

給大家詳細分析了JS中精巧的自動柯里化實作方法並透過程式碼實例分析了過程和原理,參考學習下吧。

以下內容透過程式碼解說和實例分析了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 函數,它接受一個待柯里化的函數為參數,傳回一個用來接收一個參數的函數,接收的參數放到一個列表中,當參數數量足夠時,執行原函數並傳回結果。

#實作方式

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

總的想法就是每傳一次參,就把這個參數放入一個參數清單argsList 中,如果已經沒有要傳的參數了,那麼就呼叫fn.apply(null, argsList)將原函數執行。要實現這點,我們就需要一個內部的判斷函數_c(restNum, argsList),函數接受兩個參數,一個是剩餘參數個數restNum,另一個是已取得的參數的列表argsList;_c 的功能就是判斷是否還有未傳入的參數,當restNum 為零時,就是時候透過fn.apply(null, argsList)執行原函數並傳回結果了。如果還有參數需要傳遞的話,也就是說restNum 不為零時,就需要傳回一個單參數函數

function(x) {
 return _c(restNum - 1, argsList.concat(x));
}
登入後複製

來繼續接收參數。這裡形成了一個尾遞歸,函數接受了一個參數後,剩餘需要參數數量restNum 減一,並將新參數x 加入argsList 後傳入_c 進行遞歸呼叫。結果就是,當當參數數量不足時,返回負責接收新參數的單參數函數,當參數夠了時,就調用原始函數並返回。

現在再來看:

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寫法的由於使用了數組解構及箭頭函數等語法糖,看起來精簡很多,不過思想都是一樣的啦~

// 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]);
  }
 }
}
// 使用箭头函数
const curry = fn => {
 const len = fn.length;
 const judge = (...args1) => args1.length >= len ?
  fn(...args1) : (...args2) => judge(...[...args1, ...args2]);
 return judge;
}
登入後複製

与本篇文章先前提到的方法对比的话,发现这种方法有两个问题:

依赖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

上面是我整理给大家的,希望今后会对大家有帮助。

相关文章:

在Vue中有关SPA首屏加载优化(详细教程)

在Angular中有关管道操作符(|)用法

VS Code编辑器中关于修改选中文字或代码颜色操作

以上是在JS中如何實現自動柯里化的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
js
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板