关于javascript:JS-函数式概念-管道-和-组合

7次阅读

共计 3187 个字符，预计需要花费 8 分钟才能阅读完成。

微信搜寻【大迁世界】, 我会第一工夫和你分享前端行业趋势，学习路径等等。
本文 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-…