详解JS中的compose函数和pipe函数用法
作者:浅笑· 发布时间:2024-04-18 10:59:25
compose函数
compose函数可以将需要嵌套执行的函数平铺,嵌套执行就是一个函数的返回值将作为另一个函数的参数。我们考虑一个简单的需求:这个需求很简单,直接一个计算函数就行:
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)
来源:https://www.cnblogs.com/qianxiaox/p/13679185.html
猜你喜欢
- 在一篇文章中看到关于PHP引用的图解,对于加深对PHP引用的理解很有帮助,在这里备份一下。如果你对PHP的引用一点也不了解,可以先看我之前的
- 一、生成器1、生成器定义在Python中,一边循环一边计算的机制,称为生成器:generator2、生成器存在的意义列表所有数据都在内存中,
- 关于SQL UNION 操作符 UNION 操作符用于合并两个或多个 SELECT 语句的结果集。 注意: 1.UNION 内部的 SELE
- 一、缺失数据剔除1. python 方式获取所有的缺失值,返回一个 true 和 false 的表df.isnull()统计缺失值,按照每一
- 一个完整的域名,由根域、顶级域、二级、 * ……域名构成,每级域名之间用点分开,每级域名由字母、数字和减号构成(第一个字母不能是减号),不区分
- 元组是不可变的Python对象序列。元组的序列就像列表。唯一的区别是,元组不能被改变,即元组是不可被修改。元组使用小括号,而列表
- WARNING:低技术力自己无聊写的哥特字体是最好看的:示例代码:#!usr/bin/env python3# -*- coding:UTF
- 序列化(Serialization)与反序列化(Deserialization)是RESTful API 开发中绕不开的一环,开发时,序列化
- 用了两种方法保存图片,opencv和Image,实践证明opencv非常快from PIL import Imageimport osimp
- 一、安装前的准备1、下载安装程序包,可到MySQL官方网站www.mysql.com下载,如图1-1:图1-1下载后的安装文件如图1-2所示
- 如何一行输入多个数,并存入列表在python里,如果你仅使用input()的话是输入一行的内容并将该行的内容以字符串的形式存到变量中,但如果
- 先上代码:import tensorflow as tfx = tf.ones(shape=[100, 200], dtype=tf.int
- MySQL中的事件调度器,EVENT,也叫定时任务,类似于Unix crontab或Windows任务调度程序。EVENT由其名称和所在的s
- 作者: wyh草样出处:https://www.cnblogs.com/wyh0923/p/14084898.html什么是文件文件是系统存
- 在学习 Python 类的时候,会碰见类中有 __init__() 这样一个函数,其实它就是 Python 的构造方法。构造方法类似于类似
- 1、先检测系统是否自带原有版本mysql安装包,如果有要先卸载删除,不然不能成功安装和启动;# rpm -qa|grep mysql&nbs
- 1、MFCC概述在语音识别(Speech Recognition)和话者识别(Speaker Recognition)方面,最常用到的语音特
- 一、逻辑回归1.模型的保存与加载模型训练好之后,可以直接保存,需要用到joblib库。保存的时候是pkl格式,二进制,通过dump方法保存。
- 本文实例讲述了Python将名称映射到序列元素中的方法。分享给大家供大家参考,具体如下:问题:希望通过名称来访问元素,减少结构中对位置的依赖
- 引言层次聚类是一种构建聚类层次结构的聚类算法。该算法从分配给它们自己的集群的所有数据点开始。然后将两个最近的集群合并到同一个集群中。最后,当