ES5版本的compose

看下面一段代码，这段代码被称为组合 compose

const compose = function(f, g) {
  return function(x) {
    return f(g(x));
  };
 };

ES6版本的compose

由于函数式编程大行其道，所以现在将会在 JavaScript 代码看到大量的箭头()=>()=>()=>的代码。

ES6 版本 compose

const compose = (f, g) => x => f(g(x));

这段代码定义了一个名为 compose 的函数，它接受两个函数作为参数 f 和 g，并返回一个新的函数。这个返回的函数接受一个参数 x，首先将 x 应用到函数 g 上，然后将 g 的结果应用到函数 f 上。这是函数式编程中的一个常见模式，称为函数组合（Function Composition）。
函数组合允许你将多个函数组合成一个单一的函数，这样可以将复杂的操作分解成更小、更易于管理的部分。这样做的可读性远远高于嵌套一大堆的函数调用。在这个例子中，compose 函数允许你将两个函数 f 和 g 组合成一个新的函数，这个新的函数会先执行 g，然后将 g的结果作为输入传递给 f。

举个例子

假设我们有两个简单的函数：

const addOne = x => x + 1;
const double = x => x * 2;

我们可以使用 compose 函数将它们组合起来：

const compose = (f, g) => x => f(g(x));

const addOneThenDouble = compose(double, addOne);

现在，addOneThenDouble 是一个新的函数，当你传递一个值给它时，它会首先将这个值加一，然后将结果翻倍。例如：

console.log(addOneThenDouble(3)); // 输出：8

这里，3 首先被传递给 addOne 函数，得到 4，然后 4 被传递给 double 函数，得到最终结果 8。

升级版 compose

但是我们这个这个compose不够完善，只能处理两个函数参数。redux源码有个很完备的compose函数，我们借鉴一下。

function compose(...funcs){
  if (funcs.length === 0){
    // 判断有没有传入处理函数，如果没有，直接把参数返回出去
    return arg => arg
  }
  
  if (funcs.length === 1 ){
    // 如果只传入一个处理函数，那么执行传入的第一个函数
    return funcs[0]
  }
    // 如果传入多个执行函数，那么使用reduce函数依次执行
    return funcs.reduce((a,b)=>(...args) => a(b(...args)))
}

有了这个函数，我们可以随意组合无数个函数。现在我们增加需求，组合出一个addOneThenDoubleThenaAdTwo函数，内容是把传入的参数先+1，然后翻倍，最后 +2 输出结果

 const addOne = x => x + 1;
 const addTwo = x => x + 2;
 const double = x => x * 2;
 const addOneThenDoubleThenaAdTwo = compose(addTwo,double,addOne);
 console.log(addOneThenDouble(3)); // 10