詳解JS中的compose函數和pipe函數用法
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
上面的計算方法就是函數的嵌套執行,而我們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)
以上就是詳解JS中的compose函數和pipe函數用法的詳細內容,更多關於JS的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- 深入詳解JS函數的柯裡化
- 8個JavaScript中高階函數的運用分享
- 27個JavaScript數組常見方法匯總與實例說明
- JavaScript中的this例題實戰總結詳析
- JavaScript Reduce使用詳解