函数组合：compose 与 pipe 模式

函数组合：compose 与 pipe 模式

函数组合是函数式编程的核心思想之一，它让我们能够将多个简单、单一职责的函数串联成一个复杂的处理管道。通过组合，我们可以避免写出深层嵌套的调用，显著提升代码的可读性、可测试性与可复用性。本教程将带你理解组合的核心概念，并掌握 compose 与 pipe 两种经典实现模式。

什么是函数组合

函数组合，简单来说，就是将多个函数按顺序调用，前一个函数的返回值作为后一个函数的输入，最终得到一个全新的函数。

从数学角度看，如果我们有两个函数 f(x) 和 g(x)，它们的组合 (f ∘ g)(x) 等价于 f(g(x))。在编程中，这一概念被拓展为多函数链式处理。

// 假设我们有两个简单函数
const addOne = (x) => x + 1;
const double = (x) => x * 2;

// 不使用组合的嵌套调用
const result = double(addOne(5)); // 12

组合的目的就是消除这种 f(g(h(x))) 的洋葱式代码，将其变成一条清晰的流水线。

Compose 模式：从右向左执行

compose 是最接近数学定义的组合函数。它接收多个函数作为参数，并返回一个新函数。当调用这个新函数时，参数会从右向左依次通过函数管道。

// 一个简易的 compose 实现
function compose(...fns) {
  return function (initialValue) {
    return fns.reduceRight((accumulator, fn) => fn(accumulator), initialValue);
  };
}

// 使用 compose
const addOne = (x) => x + 1;
const double = (x) => x * 2;
const square = (x) => x * x;

const compute = compose(square, double, addOne);

// 执行顺序：addOne -> double -> square
// 输入 5：5 + 1 = 6 → 6 * 2 = 12 → 12 * 12 = 144
console.log(compute(5)); // 144

在这个例子中，数据流动方向是自下而上的，也就是参数先被 addOne 处理，然后交给 double，最后传给 square。这种执行顺序与我们书写函数的顺序相反，正好契合数学中函数的复合写法 square(double(addOne(x)))。

Pipe 模式：从左向右执行

pipe 与 compose 在本质上完全相同，唯一的区别在于函数的执行顺序：pipe 从左向右依次调用函数。它更符合人类从左到右的阅读习惯，数据就像通过一条流水线一样被逐步加工。

// 一个简易的 pipe 实现
function pipe(...fns) {
  return function (initialValue) {
    return fns.reduce((accumulator, fn) => fn(accumulator), initialValue);
  };
}

// 使用 pipe 改写上面的例子
const computePipe = pipe(addOne, double, square);

// 执行顺序：addOne -> double -> square （与书写顺序一致）
console.log(computePipe(5)); // 144

可以看到，pipe 将数据的处理步骤按照书写顺序线性排列，大大提升了复杂流程的可读性。在实际开发中，pipe 往往比 compose 更受欢迎，因为它更直觉。

Compose 与 Pipe 的核心区别

两者没有绝对的优劣，选择哪一种通常取决于团队习惯以及具体库的约定。很多现代函数式编程库（如 Ramda）同时提供 compose 和 pipe (或 flow)。

为什么需要函数组合

消除深层嵌套，提高可读性

不使用组合时，多层函数调用会呈现倒金字塔形状，参数与函数名分离，难以一目了然：

// 深层嵌套，难以阅读
finalResult = fn3(fn2(fn1(rawData)));

使用 pipe 后，处理步骤一目了然：

const process = pipe(fn1, fn2, fn3);
finalResult = process(rawData);

单一职责与可复用性

组合鼓励我们把复杂逻辑拆分成小粒度、纯函数式的工具函数。每个函数只做一件事，然后将它们像乐高积木一样组合起来。这不仅让单元测试变得极其简单，也使得这些工具函数可以在不同场景中复用。

声明式编程风格

组合让我们描述的是“做什么”而不是“怎么做”。pipe(trim, toLowerCase, replaceSpaces) 直接表达了数据变换的意图，而无需关心具体迭代细节。

实用进阶：处理多参数与异步函数

现实中的函数往往不止接收一个参数，有时还需要处理异步操作。我们可以对组合函数进行扩展。

处理第一个函数的多参数

