前端进阶之认识与手写compose方法

前端开发作者： 2024-08-20 13:45:01

前言：为什么要学习这个方法遇到这个方法主要是最近在阅读redux，koa 原理等多次遇到这个方法，为了更好地理解框架原理，于是深入学习了一下compose的实现。然后也发现这属于函数式编程的东西

前言：为什么要学习这个方法
compose简介
compose的实现
参考文章
最后

let tasks = [step1,step2,step3,step4]

第一个函数是多元的（接受多个参数），后面的函数都是单元的（接受一个参数）
执行顺序的自右向左的
所有函数的执行都是同步的

let init = (...args) => args.reduce((ele1,ele2) => ele1 + ele2,0)
let step2 = (val) => val + 2
let step3 = (val) => val + 3
let step4 = (val) => val + 4

steps = [step4,init]

let composeFunc = compose(...steps)

console.log(composeFunc(1,2,3))

6 -> 6 + 2 = 8 -> 8 + 3 = 11 -> 11 + 4 = 15

最容易理解的实现方式

const compose = function(...funcs) {
  let length = funcs.length
  let count = length - 1
  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)
  }
}

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)
  }
}

 function aa() {
    console.log(11);
}

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

compose(aa,bb,cc)

result = funcs[count]()

result = funcs[count]()

手写javascript中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
    }

 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

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);
}

aa(bb(cc()))

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

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

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

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

原创声明

本站部分文章基于互联网的整理，我们会把真正“有用/优质”的文章整理提供给各位开发者。本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

本文链接：http://www.jiecseo.com/news/show_65543.html

相关资讯：前端进阶之认识与手写compose方法

前端进阶之认识与手写compose方法

最容易理解的实现方式

手写javascript中reduce方法

redux中compose的实现

猜你喜欢

相关新闻

推荐模板

推荐精华

热门标签