文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

compose和pipe函数怎么在JavaScript中使用

2023-06-14 21:29

关注

本篇文章为大家展示了compose和pipe函数怎么在JavaScript中使用,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

JavaScript的作用是什么

1、能够嵌入动态文本于HTML页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies,包括创建和修改等。7、基于Node.js技术进行服务器端编程。

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)

上述内容就是compose和pipe函数怎么在JavaScript中使用,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