js高级编程技巧之——compose函数

在函数式编程当中有一个很重要的概念就是函数组合， 实际上就是把处理数据的函数像管道一样连接起来， 然后让数据穿过管道得到最终的结果。

例1：
const add1 = (x) => x + 1;
const mul3 = (x) => x * 3;
const div2 = (x) => x / 2;
div2(mul3(add1(add1(0)))); //=>3

而这样的写法可读性明显太差了，我们可以构建一个compose函数，它接受任意多个函数作为参数（这些函数都只接受一个参数），然后compose返回的也是一个函数，达到以下的效果：

const operate = compose(div2, mul3, add1, add1)
operate(0) //=>相当于div2(mul3(add1(add1(0)))) 
operate(2) //=>相当于div2(mul3(add1(add1(2))))

简而言之：compose可以把类似于f(g(h(x)))这种写法简化成compose(f, g, h)(x)

这里还用到了一个数组的reduce方法

let arr = [10, 20, 30, 40]; 
result = arr.reduce((N, item) => {
    // 第一次：10 20
    // 第二次：30 30
    // 第三次: 60 40
    // ...
    // reduce只传递一个回调函数，那么N第一次默认是第一项，后续的N是上一次函数执行的处理结果
    console.log(N, item);
    return N + item;
});
console.log(result); 

result = arr.reduce((N, item) => {
    console.log(N, item);
    return N + item;
}, 0); //=>REDUCE的第二个参数就是给N赋值的初始值 ITEM从数组第一项开始遍历
console.log(result); 

那对于我们这个函数编写就可以用这个方式

function compose(...funcs) {
    // funcs接收的就是所有传递进来的函数
    return function anonymous(val) {
        // val第一个函数执行时候需要的实参  0
        if (funcs.length === 0) return val;
        if (funcs.length === 1) return funcs[0](val);
        // return funcs.reverse().reduce((N, item) => {
        //两种方式
        //1.  
        return typeof N === "function" ? item(N(val)) : item(N);
        });
        
        //2.
        return funcs.reverse().reduce((N, item) => {
            return item(N);
        }, val);
    }
}
let result = compose(div2, mul3, add1)(5);
console.log(result);

在redux源码中有这样一种写法

function compose(...funcs) {
    if (funcs.length === 0) {
        return arg => arg
    }
 
    if (funcs.length === 1) {
        return funcs[0]
    }
 
    return funcs.reduce((a, b) => (...args) => a(b(...args)))
}