js使用reduce实现组合函数

题目描述

/**
 * 函数组合运行
 * 说明：实现一个方法，可将多个函数方法按从左到右的方式组合运行。
 *   如`composeFunctions(fn1,fn2,fn3,fn4)`等价于`fn4(fn3(fn2(fn1))`。
 * 示例：
 *  const add = x => x + 1;
 *  const multiply = (x, y) => x * y;
 *  const multiplyAdd = composeFunctions(multiply, add);
 *  multiplyAdd(3, 4) // 返回 13
 */

分析

由于ES6给数组新增了reduce方法，所以该功能实现起来比较方便。reduce函数接收两个参数：迭代函数（该函数有四个参数）和迭代的初始值（可选）。于是我们写出如下的代码：

function composeFunctions(...fns) {
    return function (arg) {
        return fns.reduce((args, fun) => fun(args), arg)
    }
}

但是这种写法有一个问题，就是迭代的第一个函数只能接受一个参数。聪明的你可能想到了扩展运算符，但是你会发现简单的在arg参数前面加…之后并不会得到我们预期的结果。解决方案如下：
通过参数解构赋值的方式把第一个迭代的函数改造为单参数的形式：const multiply = ([x, y]) => x * y;
通过数组把参数包裹起来，实现单参数，然后在接收的地方使用扩展运算符将其展开就可以了。

代码展示

const add = x => x + 1;
const multiply = ([x, y]) => x * y;  // 将第一个迭代的函数改造成单参数（数组参数）

function composeFunctions(...fns) {
    return function (...arg) {  // 在此处对参数进行解构
        return fns.reduce((args, fun) => fun(args), arg)
    }
}

const multiplyAdd = composeFunctions(multiply, add);
console.log(multiplyAdd(3, 4));  // 13

写在后面

这种组合的编程思想是很有用的，将一个个单一职责的函数组合起来实现不同的需求，可以最大限度的实现函数的复用。而且这种复用在很多情况下要比继承好得多。