构建 pipe 和 compose
实现从左到右和从右到左的函数组合。
构建 pipe 和 compose 是 CoddyKit 上的免费 JavaScript Academy 课时。 这是第 4 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 JavaScript Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 JavaScript Academy 课程共包含 4 节课。
从两个函数到多个函数
只能接收两个参数的 compose 存在局限。实际的管道会串联许多步骤。在本课中，您将使用 reduce 和 reduceRight 构建通用的 compose 与 pipe。
pipe：从左到右
pipe 按执行顺序阅读：第一个函数先运行。pipe(a, b, c)(x) 等于 c(b(a(x)))。大多数人觉得这比 compose 更自然。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const inc = n => n + 1;
const double = n => n * 2;
console.log(pipe(inc, double)(5));reduce 如何驱动 pipe
reduce 以输入值作为累加器，然后依次应用每个函数，将每次的结果传给下一个函数。初始值 x 为这条链提供起点。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const steps = pipe(
n => n + 1,
n => n * 3,
n => n - 2
);
console.log(steps(4));使用 reduceRight 实现 compose
compose 是反向的 pipe。使用 reduceRight 会从末尾开始遍历函数列表，因此最右侧的函数先运行，这与 f(g(x)) 一致。
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const inc = n => n + 1;
const double = n => n * 2;
console.log(compose(inc, double)(5));pipe 与 compose 互为镜像
同一个函数列表在 pipe 和 compose 中会产生不同结果，因为执行方向相反。请根据您希望如何阅读这些步骤来选择。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => x => fns.reduceRight((acc, fn) => fn(acc), x);
const inc = n => n + 1;
const square = n => n * n;
console.log(pipe(inc, square)(3));
console.log(compose(inc, square)(3));作为反向 pipe 的 compose
您可以通过反转函数列表，使用 pipe 来定义 compose。这体现了两者之间紧密的关系。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const compose = (...fns) => pipe(...fns.reverse());
const inc = n => n + 1;
const double = n => n * 2;
console.log(compose(inc, double)(5));实际的文本管道
使用 pipe 和一组小型字符串函数构建一个短标识生成器。每一步只负责一项工作，并且易于单独测试。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const slugify = pipe(
s => s.trim(),
s => s.toLowerCase(),
s => s.replace(/\s+/g, '-')
);
console.log(slugify(' Hello World Example '));组合数组操作
管道可以处理任何数据类型，包括数组。将过滤和映射组合成一个命名转换。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const process = pipe(
arr => arr.filter(n => n % 2 === 0),
arr => arr.map(n => n * 10)
);
console.log(process([1, 2, 3, 4, 5, 6]));identity 特殊情况
不传入任何函数调用 pipe() 时，会原样返回输入值，因为 reduce 只会返回初始值。这种 identity（恒等）行为让这些辅助函数在没有任何步骤时也能安全调用。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const identity = pipe();
console.log(identity(42));
console.log(identity('unchanged'));结合柯里化
经过柯里化或部分应用的函数可以直接插入管道。每个函数都会成为一个清晰的单参数步骤。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const add = a => b => a + b;
const times = a => b => a * b;
const calc = pipe(add(3), times(2), add(-1));
console.log(calc(5));选择 pipe 还是 compose
如果您希望步骤按照执行顺序从上到下阅读，请使用 pipe。如果您希望匹配数学记号 f(g(x))，请使用 compose。两者都是单行的 reduce 封装，在函数式库中都非常常见。
const pipe = (...fns) => x => fns.reduce((acc, fn) => fn(acc), x);
const normalize = pipe(
s => s.trim(),
s => s.replace(/[^a-z0-9]+/gi, ' '),
s => s.toUpperCase()
);
console.log(normalize(' a-b_c!d '));快速检查
哪种数组方法可以让 compose 按从右向左的顺序运行函数？
回顾：pipe 与 compose
您已经构建了通用的函数组合辅助函数：
- pipe 使用
reduce按从左到右的顺序执行。 - compose 使用
reduceRight按从右到左的顺序执行。 compose可以定义为使用反转列表的pipe。- 空管道表现为 identity（恒等），柯里化步骤也可以清晰地插入其中。
常见问题解答
「构建 pipe 和 compose」课时是免费的吗？
是的 — 「构建 pipe 和 compose」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 JavaScript Academy 课程的其余内容，请升级到 CoddyKit PRO。 JavaScript Academy 课程共包含 4 节课。
「构建 pipe 和 compose」这节课中我会学到什么？
实现从左到右和从右到左的函数组合。 你通过在浏览器中直接运行的动手代码来练习 JavaScript Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 JavaScript Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 JavaScript Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 4 节课，共 4 节。
「构建 pipe 和 compose」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 JavaScript Academy 课中编写并运行代码吗？
能。每节 JavaScript Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。