JavaScript中的compose函数和pipe函数
compose函数
compose函数可以将需要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数。我们考虑一个简单的需求:
给定一个输入值x,先给这个值加10,然后结果乘以10
这个需求很简单,直接一个计算函数就行:
const calculate = x => (x + 10) * 10;
let res = calculate(10);
console.log(res); // 200
但是根据我们之前讲的函数式编程,我们可以将复杂的几个步骤拆成几个简单的可复用的简单步骤,于是我们拆出了一个加法函数和一个乘法函数:
const add = x => x + 10;
const multiply = x => x * 10;
// 我们的计算改为两个函数的嵌套计算,add函数的返回值作为multiply函数的参数
let res = multiply(add(10));
console.log(res); // 结果还是200
上面的计算方法就是函数的嵌套执行,而我们compose
的作用就是将嵌套执行的方法作为参数平铺,嵌套执行的时候,里面的方法也就是右边的方法最开始执行,然后往左边返回,我们的compose
方法也是从右边的参数开始执行,所以我们的目标就很明确了,我们需要一个像这样的compose
方法:
// 参数从右往左执行,所以multiply在前,add在后
let res = compose(multiply, add)(10);
在讲这个之前我们先来看一个需要用到的函数Array.prototype.reduce
Array.prototype.reduce
数组的reduce方法可以实现一个累加效果,它接收两个参数,第一个是一个累加器方法,第二个是初始化值。累加器接收四个参数,第一个是上次的计算值,第二个是数组的当前值,主要用的就是这两个参数,后面两个参数不常用,他们是当前index和当前迭代的数组:
const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes的初始值是传入的[],以后会是每次迭代计算后的值
const flatArr = arr.reduce((prevRes, item) => prevRes.concat(item), []);
console.log(flatArr); // [1, 2, 3, 4, 5, 6]
Array.prototype.reduceRight
Array.prototype.reduce
会从左往右进行迭代,如果需要从右往左迭代,用Array.prototype.reduceRight
就好了
const arr = [[1, 2], [3, 4], [5, 6]];
// prevRes的初始值是传入的[],以后会是每次迭代计算后的值
const flatArr = arr.reduceRight((prevRes, item) => prevRes.concat(item), []);
console.log(flatArr); // [5, 6, 3, 4, 1, 2]
那这个compose方法要怎么实现呢,这里需要借助Array.prototype.reduceRight
:
const compose = function(){
// 将接收的参数存到一个数组, args == [multiply, add]
const args = [].slice.apply(arguments);
return function(x) {
return args.reduceRight((res, cb) => cb(res), x);
}
}
// 我们来验证下这个方法
let calculate = compose(multiply, add);
let res = calculate(10);
console.log(res); // 结果还是200
复制代码
上面的compose
函数使用ES6的话会更加简洁:
const compose = (...args) => x => args.reduceRight((res, cb) => cb(res), x);
Redux的中间件就是用compose
实现的,webpack中loader的加载顺序也是从右往左,这是因为他也是compose
实现的。
pipe函数
pipe
函数跟compose
函数的作用是一样的,也是将参数平铺,只不过他的顺序是从左往右。我们来实现下,只需要将reduceRight
改成reduce
就行了:
const pipe = function(){
const args = [].slice.apply(arguments);
return function(x) {
return args.reduce((res, cb) => cb(res), x);
}
}
// 参数顺序改为从左往右
let calculate = pipe(add, multiply);
let res = calculate(10);
console.log(res); // 结果还是200
复制代码
ES6写法:
const pipe = (...args) => x => args.reduce((res, cb) => cb(res), x)
原创不易,每篇文章都耗费了作者大量的时间和心血,如果本文对你有帮助,请点赞支持作者,也让更多人看到本文~~ 更多文章请看我的掘金文章汇总
- Entity Framework——记录执行的命令信息
- 【BlackHat 2017 议题剖析】连接的力量:GitHub 企业版漏洞攻击链构造之旅
- CVE-2015-1641 Word 利用样本分析
- Cloudera Navigator介绍与安装
- [LeetCode]String主题系列{第5,6题}
- CDH内存调拨过度警告分析
- Ztorg:从 root 到 SMS
- [LeetCode]Math主题系列{第7,9,13,273题}
- 被忽视的攻击面:Python package 钓鱼
- [LeetCode]LinkedList主题系列{第2题}
- [LeetCode]HashTable主题系列{第3题}
- 如何使用Oozie API接口向Kerberos集群提交Java程序
- [LeetCode]Array主题系列{35,39,40,48题}
- 如何使用Sqoop2
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- Spring Security 中如何细化权限粒度?
- 小书MybatisPlus第4篇-表格分页与下拉分页查询
- 小书MybatisPlus第3篇-自定义SQL
- Nginx + Spring Boot 实现负载均衡
- 小书MybatisPlus第2篇-条件构造器的应用及总结
- 一个案例演示 Spring Security 中粒度超细的权限控制!
- 信息收集之主机发现:nmap
- 文本文件逐行处理–用java8 Stream流的方式
- 使用java8API遍历过滤文件目录及子目录及隐藏文件
- 使用位运算、值交换等方式反转java字符串-共四种方法
- 精讲RestTemplate第2篇-多种底层HTTP客户端类库的切换
- 精讲RestTemplate第1篇-在Spring或非Spring环境下如何使用
- 在图中添加多边形
- 设置坐标轴刻度的位置和样式
- OkHttp透明压缩,收获性能10倍,外加故障一枚