提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  Javascript

当前栏目

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

JS
2023-02-25 18:17:08 时间

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

相关文章