标准的 compose/pipe 只接受一个初始参数。如果需要传递多个参数给管道中的第一个函数，可以让返回的复合函数接收任意参数，并将其原样传给第一个函数：

function pipeWithMultipleArgs(...fns) {
  return function (...args) {
    // 第一个函数接收所有参数，后续函数只接收前一个返回值
    return fns
      .slice(1)
      .reduce((acc, fn) => fn(acc), fns[0](...args));
  };
}

const multiply = (a, b) => a * b;
const toString = (num) => `Result: ${num}`;
const compute = pipeWithMultipleArgs(multiply, toString);
console.log(compute(3, 7)); // "Result: 21"

组合异步函数 (Promise)

如果管道中需要包含返回 Promise 的函数，可以构建一个异步 pipe：

function asyncPipe(...fns) {
  return function (initialValue) {
    return fns.reduce(
      (promise, fn) => promise.then(fn),
      Promise.resolve(initialValue)
    );
  };
}

// 模拟异步 API 调用
const fetchUser = (id) => Promise.resolve({ id, name: 'Alice' });
const normalizeName = (user) => ({ ...user, name: user.name.toUpperCase() });
const asyncCompute = asyncPipe(fetchUser, normalizeName);

asyncCompute(1).then(console.log); // { id: 1, name: 'ALICE' }

这样我们可以把同步和异步函数无缝组合在同一条管道中，非常适合处理数据获取、转换、存储等流程。

实际应用示例

文本格式化管道

假设我们需要对用户输入的字符串进行一系列处理：去除首尾空格 → 转换为小写 → 将连续空格替换为单个连字符 → 截取前50个字符。组合模式让这一切变得清晰：

const trim = (str) => str.trim();
const lower = (str) => str.toLowerCase();
const hyphenate = (str) => str.replace(/\s+/g, '-');
const truncate = (length) => (str) => str.slice(0, length);

const formatSlug = pipe(
  trim,
  lower,
  hyphenate,
  truncate(50)
);

console.log(formatSlug('  Hello   World  Functional  Programming '));
// 输出: "hello-world-functional-programming"

Redux 中的 compose 增强器

Redux 使用 compose 来组合多个 Store 增强器（如应用中间件、DevTools），其官方实现与我们的简化版原理完全一致：

import { createStore, applyMiddleware, compose } from 'redux';
const store = createStore(
  rootReducer,
  compose(
    applyMiddleware(thunk),
    window.__REDUX_DEVTOOLS_EXTENSION__ ? window.__REDUX_DEVTOOLS_EXTENSION__() : (f) => f
  )
);

数据验证与转换

组合可以用于构建清晰的数据处理链。例如，对表单字段进行验证和标准化：

const isNonEmpty = (val) => val !== '';
const isEmail = (val) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(val);
const toLowerCase = (val) => val.toLowerCase();

const validateAndNormalizeEmail = pipe(
  toLowerCase,
  (val) => isNonEmpty(val) && isEmail(val) ? val : null
);

常见误区与注意事项

• 函数纯度：组合管道中的函数应当尽量避免副作用（如直接修改 DOM、打印日志）。保持纯函数会让组合的行为完全可预测，易于调试。
• 类型一致性：确保前一个函数的输出类型与下一个函数的输入类型兼容。中途类型不匹配会导致错误。TypeScript 用户可以借助泛型严格约束每个函数的签名。
• 调试困难：管道过长时，出现错误难以定位。可以在管道中插入一个用于打印中间结果的 tap 函数：

  const tap = (msg) => (x) => { console.log(msg, x); return x; };
  const debuggedPipe = pipe(
    trim,
    tap('after trim'),
    lower,
    tap('after lower')
  );
  

• 过度组合：不要为了组合而组合。如果几个函数逻辑紧密，且不会被单独复用，合并成一个函数可能比强行拆分再组合更清晰。

总结

函数组合提供了一种强大且优雅的方式来构建数据处理流程。compose 与 pipe 的核心区别仅在于执行顺序，你可以根据可读性偏好进行选择。通过将单一职责的小函数组合起来，代码变得更具声明式风格，更容易理解、测试和维护。

掌握组合模式之后，你会发现许多复杂逻辑都可以用一条清晰的“函数管道”来表达。开始动手将你代码中的嵌套调用替换为 pipe 或 compose 吧，你会立刻感受到代码质的提升。