JavaScript中的compose函數和pipe函數

compose函數

compose函數能夠將須要嵌套執行的函數平鋪，嵌套執行就是一個函數的返回值將做爲另外一個函數的參數。咱們考慮一個簡單的需求：

給定一個輸入值x，先給這個值加10，而後結果乘以10

這個需求很簡單，直接一個計算函數就行：

const calculate = x => (x + 10) * 10;
let res = calculate(10);
console.log(res);    // 200

可是根據咱們以前講的函數式編程，咱們能夠將複雜的幾個步驟拆成幾個簡單的可複用的簡單步驟，因而咱們拆出了一個加法函數和一個乘法函數:

const add = x => x + 10;
const multiply = x => x * 10;

// 咱們的計算改成兩個函數的嵌套計算，add函數的返回值做爲multiply函數的參數
let res = multiply(add(10));
console.log(res);    // 結果仍是200

上面的計算方法就是函數的嵌套執行，而咱們compose的做用就是將嵌套執行的方法做爲參數平鋪，嵌套執行的時候，裏面的方法也就是右邊的方法最開始執行，而後往左邊返回，咱們的compose方法也是從右邊的參數開始執行，因此咱們的目標就很明確了，咱們須要一個像這樣的compose方法：

// 參數從右往左執行，因此multiply在前，add在後
let res = compose(multiply, add)(10);

在講這個以前咱們先來看一個須要用到的函數Array.prototype.reduce

Array.prototype.reduce

數組的reduce方法能夠實現一個累加效果，它接收兩個參數，第一個是一個累加器方法，第二個是初始化值。累加器接收四個參數，第一個是上次的計算值，第二個是數組的當前值，主要用的就是這兩個參數，後面兩個參數不經常使用，他們是當前index和當前迭代的數組：

const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes的初始值是傳入的[]，之後會是每次迭代計算後的值
const flatArr = arr.reduce((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [1, 2, 3, 4, 5, 6]

Array.prototype.reduceRight

Array.prototype.reduce會從左往右進行迭代，若是須要從右往左迭代，用Array.prototype.reduceRight就行了

const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes的初始值是傳入的[]，之後會是每次迭代計算後的值
const flatArr = arr.reduceRight((prevRes, item) => prevRes.concat(item), []);

console.log(flatArr); // [5, 6, 3, 4, 1, 2]

那這個compose方法要怎麼實現呢，這裏須要藉助Array.prototype.reduceRight:

const compose = function(){
  // 將接收的參數存到一個數組， args == [multiply, add]
  const args = [].slice.apply(arguments);
  return function(x) {
    return args.reduceRight((res, cb) => cb(res), x);
  }
}

// 咱們來驗證下這個方法
let calculate = compose(multiply, add);
let res = calculate(10);
console.log(res);    // 結果仍是200

上面的compose函數使用ES6的話會更加簡潔：

const compose = (...args) => x => args.reduceRight((res, cb) => cb(res), x);

Redux的中間件就是用compose實現的，webpack中loader的加載順序也是從右往左，這是由於他也是compose實現的。

pipe函數

pipe函數跟compose函數的左右是同樣的，也是將參數平鋪，只不過他的順序是從左往右。咱們來實現下，只須要將reduceRight改爲reduce就好了：

const pipe = function(){
  const args = [].slice.apply(arguments);
  return function(x) {
    return args.reduce((res, cb) => cb(res), x);
  }
}

// 參數順序改成從左往右
let calculate = pipe(add, multiply);
let res = calculate(10);
console.log(res);    // 結果仍是200

ES6寫法：

const pipe = (...args) => x => args.reduce((res, cb) => cb(res), x)

文章的最後，感謝你花費寶貴的時間閱讀本文，若是本文給了你一點點幫助或者啓發，請不要吝嗇你的贊和GitHub小星星，你的支持是做者持續創做的動力。

做者博文GitHub項目地址： https://github.com/dennis-jiang/Front-End-Knowledges