什么是JS函数组合(Function Composition)及其实现

从“洋葱嵌套”到平铺管道

在日常业务开发中，我们经常需要对同一份数据进行连续加工。例如，对用户提交的用户名进行“去除首尾空白”、“转为全小写”并“加上系统前缀”：

// 3个独立的原子转换函数
const trim = str => str.trim();
const toLower = str => str.toLowerCase();
const addPrefix = str => `user_${str}`;

// 传统方式：多层嵌套调用
const rawInput = "  AliceDev  ";
const result = addPrefix(toLower(trim(rawInput)));
console.log(result); // "user_alicedev"

这种多层嵌套的代码形态通常被称为“洋葱代码”。当处理环节增加到 5 个或 6 个时，代码会向右侧不断深陷，阅读者必须先找到最内层的 trim(rawInput)，然后由内向外反向解析整个执行顺序。不仅容易遗漏闭合括号，也增加了调试和修改成本。

函数组合正是为了消除这种深层嵌套而生。它将 trim、toLower 和 addPrefix 这组函数像拼积木一样组合在一起，产生一个具有完整处理能力的新函数 formatUser，使业务调用退化为最直观的单步调用：formatUser(rawInput)。

从数学定义到JS基础实现

函数组合的概念来源于基础数学中的复合函数。设有两个映射函数 $g: X o Y$ 和 $f: Y o Z$，它们的复合记作 $(f \circ g)(x) = f(g(x))$。其严格要求是：内层函数 $g$ 的输出值域必须与外层函数 $f$ 的输入定义域相匹配。

1. 双函数组合实现

在JavaScript中，函数作为“一等公民”（First-class Citizens），既可以作为参数传入，也可以作为返回值传出。根据数学定义，两个函数的简单组合可以用高阶函数实现：

/**
 * 双函数组合
 * @param {Function} f 外层函数（后执行）
 * @param {Function} g 内层函数（先执行）
 * @returns {Function} 复合函数
 */
const compose2 = (f, g) => x => f(g(x));

// 测试用例
const double = n => n * 2;
const addTen = n => n + 10;

// 先加10，再翻倍：double(addTen(5)) -> (5 + 10) * 2 = 30
const calc = compose2(double, addTen);

console.log(calc(5));

2. 多函数通用组合（从右向左的 compose）

在现实项目中，数据处理往往包含三个以上的步骤。我们需要支持任意数量函数的通用组合函数 compose(...fns)。数学界的通用约定是从右向左执行（即最右侧的函数最先接收原始输入），JavaScript数组自带的 reduceRight 方法天然契合这一计算模型：

/**
 * 通用多函数组合（从右向左执行）
 * @param {...Function} fns 待组合的函数列表
 * @returns {Function} 接收初始参数并依次执行的复合函数
 */
const compose = (...fns) => {
  if (fns.length === 0) return arg => arg;
  if (fns.length === 1) return fns[0];

  return (...args) => {
    // 首次调用最右侧函数时支持接收多参数，后续传递累加值
    const lastFn = fns[fns.length - 1];
    const restFns = fns.slice(0, -1);
    return restFns.reduceRight(
      (accumulatedVal, currentFn) => currentFn(accumulatedVal),
      lastFn(...args)
    );
  };
};

为了直观展现 reduceRight 的折叠过程，以下流程图描绘了输入值是如何在函数数组中逆向逐级传递并最终输出的。

从左到右的管道：pipe 实现

尽管从右向左的 compose 符合数学符号规范，但在绝大多数工程实践和人类自然阅读习惯中，我们更习惯于“从左向右”阅读处理流水线：先做第一步，再做第二步，最后做第三步。这种从左往右执行的组合方式通常被称为 pipe（管道）。

实现 pipe 只需要将 reduceRight 替换为常规的 reduce：

/**
 * 顺规管道函数（从左向右执行）
 * @param {...Function} fns 待执行的函数列表
 * @returns {Function} 复合函数
 */
const pipe = (...fns) => {
  if (fns.length === 0) return arg => arg;
  if (fns.length === 1) return fns[0];

  return (...args) => {
    const firstFn = fns[0];
    const restFns = fns.slice(1);
    return restFns.reduce(
      (accumulatedVal, currentFn) => currentFn(accumulatedVal),
      firstFn(...args)
    );
  };
};

两者的功能完全对等，仅仅是参数数组的消费方向相反：pipe(f, g, h) 等价于 compose(h, g, f)。

函数能够成功组合的三个核心准则

组合并不是将任意几个函数放在一起就能自动正常工作的。要构建健壮的函数组合，必须遵循以下三项基础设计准则：

1. 纯函数（Pure Functions）保障可预测性

参与组合的函数必须是纯函数：相同的输入始终得到相同的输出，且在执行过程中不产生副作用（如修改全局变量、发起外部网络请求或修改传入的对象参数）。如果中间某个函数隐式修改了全局状态，组合的结果就会依赖于执行时机，失去确定性。

2. “一元参数契约”与柯里化（Currying）

