当前位置: 首页 > Web前端 > JavaScript

JS函数概念:流水线与组合

时间:2023-03-27 14:02:10 JavaScript

微信搜索【大招走向世界】,第一时间与大家分享前端行业动态、学习路径等。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。函数流水线和组合是函数式编程中的概念,当然也可以在JavaScript中实现——因为它是一种多范式编程语言,让我们快速深入了解这个概念。这个概念是以特定顺序执行多个函数并将一个函数的结果传递给下一个函数。你可以像这样变得丑陋:function1(function2(function3(initialArg)))或使用函数组合:compose(function3,function2,function1)(initialArg);或函数管道:pipe(function1,function2,function3)(initialArg);简而言之,组合和管道几乎相同,唯一的区别是执行顺序;如果函数从左到右执行,则称为流水线;反之,如果函数从右至左执行,则称为组合。更准确的定义是。“在函数式编程中,组合是将较小的单元(我们的函数)组合成更复杂的东西(你猜对了,另一个函数)的机制”。下面是一个管道函数的例子。constpipe=(...functions)=>(value)=>{returnfunctions.reduce((currentValue,currentFunction)=>{returncurrentFunction(currentValue);},value);};让我们为这个见解添加一些内容。基础知识我们需要收集N个以上的函数并选择一个参数以链式方式执行,将接收到的参数传递给第一个要执行的函数调用下一个函数,并将第一个函数的结果作为参数加入.继续对数组中的每个函数执行相同的操作。/*解构我们的函数数组到函数中*/constpipe=(...functions)=>/*value是接收到的参数*/(value)=>{/*reduce通过对所有函数进行迭代来帮助堆叠结果*/returnfunctions.reduce((currentValue,currentFunction)=>{/*我们返回当前函数,将当前值发送给它*/returncurrentFunction(currentValue);},value);};我们已经知道,如果箭头函数只返回一条语句,它不需要括号,也不需要返回标签,所以我们可以这样写来减少键盘点击次数。constpipe=(...functions)=>(input)=>functions.reduce((chain,func)=>func(chain),input);如何使用constpipe=(...fns)=>(input)=>fns.reduce((chain,func)=>func(chain),input);constsum=(...args)=>args.flat(1).reduce((x,y)=>x+y);constsquare=(val)=>val*val;管道(总和,平方)([3,5]);//64记住,第一个函数是左边那个(Pipe),所以3+5=8,8的平方就是64。我们的测试进行得很顺利,一切似乎都正常,但是链接异步函数呢?异步函数上的管道我的一个用例是有一个处理客户端和网关之间请求的中间件,过程总是相同的(执行请求、错误处理、挑选响应中的数据、处理响应烹饪一些数据,blahblahblah),所以它就像一个魅力。exportdefaultasyncfunctionhandler(req,res){switch(req.method){case'GET':returnpipeAsync(provide,parseData,answer)(req.headers);/*...*/让我们看看如何处理Javascript和Typescript中的异步函数管道。JS版本exportconstpipeAsync=(...fns)=>(input)=>fns.reduce((chain,func)=>chain.then(func),Promise.resolve(input));添加了JSDoc类型,使其更易于理解(我猜)。/***将函数管道应用于异步函数数组。*@param{Promise[]}fns*@returns{Function}*/exportconstpipeAsync=(...fns)=>(/**@type{any}*/input)=>fns.reduce((/**@type{Promise}*/chain,/**@type{Function|Promise|any}*/func)=>chain.then(func),Promise.resolve(input));TSversionexportconstpipeAsync:any=(...fns:Promise[])=>(input:any)=>fns.reduce((chain:Promise,func:Function|Promise|any)=>chain.then(func),Promise.resolve(input));这样,它适用于异步和非异步函数,因此它优于上面的示例。您可能想知道函数是由什么组成的,所以让我们来看看。函数组合如果您更喜欢从右到左调用这些函数,只需将reduce更改为reduceRight就可以了。让我们看看函数的异步方式。exportconstcomposeAsync=(...fns)=>(input)=>fns.reduceRight((chain,func)=>chain.then(func),Promise.resolve(input));回到上面的例子,让我们复制相同的内容,但有合成。如何使用constcompose=(...fns)=>(input)=>fns.reduceRight((chain,func)=>func(chain),input);constsum=(...args)=>args。平(1).reduce((x,y)=>x+y);constsquare=(val)=>val*val;撰写(平方,总和)([3,5]);//64注意,我们颠倒了函数的顺序以与帖子顶部的示例保持一致。现在,会先调用sum(最右边),所以3+5=8,那么8的平方就是64。原文:https://dev.to/joelbonetr/js-...交换有梦,有干货,微信搜索【大千世界】关注这位大清早还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。交流有梦想,有干货,微信搜索【大千世界】关注这位凌晨还在洗碗的洗碗智者。本文已收录到GitHubhttps://github.com/qq449245884/xiaozhi,里面有完整的测试站点、资料和我的一线厂商访谈系列文章。