函数组合：compose与pipe实现方法-js教程-PHP中文网

函数组合：compose与pipe实现方法

紅蓮之龍

发布： 2025-11-22 22:48:06

原创

1005人浏览过

函数组合通过compose（从右到左）和pipe（从左到右）实现，分别使用reduceRight和reduce串联函数，提升代码抽象与可读性。

函数组合：compose与pipe实现方法

在函数式编程中，函数组合是一种将多个函数串联起来，前一个函数的输出作为下一个函数输入的技术。常见的两种实现方式是 compose 和 pipe，它们的核心思想相同，但执行顺序相反。

compose：从右到左执行

compose 接收多个函数作为参数，返回一个新的函数。调用这个新函数时，会从最右边的函数开始执行，逐步向左传递结果。

实现原理：

使用 ...functions 收集所有传入的函数
返回一个函数，接收初始参数
利用 reduceRight 从右往左依次应用函数

代码实现：

const compose = (...functions) => (value) =>
  functions.reduceRight((acc, fn) => fn(acc), value);

登录后复制

使用示例：

const toUpper = str => str.toUpperCase();
const addExclamation = str => str + '!';
const greet = str => 'Hello, ' + str;
<p>const composed = compose(greet, toUpper, addExclamation);
console.log(composed('world')); // 输出: Hello, WORLD!

登录后复制

pipe：从左到右执行

pipe 与 compose 相反，它按照函数传入的顺序，从左到右依次执行，更符合多数人的阅读习惯。

站长俱乐部购物系统

功能介绍：1、模块化的程序设计，使得前台页面设计与程序设计几乎完全分离。在前台页面采用过程调用方法。在修改页面设计时只需要在相应位置调用设计好的过程就可以了。另外，这些过程还提供了不同的调用参数，以实现不同的效果；2、阅读等级功能，可以加密产品，进行收费管理；3、可以完全可视化编辑文章内容，所见即所得；4、无组件上传文件，服务器无需安装任何上传组件，无需支持FSO，即可上传文件。可限制文件上传的类

查看详情

实现原理：

同样使用剩余参数收集函数列表
返回一个高阶函数，接收初始值
使用 reduce 从左往右累积执行结果

代码实现：

const pipe = (...functions) => (value) =>
  functions.reduce((acc, fn) => fn(acc), value);

登录后复制

使用示例：

const double = x => x * 2;
const increment = x => x + 1;
const square = x => x ** 2;
<p>const piped = pipe(increment, double, square);
console.log(piped(3)); // ((3 + 1) * 2) ^ 2 = 64

登录后复制