compose

compose是函数式编程中使用较多的一种写法, 它把逻辑解耦在各个函数中,通过compose的方式组合函数, 将外部数据依次通过各个函数的加工,生成结果。
最简单例子

f(x) = (5 + x) ^3
这个运算有两个操作，先做加法运算，再做幂运算

function power(x) {
  return Math.pow(x, 10)
}
function add(x) {
  return x + 5
}
function compose(fn1, fn2) {
    return function(x) {
      return fn1(fn2(x))
   }
}
// 可简写成
const compose = (fn1, fn2) => x => fn1(fn2(x))
compose(power,  add)(5)  // 1000

这是两个函数compose的实现方式
如果有N个函数呢，难道每次要写成

const compose = (fn1, ..., fnn) => x => fn1(...(fnn(x)))

如果N是100呢？
我们仔细思考一下，把N个输入收敛成一个结果，是不是很像js的某个API？就是Array.prototype.reduce方法

这个方法会对数组中的每个元素执行一个由你提供的reducer函数(升序执行)，将其结果汇总为单个返回值。

那么给定一个[fn1, fn2, ..., fnn]的数组funcs，如何实现函数组合的形式呢？
根据reduce的定义，似乎只要实现reducer方法就行

const reducer =  (accumulator, currentvalue) => {
    return (x) => {
        accumulator(currentvalue(x))
    }
}
// 简写
const reducer = (acc, cur) =>  x => acc(cur(x))
const compose = func.reduce(reducer)

让我们做一个验证

callback	accumulator	currentvalue	返回值
round1	fn1	fn2	x => fn1(fn2(x))
round2	x => fn1(fn2(x))	fn3	x =>((x) => fn1(fn2(x)))(fn3(x))

因为reduce函数没有初始值，所以第一轮accumular将会是fn1, currrentvalue将会是fn2(见MDN中有无初始值时reduce的行为)。在第二轮中，累计值accumulator将会变成上一轮的返回值，执行reducer回调之后，会生成x =>((x) => fn1(fn2(x)))(fn3(x))。
这时候令我们费解的是，如果只有funcs = [fn1, fn2, fn3]，这时候实际上reduce已经结束执行了，它的返回值怎么一点也不像我们期待的x => fn1(fn2(fn3(x))) 这种形式？
实际上表格中第二轮返回值里加粗部分是一个立即执行函数，而fn3(x)则是这个函数的参数，代入之后即可得x => fn1(fn2(fn3(x)))
完整的表格应该是

callback	accumulator	currentvalue	返回值
round1	fn1	fn2	x => fn1(fn2(x))
round2	x => fn1(fn2(x))	fn3	x => fn1(fn2(fn3(x)))
round3	x => fn1(fn2(fn3(x)))	fn4	x => fn1(fn2(fn3(fn4(x))))
...
round n	x=> fn1(fn2(...fn(n-1)(x)))	fnn	x=> fn1(fn2(...fnn(x)))

这个方法就是redux 中间件中实现多个函数组合的方式，
非常的简洁优美, 然而了损失一定的可读性，需要积累一些函数式编程的基础才能快速参透。