编辑“︁JavaScript函数组合”︁

{{DISPLAYTITLE:JavaScript函数组合}}  
'''JavaScript函数组合'''是一种将多个简单函数组合成更复杂函数的技术，通过将函数的输出作为下一个函数的输入来实现。这种技术遵循[[函数式编程]]的原则，强调代码的模块化、可重用性和声明式风格。  

== 基本概念 ==  
函数组合的核心思想是：给定两个函数<math>f</math>和<math>g</math>，组合后的函数<math>h(x) = f(g(x))</math>表示先执行<math>g</math>，再将结果传递给<math>f</math>。在JavaScript中，可以通过高阶函数实现这一模式。  

=== 数学表示 ===  
函数组合的数学定义为：  
<math>(f \circ g)(x) = f(g(x))</math>  

== 实现方式 ==  
=== 手动组合 ===  
最简单的组合方式是直接嵌套调用：  
<syntaxhighlight lang="javascript">  
const add = x => x + 2;  
const multiply = x => x * 3;  

// 手动组合  
const result = multiply(add(5)); // (5 + 2) * 3 = 21  
console.log(result); // 输出: 21  
</syntaxhighlight>  

=== 通用组合函数 ===  
可以编写一个通用的<code>compose</code>函数来自动化组合过程：  
<syntaxhighlight lang="javascript">  
const compose = (f, g) => x => f(g(x));  

const addThenMultiply = compose(multiply, add);  
console.log(addThenMultiply(5)); // 输出: 21  
</syntaxhighlight>  

=== 多函数组合 ===  
扩展<code>compose</code>以支持任意数量的函数（从右到左执行）：  
<syntaxhighlight lang="javascript">  
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);  

const square = x => x * x;  
const operations = compose(square, multiply, add);  
console.log(operations(5)); // (((5 + 2) * 3)^2) = 441  
</syntaxhighlight>  

=== 管道（从左到右组合） ===  
管道（<code>pipe</code>）是组合的变体，从左到右执行函数：  
<syntaxhighlight lang="javascript">  
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);  

const operationsPipe = pipe(add, multiply, square);  
console.log(operationsPipe(5)); // 输出: 441  
</syntaxhighlight>  

== 实际应用案例 ==  
=== 数据处理流水线 ===  
函数组合常用于数据转换流水线，例如处理用户输入：  
<syntaxhighlight lang="javascript">  
const trim = str => str.trim();  
const toLowerCase = str => str.toLowerCase();  
const splitWords = str => str.split(' ');  

const processInput = pipe(trim, toLowerCase, splitWords);  
console.log(processInput("  Hello World  ")); // 输出: ["hello", "world"]  
</syntaxhighlight>  

=== 日志记录中间件 ===  
在中间件模式中，组合函数可以增强日志功能：  
<syntaxhighlight lang="javascript">  
const withLogging = fn => (...args) => {  
    console.log(`调用函数: ${fn.name}`, args);  
    return fn(...args);  
};  

const safeDivide = withLogging((a, b) => b === 0 ? NaN : a / b);  
console.log(safeDivide(10, 2)); // 输出日志并返回5  
</syntaxhighlight>  

== 可视化流程 ==  
以下Mermaid图展示了<code>compose(add, multiply, square)</code>的执行顺序：  
<mermaid>  
graph LR  
    A[输入: 5] --> B[add]  
    B --> C[multiply]  
    C --> D[square]  
    D --> E[输出: 441]  
</mermaid>  

== 注意事项 ==  
1. **函数纯度**：组合的函数应为纯函数（无副作用，相同输入始终返回相同输出）。  
2. **参数数量**：确保函数的输入/输出匹配（例如，前一个函数的输出是下一个函数的输入）。  
3. **调试技巧**：可通过插入日志函数（如<code>tap = fn => x => { fn(x); return x; }</code>）辅助调试。  

== 高级主题 ==  
=== 结合柯里化 ===  
柯里化（Currying）可增强组合的灵活性：  
<syntaxhighlight lang="javascript">  
const curry = fn => (...args) =>  
    args.length >= fn.length ? fn(...args) : curry(fn.bind(null, ...args));  

const curriedAdd = curry((a, b) => a + b);  
const add5 = curriedAdd(5);  
const result = pipe(add5, multiply)(10)); // (10 + 5) * 3 = 45  
</syntaxhighlight>  

=== 惰性求值与组合 ===  
通过生成器或Proxy可实现惰性求值的组合链。  

== 总结 ==  
函数组合是JavaScript函数式编程的核心技术之一，能够显著提升代码的可读性和可维护性。通过将小型、专注的函数组合成复杂逻辑，开发者可以构建更模块化且易于测试的应用程序。

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript函数]]