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 相关文章推荐
JavaScript 输入框内容格式验证代码
Feb 11 Javascript
JQuery 动态扩展对象之另类视角
May 25 Javascript
文字不间断滚动(上下左右)实例代码
Apr 21 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
Jul 02 Javascript
angularjs基础教程
Dec 25 Javascript
jQuery实现div横向拖拽排序的简单实例
Jul 13 Javascript
JS实现图片剪裁并预览效果
Aug 12 Javascript
ng-options和ng-checked在表单中的高级运用(推荐)
Jan 21 Javascript
深入理解 JavaScript 中的 JSON
Apr 06 Javascript
Vue infinite update loop的问题解决
Apr 23 Javascript
Antd的table组件表格的序号自增操作
Oct 27 Javascript
jquery实现拖拽小方块效果
Dec 10 jQuery
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
Mysql的常用命令
2006/10/09 PHP
在PHP中使用模板的方法
2008/05/24 PHP
php截取utf-8中文字符串乱码的解决方法
2010/03/29 PHP
Thinkphp事务操作实例(推荐)
2017/04/01 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
js数字输入框(包括最大值最小值限制和四舍五入)
2009/11/24 Javascript
离开页面时检测表单元素是否被修改,提示保存的js代码
2010/08/25 Javascript
XMLHTTPRequest的属性和方法简介
2010/11/23 Javascript
Javascript 闭包引起的IE内存泄露分析
2012/05/23 Javascript
jQuery 遍历- 关于closest() 的方法介绍以及与parents()的方法区别分析
2013/04/26 Javascript
浅析jQuery对select操作小结(遍历option,操作option)
2013/07/04 Javascript
jQuery焦点图切换特效插件封装实例
2013/08/18 Javascript
javascript动态创建表格及添加数据实例详解
2015/05/13 Javascript
手机开发必备技巧:javascript及CSS功能代码分享
2015/05/25 Javascript
jquery实用技巧之输入框提示语句
2016/07/28 Javascript
jquery 标签 隔若干行加空白或者加虚线的方法
2016/12/07 Javascript
基于JavaScript实现评论框展开和隐藏功能
2017/08/25 Javascript
剖析Angular Component的源码示例
2018/03/23 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
Python多线程实现同步的四种方式
2017/05/02 Python
Python线程创建和终止实例代码
2018/01/20 Python
基于python批量处理dat文件及科学计算方法详解
2018/05/08 Python
Python中的单下划线和双下划线使用场景详解
2019/09/09 Python
Python IDE环境之 新版Pycharm安装详细教程
2020/03/05 Python
python import 上级目录的导入
2020/11/03 Python
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
瑞典首都斯德哥尔摩的多元奢侈时尚品牌:Acne Studios
2017/07/09 全球购物
美国战术品牌:5.11 Tactical
2019/05/01 全球购物
Vertbaudet西班牙网上商店:婴儿服装、童装、母婴用品和儿童家具
2019/10/16 全球购物
北京捷通华声语音技术有限公司Java软件工程师笔试题
2012/04/10 面试题
高中生学习生活的自我评价
2013/10/09 职场文书
求职信结尾怎么写
2014/05/26 职场文书
党员评议个人总结
2014/10/20 职场文书
Python面向对象之成员相关知识总结
2021/06/24 Python
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs