高阶函数第一讲-compose

首先看这个高阶函数

const compose = (...fns) =>(arg) => fns.reduce(
    (composed, f) => f(composed),
    arg
)

书中解释

函数compose接受函数作为参数，并且会返回一个独立的函数。在上述代码中，扩展运算符主要用于将这些函数参数添加到名为fns的数组中。随后将会返回可以接受一个参数的函数，及arg。当该函数被调用时，数组fns将会作为在函数之间传递数据的起始管道。这些参数会作为composed的初始值，然后它会累计reduce回调函数的返回值。注意，回调函数会接受两个参数：（一个composed，另一个是代表函数的f），每个函数被调用后的结果累积就是上一函数的输出结果）总之，最后一个函数被调用并返回了结果。

看的我是云里雾里，没辙我把这段代码敲了两遍，然后把这段中文解释也手动打了一遍。最终，得出一个结论，这个高阶函数牛逼啊。但是让我说清楚点，我还是解释不清楚，大家有什么好的想法。

reduce()方法详解

arr.reduce(callback,[initialValue])

-[1] callback （执行数组中每个值的函数，包含四个参数):
	-[1.1] previousValue （上一次调用回调返回的值，或者是提供的初始值（initialValue））
	-[1.2] currentValue （数组中当前被处理的元素）
	-[1.3] index （当前元素在数组中的索引）
	-[1.4] array （调用 reduce 的数组）
-[2] initialValue （作为第一次调用 callback 的第一个参数。）

然后我们再看compose这个高阶函数：是不是稍微清晰了一点。

fns.reduce((composed, f) => f(composed),arg)
fns是一个数组，（composed,f）=>f(composed)就是callback ，两个参数代表，composed是arg，也就是上一次调用返回的值，就是初始值。f就是数组中的元素就是fns中的当前执行的函数，=>f(composed)就是当前返回的结果。
然后作为下一次执行的composed，继续往下执行，指导fns执行结束。返回结果；

转化为JS代码

那么，你需要把他转化为JavaScript代码来具体瞧瞧。你是不是觉得老费劲了，一堆return；其实没有那么麻烦，这可是前端啊！
TS你需要了解下了。在ES6漫天下的代码里，你要一时半会看懂很复杂的代码，简直了！
我们先看看转化之后的JS代码

var compose = function () {
    var fns = [];
    for (var _i = 0; _i < arguments.length; _i++) {
        fns[_i] = arguments[_i];
    }
    return function (arg) { 
        return fns.reduce(function (composed, f) {
            return f(composed); 
        }, arg); 
    };
};

有没有豁然开朗的感觉。应该差不多了吧，就是return挺多。
慢慢理顺就ok了！- 再回头看高阶函数是不是……偷着乐会！

欢迎留言参与讨论

我将随时更新关于这个牛逼高阶函数的理解