小白兔的开发之路 — 自由行🏕 了解更多 / 现在报名

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))

参考资料

  1. http://blog.ricardofilipe.com/post/javascript-composition-for-dummies
函数式编程 JavaScript


微信好友

用微信扫描二维码,
加我好友。



微信公众号

用微信扫描二维码,
订阅宁皓网公众号。



240746680

用 QQ 扫描二维码,
加入宁皓网 QQ 群。

统计

12081
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点