函数组合是将多个函数串联执行的技术，核心思想为(f ∘ g)(x) = f(g(x))，通过compose实现右到左执行，pipe实现左到右执行，适用于数据处理链如字符串操作、React高阶组件等场景。
在JavaScript中，函数组合（Function Composition）是一种将多个函数串联起来、按顺序执行的技术，常用于函数式编程。它通过把一个函数的输出作为下一个函数的输入，形成一条“数据流管道”。这种模式让代码更简洁、可读性更强，也更容易测试和维护。
什么是函数组合？
函数组合的核心思想是：如果有两个函数 f 和 g，那么它们的组合 f ∘ g 表示先执行 g，再将结果传给 f。即：(f ∘ g)(x) = f(g(x))。
例如：
const toUpper = str => str.toUpperCase();
const exclaim = str => str + '!';
const shout = x => exclaim(toUpper(x));
<p>shout('hello'); // 输出: "HELLO!"</p>这里 shout 就是 exclaim 和 toUpper 的组合。
手动实现函数组合（右到左执行）
我们可以定义一个 compose 函数，它接收多个函数作为参数，并返回一个新的函数，这个新函数会从右到左依次执行这些函数。
const compose = (...funcs) => {
return (value) => {
return funcs.reduceRight((acc, fn) => fn(acc), value);
};
};
使用示例：
const add1 = x => x + 1; const multiply2 = x => x * 2; const subtract3 = x => x - 3; <p>const pipeline = compose(subtract3, multiply2, add1); pipeline(5); // 执行顺序：add1(5)=6 → multiply2(6)=12 → subtract3(12)=9，结果为 9</p>
实现从左到右的函数组合（pipe）
有时我们更习惯从左到右阅读执行顺序，可以实现一个 pipe 函数，它与 compose 类似，但执行方向是从左到右。
const pipe = (...funcs) => {
return (value) => {
return funcs.reduce((acc, fn) => fn(acc), value);
};
};
示例：
const pipeline = pipe(add1, multiply2, subtract3);
pipeline(5); // add1(5)=6 → multiply2(6)=12 → subtract3(12)=9
</font><p>这种写法更符合直觉，尤其在构建数据处理链时很常见。</p><H3>实际应用场景</H3><p>函数组合适合用于：</p><ul><li>字符串处理：如格式化、清洗、校验等步骤串联</li><li>数据转换：API响应数据经过多层处理后再使用</li><li>React 中的高阶组件（HOC）逻辑复用</li><li>中间件机制（如 Redux）中的 action 处理流程</li></ul><p>例如对用户输入进行处理：</p><font color="#666"><pre class="brush:php;toolbar:false;">
const trim = str => str.trim();
const capitalize = str => str.charAt(0).toUpperCase() + str.slice(1);
const validateNonEmpty = str => str.length > 0 ? str : 'Unknown';
<p>const formatName = pipe(trim, capitalize, validateNonEmpty);
formatName(' john '); // 输出: "John"</p>基本上就这些。掌握 compose 和 pipe 的原理后，你可以轻松构建清晰的数据处理链条，提升代码的表达力和复用性。
