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 版本]
Mar 20 Javascript
Tab页界面,用jQuery及Ajax技术实现
Sep 21 Javascript
JavaScript中合并数组的N种方法
Sep 16 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
js多功能分页组件layPage使用方法详解
May 19 Javascript
jQuery基本选择器之标签名选择器
Sep 03 Javascript
使用JS批量选中功能实现更改数据库中的status状态值(批量展示)
Nov 22 Javascript
JS常用加密编码与算法实例总结
Dec 22 Javascript
轻松理解Javascript变量的相关问题
Jan 20 Javascript
ECMAScript6变量的解构赋值实例详解
Sep 19 Javascript
Webpack优化配置缩小文件搜索范围
Dec 25 Javascript
vue项目使用微信公众号支付总结及遇到的坑
Oct 23 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生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
Zend Framework入门教程之Zend_View组件用法示例
2016/12/09 PHP
PHP基于自定义类随机生成姓名的方法示例
2017/08/05 PHP
Yii2.0框架模型多表关联查询示例
2019/07/18 PHP
表单序列化与jq中的serialize使用示例
2014/02/21 Javascript
jquery mobile的触控点击事件会多次触发问题的解决方法
2014/05/08 Javascript
jQuery学习笔记之总体架构
2014/06/03 Javascript
JSONP之我见
2015/03/24 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
2015/04/27 Javascript
window.close(); 关闭浏览器窗口js代码的总结介绍
2016/07/14 Javascript
深入探讨Vue.js组件和组件通信
2016/09/12 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
Javascript计算二维数组重复值示例代码
2016/12/18 Javascript
浅析vue给不同环境配置不同打包命令
2018/08/17 Javascript
图文详解vue框架安装步骤
2019/02/12 Javascript
微信小程序五子棋游戏AI实现方法【附demo源码下载】
2019/02/20 Javascript
使用easyui从servlet传递json数据到前端页面的两种方法
2019/09/05 Javascript
关于引入vue.js 文件的知识点总结
2020/01/28 Javascript
js 数组当前行添加数据方法详解
2020/07/28 Javascript
js将日期格式转换为YYYY-MM-DD HH:MM:SS
2020/09/18 Javascript
Python中使用HTMLParser解析html实例
2015/02/08 Python
浅析Python多线程下的变量问题
2015/04/28 Python
Windows中安装使用Virtualenv来创建独立Python环境
2016/05/31 Python
深入理解python中的select模块
2017/04/23 Python
快速了解Python开发中的cookie及简单代码示例
2018/01/17 Python
python在非root权限下的安装方法
2018/01/23 Python
python 通过类中一个方法获取另一个方法变量的实例
2019/01/22 Python
python进行参数传递的方法
2020/05/12 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
matplotlib 三维图表绘制方法简介
2020/09/20 Python
Saucony澳大利亚官网:美国跑鞋品牌,运动鞋中的劳斯莱斯
2018/05/05 全球购物
员工年终演讲稿
2014/01/03 职场文书
大学生撤销处分思想汇报
2014/09/12 职场文书
结婚堵门保证书
2015/05/08 职场文书
如何在C++中调用Python
2021/05/21 Python
关于nginx 实现jira反向代理的问题
2021/09/25 Servers