手写Compose方法的有哪些

本文主要讲解“手工作曲的方法有哪些”。感兴趣的朋友不妨看看。本文介绍的方法简单、快速、实用。让边肖带你学习“手写作曲有哪些方法”！

前言：为什么要学习这个方法

作曲简介

撰写的实现。

最简单的理解方式。

javascript中的约简方法。

redux中合成的实现。

参考文章

前言：为什么要学习这个方法

这种方法主要是最近在阅读redux和koa原理时多次遇到的。为了更好地理解框架原理，我深入研究了compose的实现。

然后还发现这属于函数式编程，是推进前端的必经之路，因为纯函数的概念在redux的reducer中也展现得淋漓尽致，保留函数计算结果的思想在vue、react等很多其他框架中也有。

所以建议有时间看看函数的试编程。

接下来，让我们学习作曲功能！

compose简介

Compose是执行一系列任务(功能)，例如拥有以下任务队列。

让tasks=[第1步，第2步，第3步，第4步]每一步都是一个步骤，一步一步执行到最后，就是一个缀。

Compose是函数式编程中一个非常重要的工具函数，这里实现的compose有三种解释。

第一个函数是多元的(接受多个参数)，下面的函数是一元的(接受一个参数)。

按执行顺序从右向左。

所有功能的执行是同步的。

我们再举一个例子，比如有以下功能。

函数让init=(.args)=args.reduce ((ele1，ele2)=ele1e2，0)让step 2=(val)=val 2 let step 3=(val)=val 3 llet step 4=(val)=val 4组成任务队列。

Steps=[step4，step3，step2，init]使用compose来组装这个队列并执行它。

让compose unc=compose(.steps)console . log(compose func(1，2，3))执行过程。

6-6 2=8-8 3=11-11 4=15，所以流程从init开始从右到左执行，下一个任务的参数是前一个任务的返回结果，任务全部同步，这样任务就可以有条不紊的方向，有条不紊的时间执行。

compose的实现

好了，现在我们知道什么是作曲了，现在让我们来认识一下吧！

最容易理解的实现方式

其思想是用递归的过程思想，不断检查队列中是否有任务，如果有任务，就执行，并将执行结果传递回去。这是一种局部思维，无法预测任务何时结束。直观最容易理解。

constcompose=function(.funcs){ letlength=funcs . lengthlettcount=length-1n

bsp; let result   return function f1 (...arg1) {     result = funcs[count].apply(this, arg1)     if (count <= 0) {       count = length - 1       return result     }     count--     return f1.call(null, result)   } }

删繁就简来看下，去掉args1参数

const compose = function(...funcs) {   let length = funcs.length   let count = length - 1   let result   return function f1 () {     result = funcs[count]()     if (count <= 0) {       count = length - 1       return result     }     count--     return f1(result)   } }

这就好看很多，我们假设有三个方法，aa，bb，cc

 function aa() {     console.log(11); }  function bb() {     console.log(22); } function cc() {     console.log(33);     return 33 }

然后传入compose

compose(aa,bb,cc)

此时count = 2，则下面其实是执行cc

result = funcs[count]()

然后count--。再递归执行f1，则下面其实就是执行bb

result = funcs[count]()

这样，就实现了 从funcs数组里从右往左依次拿方法出来调用，再把返回值传递给下一个。

后面的步骤同理。

这其实是一种面向过程的思想

手写javascript中reduce方法

为什么要手写?其实你要是能够很熟练的使用reduce，我觉得不必手写reduce，只是我觉得熟悉一下reduce内部的实现可以更好地理解后面的内容，况且  也不会太难呀!

function reduce(arr, cb, initialValue){        var num = initValue == undefined? num = arr[0]: initValue;        var i = initValue == undefined? 1: 0        for (i; i< arr.length; i++){            num = cb(num,arr[i],i)        }'        return num    }

如代码所示，就是先判断有没有传入初始值，有的话，下面的循环直接 从i = 0开始，否则i=1开始。

如果没有传入初始值，num就取 数组的第一个元素。这也是说明了为什么传入初始值，i就=1，因为第一个都被取出来了，就不能再取一次啦啦啦!

下面使用我们写的reduce方法

function fn(result, currentValue, index){        return result + currentValue    }        var arr = [2,3,4,5]    var b = reduce(arr, fn,10)     var c = reduce(arr, fn)    console.log(b)   // 24

好了 ，没毛病，既然我们了解了reduce原理，就看看下面的redux中compose的实现吧

redux中compose的实现

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

很简短，非常的巧妙，但是不是很不好理解。不过没关系。

依旧通过例子来讲解。

function aa() {     console.log(11); }  function bb() {     console.log(22); } function cc() {     console.log(33); }

假设只有这三个方法，我们怎样才能先执行cc再执行bb，再执行aa呢?没错，可以直接写

aa(bb(cc()))

就是这样，非常巧妙，不仅完成了执行顺序，还实现了前一个方法执行返回的结果传递给了下一个即将要执行的方法。

而下面这段代码所做的就是将funcs数组[aa,bb,cc]，转化成aa(bb(cc()))

funcs.reduce((a, b) => (...args) => a(b(...args)))

怎么办到的?

看看下面的解释：

reduce内部第一次执行返回的结果是 一个方法

(...args) => aa(bb(...args))

我们现在把这个方法简化成dd，即

dd = (...args) => aa(bb(...args))

reduce内部第二次执行的时候，此时的a 是 上一次返回的dd方法，b是cc

所以执行结果是

(...args) => dd(cc(...args))

而dd(cc(...args))不就是先执行cc再执行dd吗?而dd就是执行bb再执行aa。

我的天，!这不是俄罗斯套娃吗!没错 redux中的compose的实现原理就是套娃哈哈哈!

到此，相信大家对“手写Compose方法的有哪些”有了更深的了解，不妨来实际操作一番吧！这里是网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！