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 相关文章推荐
JQuery里选择超链接的实现代码
May 22 Javascript
处理文本部分内容的TextRange对象应用实例
Jul 29 Javascript
阿里巴巴技术文章分享 Javascript继承机制的实现
Jan 14 Javascript
创建基于Bootstrap的下拉菜单的DropDownList的JQuery插件
Jun 02 Javascript
浅谈几种常用的JS类定义方法
Jun 08 Javascript
jquery.cookie.js的介绍与使用方法
Feb 09 Javascript
vue基于Vue2.0和高德地图的地图组件实例
Apr 28 Javascript
基于jquery的on和click的区别详解
Jan 15 jQuery
JS/jQuery实现DIV延时几秒后消失或显示的方法
Feb 12 jQuery
jQuery实现文字超过1行、2行或规定的行数时自动加省略号的方法
Mar 28 jQuery
npm scripts 使用指南详解
Oct 08 Javascript
layui实现数据表格table分页功能(ajax异步)
Jul 27 Javascript
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二分法在IP地址查询中的应用
2008/08/12 PHP
解决PHP mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
php去除换行(回车换行)的三种方法
2014/03/26 PHP
PHP面向对象程序设计之接口用法
2014/08/20 PHP
php实现给二维数组中所有一维数组添加值的方法
2017/02/04 PHP
Prototype Date对象 学习
2009/07/12 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
指定区域的图片自动按比例缩小的js代码(防止页面被图片撑破)
2014/02/21 Javascript
JS采用绝对定位实现回到顶部效果完整实例
2016/06/20 Javascript
JavaScript程序中实现继承特性的方式总结
2016/06/24 Javascript
AngularJS基础 ng-mouseenter 指令示例代码
2016/08/02 Javascript
js实现简单的计算器功能
2017/01/16 Javascript
Bootstrap禁用响应式布局的实现方法
2017/03/09 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
原生JS+HTML5实现跟随鼠标一起流动的粒子动画效果
2018/05/03 Javascript
微信小程序动态增加按钮组件
2018/09/14 Javascript
vue中如何去掉空格的方法实现
2018/11/09 Javascript
js实现百度淘宝搜索功能
2020/02/17 Javascript
vue实现一个获取按键展示快捷键效果的Input组件
2021/01/13 Vue.js
JavaScript实现手风琴效果
2021/02/18 Javascript
[01:21]辉夜杯战队访谈宣传片—CDEC
2015/12/25 DOTA
浅谈Python中的数据类型
2015/05/05 Python
Python中enumerate()函数编写更Pythonic的循环
2018/03/06 Python
django启动uwsgi报错的解决方法
2018/04/08 Python
对python文件读写的缓冲行为详解
2019/02/13 Python
阿里云ECS服务器部署django的方法
2019/08/29 Python
python3 使用ssh隧道连接mysql的操作
2020/12/05 Python
css3实现背景图片拉伸效果像桌面壁纸一样
2013/08/19 HTML / CSS
HTML5 manifest离线缓存的示例代码
2018/08/08 HTML / CSS
网管求职信
2014/03/03 职场文书
畜牧兽医本科生的自我评价
2014/03/03 职场文书
培训班主持词
2014/03/28 职场文书
刑事和解协议书范本
2014/11/19 职场文书
民主评议党员个人总结
2015/02/13 职场文书
2016幼儿园教师年度考核评语
2015/12/01 职场文书
mysql5.6主从搭建以及不同步问题详解
2021/12/04 MySQL