在流水线中，前一个函数的返回值直接作为下一个函数的入参。这意味着，除了组合链条中的第一个执行函数可以接收多个参数外，后续所有函数必须只能接收一个参数（一元函数）。

遇到需要多个参数的通用工具函数时，我们必须通过柯里化（Currying）或偏函数应用（Partial Application）将其改造为单参数函数。例如：

// 原始多元函数（无法直接挂载在流水线中段）
const multiply = (a, b) => a * b;

// 柯里化改写为单参数链式函数
const curriedMultiply = a => b => a * b;

// 预先传入一个参数，生成接收单个输入的一元函数
const multiplyByTwo = curriedMultiply(2);

// 此时即可顺利放入组合流水线
const doubleAndAdd = pipe(
  multiplyByTwo,
  x => x + 10
);

console.log(doubleAndAdd(5)); // (5 * 2) + 10 = 20

3. 结合律（Associativity）保证灵活拆分

函数组合满足数学上的结合律：compose(f, compose(g, h)) 完全等价于 compose(compose(f, g), h)。这意味着开发者可以根据业务边界自由地将基础原子函数切分成更小或更大的逻辑包，而不影响最终计算结果：

// 基础函数
const add1 = n => n + 1;
const double = n => n * 2;
const square = n => n * n;

// 分组方式一
const group1 = compose(square, compose(double, add1));

// 分组方式二
const group2 = compose(compose(square, double), add1);

console.log(group1(3)); // ((3 + 1) * 2) ^ 2 = 64
console.log(group2(3)); // 64 (结果严格一致)

完整业务实战：订单数据处理流水线

下面通过一个真实的电商数据处理场景，演示如何使用 pipe 组织业务逻辑。我们需要对原始订单项数组执行如下流程：

1. 筛选有效订单项（过滤数量小于等于0的数据）；
2. 计算每项商品总金额（单价 × 数量）；
3. 应用全店折扣策略（满减或折扣率）；
4. 格式化为带货币符号与两位小数的报表文本。

// 1. 基础 pipe 工具实现
const pipe = (...fns) => x => fns.reduce((v, f) => f(v), x);

// 2. 调试探针函数（用于在管道中观察中间结果而不影响数据流动）
const trace = label => value => {
  console.log(`[DEBUG] ${label}:`, value);
  return value; // 严格原样返回输入值
};

// 3. 业务原子函数定义
const filterValidItems = items => items.filter(item => item.quantity > 0);

const calculateSubtotal = items => 
  items.reduce((sum, item) => sum + item.price * item.quantity, 0);

// 柯里化的折扣计算函数
const applyDiscount = rate => amount => amount * rate;

// 货币格式化函数
const formatCurrency = symbol => amount => `${symbol}${amount.toFixed(2)}`;

// 4. 构建业务流水线
const processOrder = pipe(
  trace('1. 原始入参'),
  filterValidItems,
  trace('2. 过滤无效项后'),
  calculateSubtotal,
  trace('3. 原始总计'),
  applyDiscount(0.85), // 享受85折
  trace('4. 折后总计'),
  formatCurrency('¥')
);

// 5. 执行测试数据
const mockItems = [
  { name: '机械键盘', price: 299, quantity: 1 },
  { name: '无效退单商品', price: 99, quantity: 0 },
  { name: '无线鼠标', price: 150, quantity: 2 }
];

const finalBill = processOrder(mockItems);
console.log('最终结算展示:', finalBill);

支持异步操作：Async Pipe 实现

现代前端开发中不可避免地会遇到异步任务（例如向服务端请求鉴权、查询数据库或读取文件）。如果函数链条中包含返回 Promise 的异步函数，普通的同步 reduce 会直接传递 Promise 对象本身导致后续计算失效。

通过让累加器支持 await，我们可以轻松实现支持异步流的 pipeAsync：

/**
 * 异步管道函数（支持同步与异步混合任务）
 * @param {...Function} fns 
 * @returns {Function} 返回 Promise 的复合函数
 */
const pipeAsync = (...fns) => input =>
  fns.reduce(async (lastPromise, currentFn) => {
    const val = await lastPromise;
    return currentFn(val);
  }, Promise.resolve(input));

// 异步实战模拟
const fetchUserRole = async userId => {
  // 模拟异步从接口获取用户角色
  return { id: userId, role: 'admin' };
};

const checkPermissions = user => {
  return { ...user, canAccessAdminPanel: user.role === 'admin' };
};

const logAudit = async userState => {
  // 模拟异步写入审计日志
  return `审计记录完毕: 用户 ${userState.id} 权限状态为 ${userState.canAccessAdminPanel}`;
};

// 组合并执行异步任务
const auditPipeline = pipeAsync(fetchUserRole, checkPermissions, logAudit);

auditPipeline(10086).then(report => {
  console.log(report);
});

常见问题与调试建议

综上所述，函数组合不仅是一种代码编写技巧，更是函数式编程中“关注点分离”的核心实践。通过将复杂业务拆解为纯净、独立的单一职责函数，再借助 compose 或 pipe 像流水线一样把它们串联起来，能让代码的结构更扁平、逻辑更透明，也更易于单独编写单元测试和长期维护。