时间:2021-05-26
本文实例讲述了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: '日常' }];// 合计数据里的 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程序设计有所帮助。
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例讲述了JavaScript函数式编程(FunctionalProgramming)纯函数用法。分享给大家供大家参考,具体如下:函数式编程鼓励我们多创建纯
本文实例讲述了JavaScript函数式编程(FunctionalProgramming)箭头函数(Arrowfunctions)用法。分享给大家供大家参考,具
本文实例讲述了JavaScript函数式编程(FunctionalProgramming)声明式与命令式。分享给大家供大家参考,具体如下:函数式编程属于声明式编
前言在前一篇文章javascript之典型高阶函数中主要实现了几个典型的functional函数。文章最后也提出了疑问,为啥那样的实现与F#之类的函数式语言“不
JavaScript是函数式编程语言,支持高阶函数和闭包。函数式编程非常强大,可以写出非常简洁的代码。例如Array的map()和filter()方法:'use