詳解JS中的compose函數(shù)和pipe函數(shù)用法
compose函數(shù)
compose函數(shù)可以將需要嵌套執(zhí)行的函數(shù)平鋪，嵌套執(zhí)行就是一個函數(shù)的返回值將作為另一個函數(shù)的參數(shù)。我們考慮一個簡單的需求：這個需求很簡單，直接一個計算函數(shù)就行：
const calculate = x => (x + 10) * 10; let res = calculate(10); console.log(res); // 200
但是根據(jù)我們之前講的函數(shù)式編程，我們可以將復雜的幾個步驟拆成幾個簡單的可復用的簡單步驟，于是我們拆出了一個加法函數(shù)和一個乘法函數(shù):
const add = x => x + 10; const multiply = x => x * 10; // 我們的計算改為兩個函數(shù)的嵌套計算，add函數(shù)的返回值作為multiply函數(shù)的參數(shù) let res = multiply(add(10)); console.log(res); // 結果還是200
上面的計算方法就是函數(shù)的嵌套執(zhí)行，而我們compose的作用就是將嵌套執(zhí)行的方法作為參數(shù)平鋪，嵌套執(zhí)行的時候，里面的方法也就是右邊的方法最開始執(zhí)行，然后往左邊返回，我們的compose方法也是從右邊的參數(shù)開始執(zhí)行，所以我們的目標就很明確了，我們需要一個像這樣的compose方法：
// 參數(shù)從右往左執(zhí)行，所以multiply在前，add在后 let res = compose(multiply, add)(10);
在講這個之前我們先來看一個需要用到的函數(shù)Array.prototype.reduce
Array.prototype.reduce
數(shù)組的reduce方法可以實現(xiàn)一個累加效果，它接收兩個參數(shù)，第一個是一個累加器方法，第二個是初始化值。累加器接收四個參數(shù)，第一個是上次的計算值，第二個是數(shù)組的當前值，主要用的就是這兩個參數(shù)，后面兩個參數(shù)不常用，他們是當前index和當前迭代的數(shù)組：
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方法要怎么實現(xiàn)呢，這里需要借助Array.prototype.reduceRight:
const compose = function(){
// 將接收的參數(shù)存到一個數(shù)組， 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函數(shù)使用ES6的話會更加簡潔：
const compose = (...args) => x => args.reduceRight((res, cb) => cb(res), x);
Redux的中間件就是用compose實現(xiàn)的，webpack中l(wèi)oader的加載順序也是從右往左，這是因為他也是compose實現(xiàn)的。
pipe函數(shù)
pipe函數(shù)跟compose函數(shù)的左右是一樣的，也是將參數(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); // 結果還是200
ES6寫法：
const pipe = (...args) => x => args.reduce((res, cb) => cb(res), x)
以上就是詳解JS中的compose函數(shù)和pipe函數(shù)用法的詳細內容，更多關于JS的資料請關注腳本之家其它相關文章！
相關文章
本文通過實例代碼給大家介紹了JS模擬超市簡易收銀臺小程序代碼，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-08-08
在JavaScript中，等號由雙等號(==)表示，當且僅當兩個運算數(shù)相等時，它返回true。今天我們就來詳細探討下等號運算符的問題，并附上等號運算符和全等號運算符的區(qū)別分析。2015-04-04
本文主要介紹了如何獲取元素的最終background-color的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-02-02
構造器函數(shù)以大寫字母開頭是一個好的習慣,這可以作為一個提醒,讓你在調用的時候不要忘記前面的new運算符.2009-08-08
用javascript實現(xiàn)鼠標框選...2007-05-05
無循環(huán) JavaScript(map、reduce、filter和find)
本文由淺入深地介紹了map、reduce、filter和find函數(shù)，如何一步一步把循環(huán)從代碼中抽離掉2017-04-04
公司的業(yè)務涉及到統(tǒng)計圖的有很多,最近一直echarts里面踩各種坑,下面這篇文章主要給大家介紹了關于echarts地圖設置背景圖片及海岸線的相關資料,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了Javascript圖片預加載，幫助大家理解Javascript圖片預加載的實現(xiàn)原理，感興趣的小伙伴們可以參考一下2016-02-02
最近在使用VS Code，發(fā)現(xiàn)了不少使用的小技巧，覺著有必要給大家分享下，下面這篇文章主要給大家介紹了關于VS Code轉換大小寫、修改選中文字或代碼顏色的相關資料，文中通過示例代碼介紹的非常詳細，需要的朋友可以參考借鑒，下面來一起看看吧。2017-12-12
這篇文章主要為大家詳細介紹了js實現(xiàn)鼠標移入移出卡片切換內容，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-10-10