详解JS中的compose函数和pipe函数用法

 更新时间:2021年04月27日 14:26:45   作者:浅笑·  
这篇文章主要介绍了JS中的compose函数和pipe函数用法,想深入了解Javascript的同学,可以参考下

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)

以上就是详解JS中的compose函数和pipe函数用法的详细内容,更多关于JS的资料请关注脚本之家其它相关文章!

相关文章

  • JS模拟超市简易收银台小程序代码解析

    JS模拟超市简易收银台小程序代码解析

    本文通过实例代码给大家介绍了JS模拟超市简易收银台小程序代码,非常不错,具有参考借鉴价值,需要的的朋友参考下吧
    2017-08-08
  • javascript等号运算符使用详解

    javascript等号运算符使用详解

    在JavaScript中,等号由双等号(==)表示,当且仅当两个运算数相等时,它返回true。今天我们就来详细探讨下等号运算符的问题,并附上等号运算符和全等号运算符的区别分析。
    2015-04-04
  • 如何获取元素的最终background-color

    如何获取元素的最终background-color

    本文主要介绍了如何获取元素的最终background-color的方法,具有一定的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • javascript 函数调用规则

    javascript 函数调用规则

    构造器函数以大写字母开头是一个好的习惯,这可以作为一个提醒,让你在调用的时候不要忘记前面的new运算符.
    2009-08-08
  • 用javascript实现鼠标框选

    用javascript实现鼠标框选

    用javascript实现鼠标框选...
    2007-05-05
  • 无循环 JavaScript(map、reduce、filter和find)

    无循环 JavaScript(map、reduce、filter和find)

    本文由浅入深地介绍了map、reduce、filter和find函数,如何一步一步把循环从代码中抽离掉
    2017-04-04
  • echarts地图设置背景图片及海岸线实例代码

    echarts地图设置背景图片及海岸线实例代码

    公司的业务涉及到统计图的有很多,最近一直echarts里面踩各种坑,下面这篇文章主要给大家介绍了关于echarts地图设置背景图片及海岸线的相关资料,需要的朋友可以参考下
    2022-12-12
  • 理解Javascript图片预加载

    理解Javascript图片预加载

    这篇文章主要介绍了Javascript图片预加载,帮助大家理解Javascript图片预加载的实现原理,感兴趣的小伙伴们可以参考一下
    2016-02-02
  • VS Code转换大小写、修改选中文字或代码颜色的方法

    VS Code转换大小写、修改选中文字或代码颜色的方法

    最近在使用VS Code,发现了不少使用的小技巧,觉着有必要给大家分享下,下面这篇文章主要给大家介绍了关于VS Code转换大小写、修改选中文字或代码颜色的相关资料,文中通过示例代码介绍的非常详细,需要的朋友可以参考借鉴,下面来一起看看吧。
    2017-12-12
  • js实现鼠标移入移出卡片切换内容

    js实现鼠标移入移出卡片切换内容

    这篇文章主要为大家详细介绍了js实现鼠标移入移出卡片切换内容,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-10-10

最新评论