compose函式

compose函式可以將需要巢狀執行的函式平鋪，巢狀執行就是一個函式的返回值將作為另一個函式的引數。我們考慮一個簡單的需求：這個需求很簡單，直接一個計算函式就行：

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

上面的計算方法就是函式的巢狀執行，而我們compo程式設計客棧se的作用就是將巢狀執行的方法作為引數平鋪，巢狀執行的時候，裡面的方法也就是右邊的方法最開始執行，然後往左邊返回，我們的compose方法也是從右邊的引數開始執行，所以我們的目標就很明確了，我們需要一個像這樣的compose方法：

// 引數從右往左執行，所以multiply在前，add在後
let res = compose(multiply,add)(10);

在講這個之前我們先來看一個需要用到的函式Array.prototype.reduce

Array.prototype.reduce

陣列的reduce方法可以實現一個累加效果，它接收兩個引數，第一個是一個累加器方法，第二個是初始化值。累加器程式設計客棧

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,6]];
// prevRes的初始值是傳入的[]，以後會是每次迭代計算後的值
const flatArr = arr.reduceRight((prevRes,[]);

console.log(flatArr); // [5,6,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,x);

Redux的中介軟體就是用compose實現的，webpack中loader的載入順序也是從右往左，這是因為他也是compose實現的。

pipe函式

pipe函式跟compose函式的左右是一樣的，也是將引數平鋪，只不過他的順序是從左往右。我們來實現下，只需要將reduceRi程式設計客棧ght改成reduce就行了：

const pipe = function(){
  const args = [].slice.apply(arguments);
  returnhttp://www.cppcns.com function(x) {
    return args.reduce((res,x);
  }
}

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

ES6寫法：

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

以上就是詳解js中的compose函式和pipe函式用法的詳細內容，更多關於JS的資料請關注我們其它相關文章！