详解基于reduce实现的JavaScript pipe函数代码及初始值疑问

1. 基础工具函数 #

先看最开头的三个简单函数：

const double = (x) => 2 * x;
const triple = (x) => 3 * x;
const quadruple = (x) => 4 * x;

这三个都是单参数运算函数，分别返回输入值的2倍、3倍、4倍，属于用来组合的基础“运算积木”。

2. 核心pipe函数解析 #

重点看实现管道功能的pipe函数：

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

拆解细节：

• ...functions是剩余参数语法，会把pipe调用时传入的所有函数参数打包成一个数组，比如pipe(double, triple)里，functions就是[double, triple]。
• pipe是个高阶函数，它返回一个新函数，这个新函数需要接收一个initialValue（初始值）。
• 新函数内部调用functions.reduce(...)，这里的reduce是数组方法，作用是按顺序遍历函数数组，把每个函数依次作用在结果上：
  • reduce的第二个参数initialValue就是遍历的起始值，也就是第一次执行回调时acc（累加器）的初始值。
  • 回调函数(acc, fn) => fn(acc)逻辑很直白：把当前累加器的值acc传给当前遍历到的函数fn执行，执行结果作为下一次遍历的acc。

举个实际运行例子：调用multiply6(6)时，functions是[double, triple]，initialValue是6：

1. 第一次遍历：acc为6，fn是double，执行double(6)得到12，作为下一次的acc。
2. 第二次遍历：acc为12，fn是triple，执行triple(12)得到36，遍历结束，返回36。

3. 组合函数的实际作用 #

再看这些组合出来的函数：

const multiply6 = pipe(double, triple);
const multiply9 = pipe(triple, triple);
const multiply16 = pipe(quadruple, quadruple);
const multiply24 = pipe(double, triple, quadruple);

• multiply6：输入值先乘2再乘3，等价于x => triple(double(x))，也就是x => 6*x。
• multiply9：输入值乘3再乘3，等价于x => 9*x。
• multiply16：输入值乘4再乘4，等价于x => 16*x。
• multiply24：输入值依次乘2、乘3、乘4，等价于x => 2*3*4*x = 24*x。

所以实际调用时的结果完全符合预期：

• multiply6(6) → 6*6=36
• multiply9(9) →9*9=81
• multiply16(16)→16*16=256
• multiply24(10)→10*24=240

4. 初始值的获取逻辑 #

关于初始值的获取，逻辑很直接：

• pipe返回的新函数，它的参数initialValue就是最终传给reduce的初始值。
• 当你调用组合后的函数（比如multiply6(6)）时，传入的6就是这个initialValue，它会直接作为reduce遍历的起始累加器值，然后依次被管道里的每个函数处理。

简单说，初始值就是你调用组合函数时传入的那个参数，它通过pipe返回的函数传递给了reduce的第二个参数。

内容的提问来源于stack exchange，提问作者prakash pappu