快捷導(dǎo)航

JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法分析

更新時(shí)間：2019年05月22日 09:30:17 作者：longzhoufeng

這篇文章主要介紹了JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法,結(jié)合實(shí)例形式分析了javascript函數(shù)式編程中組合函數(shù)的概念、原理、用法及操作注意事項(xiàng),需要的朋友可以參考下

本文實(shí)例講述了JavaScript函數(shù)式編程(Functional Programming)組合函數(shù)(Composition)用法。分享給大家供大家參考，具體如下：

組合（Composition）函數(shù)，就是把兩個(gè)或以上的函數(shù)組合到一塊兒，整成一個(gè)新的函數(shù)。我找到了一個(gè)很好的例子，很好地解釋了組合函數(shù)這個(gè)概念。

比如一個(gè)應(yīng)用主要是記錄一下日常的花銷（expenses），應(yīng)用里的數(shù)據(jù)看起來像這樣：

const expenses = [
 {
  name: '租金',
  price: 3000,
  type: '日常'
 }, 
 {
  name: '阿里云服務(wù)',
  price: 600,
  type: '服務(wù)'
 }, 
 {
  name: '健身中心',
  price: 50,
  type: '健康'
 }, 
 {
  name: '水電',
  price: 100,
  type: '日常'
 }
];

合計(jì)花銷

現(xiàn)在我要合計(jì)一下所有花銷，創(chuàng)建一個(gè)函數(shù)，用一下 map 與 reduce，這個(gè)函數(shù)像這樣：

const sum = (source) => 
 source
  .map((item) => item.price)
  .reduce((accumulator, price) => accumulator + price, 0)

sum 這個(gè)函數(shù)接收一個(gè) source 參數(shù)，在函數(shù)里，先用 map，返回 source 里的所有的 price（價(jià)格）。然后再用 reduce 去處理返回的 price ，這里就是合計(jì)所有的 price 的值。

這個(gè)函數(shù)用起來像這樣：

let total = sum(expenses) // 結(jié)果：3750

組合

現(xiàn)在我要合計(jì)一下我在某個(gè)類別下花的錢。比如我要合計(jì)一下 “日?！?這個(gè)分類里花的錢。先創(chuàng)建一個(gè)函數(shù)，可以返回所有 “日常” 類型的花銷。

const = getHousehold = (source) => {
 return source.filter((item) => item.type === '日常')
}

getHousehold 函數(shù)里用了 filter ，它可以過濾出滿足特定條件的項(xiàng)目。這里就是把 type 的值是 “日?！?的項(xiàng)目過濾出來。

現(xiàn)在如果我想得到 “日?！?類型的花銷的合計(jì)的結(jié)果，可以這樣：

let householdExpenses = sum(getHousehold(expenses)) 
// 結(jié)果：3100

上面，我們先用 getHousehold 函數(shù)得到所有的 “日?！?類型的項(xiàng)目，然后又用 sum 函數(shù)合計(jì)了得到的結(jié)果。最終返回的就是所有 “日?！?類型的項(xiàng)目的合計(jì)花銷。

根據(jù)上面的使用，我們可以去創(chuàng)建一個(gè)組合函數(shù)，這個(gè)函數(shù)可以去合計(jì) “日?！?類型的項(xiàng)目的花銷。先創(chuàng)建一個(gè)組合函數(shù)用的函數(shù)：

const compose = (function1, function2) => {
 return (source) => function2(function1(source))
}

現(xiàn)在我們可以用創(chuàng)建的這個(gè) compose 函數(shù)去組合兩個(gè)函數(shù)：

const sumHousehold = compose(getHousehold, sum)

sumHousehold 就是一個(gè)組合，它組合了 getHousehold 還有 sum?，F(xiàn)在如果你提供給 sumHousehold 一組數(shù)據(jù)，比如最開始我們定義的 expenses，首先會(huì)用 getHousehold 得到所有 “日?！?類型的項(xiàng)目，然后再用 sum 去合計(jì)這些項(xiàng)目。

sumHousehold(expenses)

新任務(wù)

我現(xiàn)在要得到花銷數(shù)據(jù)里的所有的分類：

const getCategories = (source) => {
 return source.map((item) => item.type)
}

用一下這個(gè)函數(shù)：

getCategories(expenses)
// ["日常", "服務(wù)", "健康", "日常"]

在返回的結(jié)果里，“日?！?這個(gè)分類出現(xiàn)了兩次。我們?cè)偃?chuàng)建一個(gè)函數(shù)可以得到唯一的項(xiàng)目：

const uniqueElement = (source) => {
 return source.filter((item, position) => {
  return source.indexOf(item) === position
 })
}

現(xiàn)在我們?cè)偃?chuàng)建一個(gè)組合函數(shù)：

const uniqueCategories = compose(getCategories, uniqueElement)

uniqueCategories 這個(gè)函數(shù)組合了 getCategories 還有 uniqueElement 函數(shù)。你交給 uniqueCategories 的數(shù)據(jù)，會(huì)先被 getCategories 處理，它會(huì)得到所有的分類，然后這些分類又會(huì)被 uniqueElement 處理，這個(gè)函數(shù)可以得以唯一的項(xiàng)目。

uniqueCategories(expenses)
// ["日常", "服務(wù)", "健康"]

完整的代碼

// 應(yīng)用里的數(shù)據(jù)
const expenses = [
 {
  name: '租金',
  price: 3000,
  type: '日常'
 }, {
  name: '阿里云服務(wù)',
  price: 600,
  type: '服務(wù)'
 }, {
  name: '健身中心',
  price: 50,
  type: '健康'
 }, {
  name: '水電',
  price: 100,
  type: '日常'
 }
];
// 合計(jì)數(shù)據(jù)里的 price
const sum = (source) =>
 source
  .map((item) => item.price)
  .reduce((accumulator, price) => accumulator + price, 0)
// 得到數(shù)據(jù)里類型是 “日?！?的所有項(xiàng)目
const getHousehold = (source) =>
 source
  .filter((item) => item.type === '日常')
// 合計(jì)結(jié)果
let total = sum(expenses)
console.log(total)
// 合計(jì) “日常” 類型的花費(fèi)
let householdExpenses = sum(getHousehold(expenses))
console.log(householdExpenses)
// 創(chuàng)建組合函數(shù)用的函數(shù)
const compose = (function1, function2) => {
 return (source) => function2(function1(source))
}
// 創(chuàng)建一個(gè)組合函數(shù)，可以合計(jì) “日?！?類型的花費(fèi)
const sumHousehold = compose(getHousehold, sum)
console.log(sumHousehold(expenses))
// 得到數(shù)據(jù)里的所有分類
const getCategories = (source) => {
 return source.map((item) => item.type)
}
console.log(getCategories(expenses))
// 返回一個(gè)數(shù)組里的唯一元素
const uniqueElement = (source) => {
 return source.filter((item, position) => {
  return source.indexOf(item) === position
 })
}
// 創(chuàng)建一個(gè)組合函數(shù)，可以返回?cái)?shù)據(jù)里的唯一分類
const uniqueCategories = compose(getCategories, uniqueElement)
console.log(uniqueCategories(expenses))

更多關(guān)于JavaScript相關(guān)內(nèi)容可查看本站專題：《JavaScript常用函數(shù)技巧匯總》、《javascript面向?qū)ο笕腴T教程》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: