compose的实现

先说作用

• compose的作用就是组合函数，将函数串联起来执行，前一个函数的输出值是后一个函数的输入值

看个简单例子比较容易理解

有三个函数，分别将输入的x进行一些简单的运算，可以看到最后想得到结果要进行多层函数的嵌套，看起来不美观，可读性比较差

function fn1(x){
    return x + 1
}

function fn2(x){
    return x * 10
}

function fn3(x){
    return x - 1
}

let x = 10
let result = fn3(fn2(fn1(x))) // 109

假如有这么一个函数：

let fn = compose(fn3, fn2, fn1)
let result = fn(x)

这个compose就是我们要实现的函数

实现起来主要有两种方法：

递归

可以看出其实就是将传入compose的函数逐个执行一次，并且参数也要逐层传递下去,最后返回一个函数

function compose(...fns) {
    let len = fns.length
    let res = null
    return function fn(...arg) {
        res = fns[len - 1].apply(null, arg) // 每次函数运行的结果
        if(len > 1) {
            len --
            return fn.call(null, res) // 将结果递归传给下一个函数
        } else {
            return res //返回结果
        }
    }
}

去控制台测试一下，没问题

reduce实现

由前一个函数的输入结果传给后一个函数这句话应该会想到一个数组的方法非常适用——reduce

reduce不熟悉的同学可以去mdn看看

直接看代码

function compose(...fns) {
    return function(...arg){
        return fns.reduce((acc, cur) => {
            // 第一次acc是函数，之后是结果，所以要加个判断
            return typeof acc === 'function' ? cur(acc(...arg)) : cur(acc)
        })
    }
}
//使用箭头函数优化

const compose = (...fns) => (...args) => fns.reduce((acc, cur) => typeof acc === 'function' ? cur(acc(...args)) : cur(acc))

注意一点： 使用递归函数是从右往左执行的，使用reduce是从左往右执行的

compose(fn3, fn2, fn1)
//递归执行顺序fn1,fn2,fn3
//reduce执行顺序fn3,fn2,fn1

当然你要是觉得有点强迫症也可以自己去改造下~，这里就不展开了。

完事~~