compose函數(shù)可以將需要嵌套執(zhí)行的函數(shù)平鋪，嵌套執(zhí)行就是一個(gè)函數(shù)的返回值將作為另一個(gè)函數(shù)的參數(shù)。我們考慮一個(gè)簡(jiǎn)單的需求：這個(gè)需求很簡(jiǎn)單，直接一個(gè)計(jì)算函數(shù)就行：

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

但是根據(jù)我們之前講的函數(shù)式編程，我們可以將復(fù)雜的幾個(gè)步驟拆成幾個(gè)簡(jiǎn)單的可復(fù)用的簡(jiǎn)單步驟，于是我們拆出了一個(gè)加法函數(shù)和一個(gè)乘法函數(shù):

const add = x => x + 10;const multiply = x => x * 10;// 我們的計(jì)算改為兩個(gè)函數(shù)的嵌套計(jì)算，add函數(shù)的返回值作為multiply函數(shù)的參數(shù)let res = multiply(add(10));console.log(res); // 結(jié)果還是200

上面的計(jì)算方法就是函數(shù)的嵌套執(zhí)行，而我們compose的作用就是將嵌套執(zhí)行的方法作為參數(shù)平鋪，嵌套執(zhí)行的時(shí)候，里面的方法也就是右邊的方法最開(kāi)始執(zhí)行，然后往左邊返回，我們的compose方法也是從右邊的參數(shù)開(kāi)始執(zhí)行，所以我們的目標(biāo)就很明確了，我們需要一個(gè)像這樣的compose方法：

// 參數(shù)從右往左執(zhí)行，所以multiply在前，add在后let res = compose(multiply, add)(10);

在講這個(gè)之前我們先來(lái)看一個(gè)需要用到的函數(shù)Array.prototype.reduce

數(shù)組的reduce方法可以實(shí)現(xiàn)一個(gè)累加效果，它接收兩個(gè)參數(shù)，第一個(gè)是一個(gè)累加器方法，第二個(gè)是初始化值。累加器接收四個(gè)參數(shù)，第一個(gè)是上次的計(jì)算值，第二個(gè)是數(shù)組的當(dāng)前值，主要用的就是這兩個(gè)參數(shù)，后面兩個(gè)參數(shù)不常用，他們是當(dāng)前index和當(dāng)前迭代的數(shù)組：

const arr = [[1, 2], [3, 4], [5, 6]];// prevRes的初始值是傳入的[]，以后會(huì)是每次迭代計(jì)算后的值const flatArr = arr.reduce((prevRes, item) => prevRes.concat(item), []);console.log(flatArr); // [1, 2, 3, 4, 5, 6]Array.prototype.reduceRight

Array.prototype.reduce會(huì)從左往右進(jìn)行迭代，如果需要從右往左迭代，用Array.prototype.reduceRight就好了

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

那這個(gè)compose方法要怎么實(shí)現(xiàn)呢，這里需要借助Array.prototype.reduceRight:

const compose = function(){ // 將接收的參數(shù)存到一個(gè)數(shù)組， args == [multiply, add] const args = [].slice.apply(arguments); return function(x) { return args.reduceRight((res, cb) => cb(res), x); }}// 我們來(lái)驗(yàn)證下這個(gè)方法let calculate = compose(multiply, add);let res = calculate(10);console.log(res); // 結(jié)果還是200

上面的compose函數(shù)使用ES6的話會(huì)更加簡(jiǎn)潔：

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

Redux的中間件就是用compose實(shí)現(xiàn)的，webpack中l(wèi)oader的加載順序也是從右往左，這是因?yàn)樗彩莄ompose實(shí)現(xiàn)的。

pipe函數(shù)跟compose函數(shù)的左右是一樣的，也是將參數(shù)平鋪，只不過(guò)他的順序是從左往右。我們來(lái)實(shí)現(xiàn)下，只需要將reduceRight改成reduce就行了：

const pipe = function(){ const args = [].slice.apply(arguments); return function(x) { return args.reduce((res, cb) => cb(res), x); }}// 參數(shù)順序改為從左往右let calculate = pipe(add, multiply);let res = calculate(10);console.log(res); // 結(jié)果還是200

ES6寫法：

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

以上就是詳解JS中的compose函數(shù)和pipe函數(shù)用法的詳細(xì)內(nèi)容，更多關(guān)于JS的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章！