多参数场景下compose函数的工作机制及改进版参数解包疑问

核心疑问解答 #

你提到的「func(x, [y])」是误解，改进版的实现并没有把数组作为第二个参数传入目标函数，而是用到了ES6的**展开运算符（Spread Operator）**完成了数组解包，整个逻辑完全符合JS语法规则。

我们以你给出的改进版代码为例拆解执行流程：

const compose = (fns) => (arg, ...restArgs) => fns.reduceRight((acc, func) => func(acc, ...restArgs), arg);

步骤1：接收调用参数 #

当你调用最终生成的函数，比如fn("3", 1)时：

• 第一个位置参数"3"会赋值给arg变量
• 剩余所有位置参数1会被...restArgs剩余参数语法收集为数组[1]

步骤2：第一次迭代参数传递逻辑 #

reduceRight会从函数数组的末尾开始遍历，你示例中的函数数组最后一项就是多参数函数(x, y) => (y > 0 ? x + 3 : x - 3)：

• reduceRight的初始值是第一步拿到的arg也就是"3"，赋值给迭代变量acc
• 调用func(acc, ...restArgs)时，...restArgs会把数组[1]展开为独立的位置参数，所以实际调用等价于func("3", 1)，完美匹配多参数函数的入参要求，返回结果为字符串"33"

步骤3：后续迭代的兼容性说明 #

数组中剩余的函数都是单参数函数，JS本身允许函数调用时传入超过形参数量的参数，额外参数会被自动忽略，不会影响运行：

• 第二次迭代调用平方函数(x) => x ** 2，实际传入参数为func("33", 1)，第二个参数1被直接忽略，x取值为33，计算结果为1089
• 最后迭代调用减8函数，同样忽略多余参数，得到1089 - 8 = 1081，和示例输出完全一致

两个版本的差异对比 #

你最初的实现是每次把函数返回值包裹成数组，下一次迭代再展开，本质上也能运行，但存在两个明显问题：

• 每次迭代都要创建新数组、解构数组，存在不必要的性能开销
• 写法相对晦涩，可读性更差

导师的改进版直接利用剩余参数+展开运算符的特性，规避了不必要的数组操作，逻辑更简洁高效。

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