本文實例講述了JavaScript函數式編程(Functional Programming)組合函數(Composition)用法。分享給大家供大家參考，具體如下：
組合（Composition）函數，就是把兩個或以上的函數組合到一塊兒，整成一個新的函數。我找到了一個很好的例子，很好地解釋了組合函數這個概念。
比如一個應用主要是記錄一下日常的花銷（expenses），應用里的數據看起來像這樣：
const expenses = [ { name: '租金', price: 3000, type: '日常' }, { name: '阿里云服務', price: 600, type: '服務' }, { name: '健身中心', price: 50, type: '健康' }, { name: '水電', price: 100, type: '日常' }];合計花銷
現在我要合計一下所有花銷，創建一個函數，用一下 map 與 reduce，這個函數像這樣：
const sum = (source) => source .map((item) => item.price) .reduce((accumulator, price) => accumulator + price, 0)
sum 這個函數接收一個 source 參數，在函數里，先用 map，返回 source 里的所有的 price（價格）。然后再用 reduce 去處理返回的 price ，這里就是合計所有的 price 的值。
這個函數用起來像這樣：
let total = sum(expenses) // 結果：3750
組合
現在我要合計一下我在某個類別下花的錢。比如我要合計一下 “日?！?這個分類里花的錢。先創建一個函數，可以返回所有 “日?！?類型的花銷。
const = getHousehold = (source) => { return source.filter((item) => item.type === '日常')}getHousehold 函數里用了 filter ，它可以過濾出滿足特定條件的項目。這里就是把 type 的值是 “日?！?的項目過濾出來。
現在如果我想得到 “日?！?類型的花銷的合計的結果，可以這樣：
let householdExpenses = sum(getHousehold(expenses)) // 結果：3100
上面，我們先用 getHousehold 函數得到所有的 “日?！?類型的項目，然后又用 sum 函數合計了得到的結果。最終返回的就是所有 “日常” 類型的項目的合計花銷。
根據上面的使用，我們可以去創建一個組合函數，這個函數可以去合計 “日常” 類型的項目的花銷。先創建一個組合函數用的函數：
const compose = (function1, function2) => { return (source) => function2(function1(source))}現在我們可以用創建的這個 compose 函數去組合兩個函數：
const sumHousehold = compose(getHousehold, sum)
sumHousehold 就是一個組合，它組合了 getHousehold 還有 sum?，F在如果你提供給 sumHousehold 一組數據，比如最開始我們定義的 expenses，首先會用 getHousehold 得到所有 “日?！?類型的項目，然后再用 sum 去合計這些項目。
sumHousehold(expenses)
新任務
我現在要得到花銷數據里的所有的分類：
const getCategories = (source) => { return source.map((item) => item.type)}用一下這個函數：
getCategories(expenses)// ["日常", "服務", "健康", "日常"]
在返回的結果里，“日常” 這個分類出現了兩次。我們再去創建一個函數可以得到唯一的項目：
const uniqueElement = (source) => { return source.filter((item, position) => { return source.indexOf(item) === position })}現在我們再去創建一個組合函數：
const uniqueCategories = compose(getCategories, uniqueElement)
uniqueCategories 這個函數組合了 getCategories 還有 uniqueElement 函數。你交給 uniqueCategories 的數據，會先被 getCategories 處理，它會得到所有的分類，然后這些分類又會被 uniqueElement 處理，這個函數可以得以唯一的項目。
uniqueCategories(expenses)// ["日常", "服務", "健康"]
完整的代碼
// 應用里的數據const expenses = [ { name: '租金', price: 3000, type: '日常' }, { name: '阿里云服務', price: 600, type: '服務' }, { name: '健身中心', price: 50, type: '健康' }, { name: '水電', price: 100, type: '日常' }];// 合計數據里的 priceconst sum = (source) => source .map((item) => item.price) .reduce((accumulator, price) => accumulator + price, 0)// 得到數據里類型是 “日?！?的所有項目const getHousehold = (source) => source .filter((item) => item.type === '日常')// 合計結果let total = sum(expenses)console.log(total)// 合計 “日?！?類型的花費let householdExpenses = sum(getHousehold(expenses))console.log(householdExpenses)// 創建組合函數用的函數const compose = (function1, function2) => { return (source) => function2(function1(source))}// 創建一個組合函數，可以合計 “日常” 類型的花費const sumHousehold = compose(getHousehold, sum)console.log(sumHousehold(expenses))// 得到數據里的所有分類const getCategories = (source) => { return source.map((item) => item.type)}console.log(getCategories(expenses))// 返回一個數組里的唯一元素const uniqueElement = (source) => { return source.filter((item, position) => { return source.indexOf(item) === position })}// 創建一個組合函數，可以返回數據里的唯一分類const uniqueCategories = compose(getCategories, uniqueElement)console.log(uniqueCategories(expenses))更多關于JavaScript相關內容可查看本站專題：《JavaScript常用函數技巧匯總》、《javascript面向對象入門教程》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
