JavaScript函数组合

函数组合（Function Composition）是函数式编程中的核心概念之一，指将多个函数按照特定顺序组合成一个新函数的过程。组合后的函数会依次执行输入函数，并将前一个函数的输出作为下一个函数的输入。这种技术可以简化代码、提高可读性，并支持更灵活的函数复用。

基本概念

在数学中，函数组合通常表示为： $(f \circ g) (x) = f (g (x))$ 其中：

$g$ 是第一个执行的函数
$f$ 是第二个执行的函数
$\circ$ 表示组合操作

在JavaScript中，我们可以手动实现函数组合，也可以利用库（如Ramda、Lodash/fp）提供的工具函数。

手动实现

以下是一个简单的函数组合实现：

const compose = (f, g) => (x) => f(g(x));

// 示例函数
const add5 = (x) => x + 5;
const multiplyBy2 = (x) => x * 2;

// 组合函数
const add5ThenMultiplyBy2 = compose(multiplyBy2, add5);

console.log(add5ThenMultiplyBy2(3)); // 输出: (3 + 5) * 2 = 16

多函数组合

实际开发中，我们经常需要组合多个函数。以下是支持任意数量函数的组合实现：

const compose = (...fns) => (initialValue) =>
    fns.reduceRight((acc, fn) => fn(acc), initialValue);

// 示例函数
const toUpperCase = (str) => str.toUpperCase();
const exclaim = (str) => `${str}!`;
const repeat = (str) => `${str} ${str}`;

// 组合多个函数（从右到左执行）
const processString = compose(repeat, exclaim, toUpperCase);

console.log(processString("hello")); // 输出: "HELLO! HELLO!"

管道（Pipe）

与从左到右执行的组合不同，管道（pipe）是从左到右执行函数的组合方式：

const pipe = (...fns) => (initialValue) =>
    fns.reduce((acc, fn) => fn(acc), initialValue);

// 使用相同的示例函数
const processStringPipe = pipe(toUpperCase, exclaim, repeat);

console.log(processStringPipe("hello")); // 同样输出: "HELLO! HELLO!"

组合与管道的区别

两者的主要区别在于执行顺序：

compose：从右到左执行（数学中的传统方式）
pipe：从左到右执行（更符合人类的阅读顺序）

可以用mermaid图表示两者的数据流：

compose(f, g) 数据流向

pipe(f, g) 数据流向

实际应用案例

数据处理管道

函数组合特别适合构建数据处理管道：

// 实用函数
const filterEven = (arr) => arr.filter(x => x % 2 === 0);
const squareAll = (arr) => arr.map(x => x * x);
const sumAll = (arr) => arr.reduce((acc, x) => acc + x, 0);

// 组合处理流程
const sumOfSquaresOfEvens = pipe(
    filterEven,
    squareAll,
    sumAll
);

const numbers = [1, 2, 3, 4, 5, 6];
console.log(sumOfSquaresOfEvens(numbers)); // 输出: 56 (2² + 4² + 6²)

中间件组合

在Express等框架中，函数组合用于中间件处理：

const logger = (req, res, next) => {
    console.log(`${req.method} ${req.url}`);
    next();
};

const authenticate = (req, res, next) => {
    if (req.headers.authorization) {
        next();
    } else {
        res.status(401).send('Unauthorized');
    }
};

const handleRequest = (req, res) => {
    res.send('Hello, authenticated user!');
};

// 组合中间件（注意顺序很重要）
const middlewarePipeline = pipe(logger, authenticate, handleRequest);

// 模拟请求对象
const mockReq = {
    method: 'GET',
    url: '/api/user',
    headers: {
        authorization: 'Bearer token123'
    }
};
const mockRes = {
    status: function(code) { this.statusCode = code; return this; },
    send: function(msg) { console.log(`Response: ${msg}`); }
};

middlewarePipeline(mockReq, mockRes); // 会依次执行logger→authenticate→handleRequest

高级技巧

点自由风格（Point-free）

函数组合支持点自由编程风格，即不显式提及数据处理参数：

// 非点自由风格
const getEvenNumbersLength = (arr) => arr.filter(x => x % 2 === 0).length;

// 点自由风格
const filterEven = (arr) => arr.filter(x => x % 2 === 0);
const getLength = (arr) => arr.length;
const getEvenNumbersLengthPF = pipe(filterEven, getLength);

// 两种方式结果相同
console.log(getEvenNumbersLength([1,2,3,4])); // 2
console.log(getEvenNumbersLengthPF([1,2,3,4])); // 2

组合与柯里化

结合柯里化函数可以创建更灵活的组合：

const curry = (fn) => {
    const arity = fn.length;
    return function $curry(...args) {
        if (args.length < arity) {
            return $curry.bind(null, ...args);
        }
        return fn.apply(null, args);
    };
};

const add = curry((a, b) => a + b);
const multiply = curry((a, b) => a * b);

// 部分应用创建新函数
const add5 = add(5);
const double = multiply(2);

// 组合部分应用的函数
const add5ThenDouble = pipe(add5, double);

console.log(add5ThenDouble(3)); // (3 + 5) * 2 = 16

最佳实践

1. 保持函数纯净：组合的函数应该是无副作用的纯函数 2. 控制组合长度：避免创建过长的组合链，可拆分为有意义的子组合 3. 合理命名：给组合后的函数起描述性名称 4. 注意执行顺序：清楚了解compose和pipe的执行方向 5. 类型一致性：确保相邻函数的输入输出类型匹配

常见问题

Q: 函数组合和函数链式调用有什么区别？ A: 链式调用需要对象支持特定方法（如数组的map/filter），而函数组合更通用，可以组合任何函数。

Q: 什么时候应该使用compose，什么时候用pipe？ A: 这主要是风格选择。数学传统使用compose（从右到左），而许多开发者发现pipe（从左到右）更直观。

Q: 函数组合会影响性能吗？ A: 每个组合步骤确实会引入微小开销，但在绝大多数情况下可以忽略。优化时可以考虑减少组合层数或使用更高效的实现。