JS 函数式概念: 管道 和 组合

微信搜索 【大迁世界】, 我会第一时间和你分享前端行业趋势,学习途径等等。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

函数管道和组合是函数式编程中的概念,当然也可以在JavaScript中实现--因为它是一种多范式的编程语言,让我们快速深入了解这个概念。

这个概念就是按照一定的顺序执行多个函数,并将一个函数的结果传递给下一个函数。

你可以像这样做得很难看:

function1(function2(function3(initialArg)))

或者使用函数组合:

compose(function3, function2, function1)(initialArg);

或功能管道:

pipe(function1, function2, function3)(initialArg);

简而言之,组合和管道几乎是一样的,唯一的区别是执行顺序;如果函数从左到右执行,就是管道,另一方面,如果函数从右到左执行,就叫组合。

一个更准确的定义是。"在函数式编程中,compose是将较小的单元(我们的函数)组合成更复杂的东西(你猜对了,是另一个函数)的机制"。

下面是一个管道函数的例子。

const pipe = (...functions) => (value) => {
    return functions.reduce((currentValue, currentFunction) => {
      return currentFunction(currentValue);
    }, value);
  };

让我们来补充一些这方面的见解。

基础知识

  • 我们需要收集N多的函数
  • 同时选择一个参数
  • 以链式方式执行它们,将收到的参数传递给将被执行的第一个函数
  • 调用下一个函数,加入第一个函数的结果作为参数。
  • 继续对数组中的每个函数做同样的操作。
/* destructuring to unpack our array of functions into functions */
const pipe = (...functions) => 
  /* value is the received argument */
  (value) => {
    /* reduce helps by doing the iteration over all functions stacking the result */
    return functions.reduce((currentValue, currentFunction) => {
      /* we return the current function, sending the current value to it */
      return currentFunction(currentValue);
    }, value);
  };

我们已经知道,箭头函数如果只返回一条语句,就不需要括号,也不需要返回标签,所以我们可以通过这样写来减少键盘的点击次数。

const pipe = (...functions) => (input) => functions.reduce((chain, func) => func(chain), input);

如何使用

const pipe = (...fns) => (input) => fns.reduce((chain, func) => func(chain), input);

const sum = (...args) => args.flat(1).reduce((x, y) => x + y);

const square = (val) => val*val; 

pipe(sum, square)([3, 5]); // 64

记住,第一个函数是左边的那个(Pipe),所以3+5=8,8的平方是64。我们的测试很顺利,一切似乎都很正常,但如果要用链式 async 函数呢?

异步函数上的管道

我在这方面的一个用例是有一个中间件来处理客户端和网关之间的请求,过程总是相同的(做请求,错误处理,挑选响应中的数据,处理响应以烹制一些数据,等等等等),所以让它看起来像一个魅力。

export default async function handler(req, res) {
  switch (req.method) {
    case 'GET':
      return pipeAsync(provide, parseData, answer)(req.headers);
     /* 
       ... 
     */ 

让我们看看如何在Javascript和Typescript中处理异步函数管道。

JS版

export const pipeAsync =
  (...fns) =>
  (input) =>
    fns.reduce((chain, func) => chain.then(func), Promise.resolve(input));

添加了JSDoc类型,使其更容易理解(我猜)。

/**
 * Applies Function piping to an array of async Functions.
 * @param  {Promise<Function>[]} fns
 * @returns {Function}
 */
export const pipeAsync =
  (...fns) =>
  (/** @type {any} */ input) =>
    fns.reduce((/** @type {Promise<Function>} */ chain, /** @type {Function | Promise<Function> | any} */ func) => chain.then(func), Promise.resolve(input));

TS版

export const pipeAsync: any =
  (...fns: Promise<Function>[]) =>
  (input: any) =>
    fns.reduce((chain: Promise<Function>, func: Function | Promise<Function> | any) => chain.then(func), Promise.resolve(input));

这样一来,它对异步和非异步函数都有效,所以它比上面的例子更胜一筹。

你可能想知道函数的组成是什么,所以让我们来看看。

函数组合

如果你喜欢从右到左调用这些函数,你只需要将reduce改为redureRight,就可以了。让我们看看用函数组成的异步方式。

export const composeAsync =
  (...fns) =>
  (input) =>
    fns.reduceRight((chain, func) => chain.then(func), Promise.resolve(input));

回到上面的例子,让我们复制同样的内容,但要有构图。

如何使用

const compose = (...fns) => (input) => fns.reduceRight((chain, func) => func(chain), input);

const sum = (...args) => args.flat(1).reduce((x, y) => x + y);

const square = (val) => val*val; 

compose(square, sum)([3, 5]); // 64

请注意,我们颠倒了函数的顺序,以保持与帖子顶部的例子一致。

现在,sum(位于最右边的位置)将被首先调用,因此3+5=8,然后8的平方是64。

原文:https://dev.to/joelbonetr/js-...

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。

交流

有梦想,有干货,微信搜索 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试完整考点、资料以及我的系列文章。


终身学习者
我要先坚持分享20年,大家来一起见证吧。
66.4k 声望
104.7k 粉丝
0 条评论
推荐阅读
不要用100vh做移动响应
本文首发于微信公众号:大迁世界, 我的微信:qq449245884,我会第一时间和你分享前端行业趋势,学习途径等等。更多开源作品请看 GitHub [链接] ,包含一线大厂面试完整考点、资料以及我的系列文章。

前端小智4阅读 353

从零搭建 Node.js 企业级 Web 服务器(零):静态服务
过去 5 年,我前后在菜鸟网络和蚂蚁金服做开发工作,一方面支撑业务团队开发各类业务系统,另一方面在自己的技术团队做基础技术建设。期间借着 Node.js 的锋芒做了不少 Web 系统,有的至今生气蓬勃、有的早已夭折...

乌柏木148阅读 12.2k评论 10

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.9k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木66阅读 6.1k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木43阅读 7.3k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(&gt;^ω^&lt...

XboxYan43阅读 2.9k评论 14

封面图
66.4k 声望
104.7k 粉丝
宣传栏