关于javascript:js-函数组合-compose函数

函数组合

函数组合是指将多个函数按程序执行，前一个函数的返回值作为下一个函数的参数，最终返回后果。
这样做的益处是能够将简单工作宰割成多个子工作，而后通过组合函数再组合成简单工作。咱们要实现的就是这样的组合函数（compose 函数），理论就一个工具函数。

    function fn1(num) {return num + 1}
    function fn2(num) {return num + 2}
    function fn3(num) {return num + 3}
         
    // 咱们须要实现这样一个组合函数，承受参数为须要组合的子函数，最初返回组合后的函数。function compose(fn1,fn2,fn3) {return function() {// ...}
    }
    // 最终目标使 compose(fn3,fn2,fn1)(5) === fn3(fn2(fn1(5)))
    

实现一个 compose 函数

一般办法实现

function compose(...fns) {// reverse() 作用是使输出函数从右往左执行
        fns = fns.reverse()
        return function(...args) {
            let res;
            fns.forEach((fn,index) => {if(index === 0) {res = fn.apply(this, args)
                } else {res = fn(res)
                }
            })
            return res
        }
 }

reduce 实现

    // 第一个函数承受参数是一个的状况，实现办法   如 compose(fns)(1)
   function compose(...fns) {
        // reduceRight 办法使输出函数从右往左执行, 从左往右的话能够应用数组的 reduce 办法
       return function(x) {return fns.reduceRight((accumulator, currentValue) => currentValue(accumulator), x)
       }
   }
 
 
 
    // 第一个函数承受参数个数不确定的状况，如 compose(fns)(1,2,3...)，实现办法  
    // 此时须要解构出第一个函数，并传入初始参数，因为第一个函数的参数非凡
    function compose(...fns) {fns = fns.reverse()
        return function (...args) {
            // 此处用了 es6 的数组的双重解构，取出第一个函数，和剩下的函数组成的数组
            let [...[firstFn, ...restFn]] = fns
            if (!firstFn) return
            if (restFn.length === 0) {return firstFn.apply(this, args)
            } else {let initValue = firstFn.apply(this,args)
                return restFn.reduceRight((accumulator, currentValue) => currentValue(accumulator), initValue)
            }
        }
    }
    console.log(fn3(fn2(fn1(1,2))) ==== compose(fn3,fn2,fn1)(1,2))

理论利用

前端中常常提到的中间件都是函数组合的利用。

redux 中间件

待续 …

koa 中间件

待续 …

参考

https://juejin.cn/post/684490…

最初

以上纯属自己集体学习总结，如有谬误欢送斧正，交换