溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本文實例講述了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。現在如果你提供給 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: '日常'
}
];
// 合計數據里的 price
const 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程序設計有所幫助。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
