JavaScript函数式编程(Functional Programming)组合函数(Composition)用法分析


Posted in Javascript onMay 22, 2019

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
Js base64 加密解密介绍
Oct 11 Javascript
常用DOM整理
Jun 16 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
分享javascript计算时间差的示例代码
Mar 19 Javascript
JavaScript的React框架中的JSX语法学习入门教程
Mar 05 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
yarn与npm的命令行小结
Oct 20 Javascript
js原生之焦点图转换加定时器实例
Dec 12 Javascript
element-ui 关于获取select 的label值方法
Aug 24 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 Javascript
在Vue中使用mockjs代码实例
Nov 25 Vue.js
vue组件冲突之引用另一个组件出现组件不显示的问题
Apr 13 Vue.js
vue以组件或者插件的形式实现throttle或者debounce
May 22 #Javascript
JavaScript函数式编程(Functional Programming)箭头函数(Arrow functions)用法分析
May 22 #Javascript
JavaScript函数式编程(Functional Programming)高阶函数(Higher order functions)用法分析
May 22 #Javascript
浅谈VUE防抖与节流的最佳解决方案(函数式组件)
May 22 #Javascript
详解在React-Native中持久化redux数据
May 22 #Javascript
微信小程序的注册页面包含倒计时验证码、获取用户信息
May 22 #Javascript
JavaScript函数式编程(Functional Programming)纯函数用法分析
May 22 #Javascript
You might like
十天学会php之第四天
2006/10/09 PHP
php下统计用户在线时间的一种尝试
2010/08/26 PHP
PHP与服务器文件系统的简单交互
2016/10/21 PHP
解决安装WampServer时提示缺少msvcr110.dll文件的问题
2017/07/09 PHP
PHP实现简单计算器小程序
2020/08/28 PHP
JavaScript 开发中规范性的一点感想
2009/06/23 Javascript
Javascript JSQL,SQL无处不在,
2010/05/05 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
JS比较2个日期间隔的示例代码
2014/04/15 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
使用jQuery实现input数值增量和减量的方法
2015/01/24 Javascript
jQuery使用ajax跨域获取数据的简单实例
2016/05/18 Javascript
Node.js服务器开启Gzip压缩教程
2017/08/11 Javascript
10个最优秀的Node.js MVC框架
2017/08/24 Javascript
10个经典的网页鼠标特效代码
2018/01/09 Javascript
JavaScript实现的弹出遮罩层特效经典示例【基于jQuery】
2019/07/10 jQuery
vue实现滑动超出指定距离回顶部功能
2019/07/31 Javascript
[01:56]生活中的妖精之七夕特别档
2016/08/09 DOTA
理解Python中的With语句
2015/02/02 Python
Python3 socket同步通信简单示例
2017/06/07 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
Python线性方程组求解运算示例
2018/01/17 Python
安装docker-compose的两种最简方法
2019/07/30 Python
使用CSS实现弹性视频html5案例实践
2012/12/26 HTML / CSS
浅析移动设备HTML5页面布局
2015/12/01 HTML / CSS
Peter Alexander新西兰站:澳大利亚领先的睡衣设计师品牌
2016/12/10 全球购物
澳洲网红粉泥面膜:Sand & Sky
2019/08/13 全球购物
世界排名第一的运动鞋市场:Flight Club
2020/01/03 全球购物
银行职员思想汇报
2013/12/31 职场文书
校园安全教育广播稿
2014/02/17 职场文书
公司活动总结范文
2014/07/01 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
办公室文员工作自我鉴定
2014/09/19 职场文书
校园广播稿范文
2015/08/19 职场文书
MySQL pt-slave-restart工具的使用简介
2021/04/07 MySQL
JavaWeb 入门篇(3)ServletContext 详解 具体应用
2021/07/16 Java/Android