美文网首页React
柯里化 _ 高阶函数_React高级组件

柯里化 _ 高阶函数_React高级组件

作者: YQY_苑 | 来源:发表于2019-08-18 20:53 被阅读0次

    柯里化 Currying

    让所有函数只接受一个参数【单一参数】

    单一参数有什么意义

    那么怎么支持两个参数

    用对象接收? 并不是,使用闭包

    单参数函数接收两个参数

    // 用对象形式
    const add = ({a,b} => a+b )
    add({a:1,b:2})
    
    //
    const add => a => b => c => a+b+c
    add(1)(2)(3)
    
    

    题目

    addTwo 接受两个参数,
    addThree 接受三个参数,
    addFore 接受四个参数,
    请写出一个 currify 函数,使得它们分别接受 2、3、4 次参数,比如

    currify(addTwo)(1)(2) // 3
    currify(addThree)(1)(2)(3) // 6
    currify(addFore)(1)(2)(3)(4) // 10

    也就是说,currify 能将任意接受固定个参数的函数,变成单一参数的函数

    currify = (fn, params = [])=>
          (...args) =>
          params.length+args.length === fn.length 
          ?  fn(...params, ...args)
          : currify(fn, [...params, ...args])
    
    
    addTwo = (a,b)=>a+b
    addThree = (a,b,c)=>a+b+c
    newAddTwo = currify(addTwo)
    newAddThree = currify(addThree)
    newAddTwo(1)(2)
    newAddThree(1)(2)(3)
    

    高阶函数

    把函数作为参数或者返回值的函数

    image.png

    JS内置的高阶函数

    Function.prototype.bind

    bind.call 接收一个函数 fn. this, 其他参数
    返回一个一个新函数,会调用fn,并传入this和其他参数

    image.png

    以下为接收函数作为参数

    Function.prototype.apply

    image.png

    Function.prototype.call

    image.png

    以下为接收函数作为参数

    Function.prototype.sort

    var arr = [1,5,2,4,3]
    array.sort( (a,b) => a-b )  //  [1,2,3,4,5]  
    // 进行排序,a-b>0 放后面
    
    arr.sort( (a,b) => b-a )
    sort.call(array, (a,b) => b-a ) 
    

    Function.prototype.map

    Function.prototype.filter

    Function.prototype.reduce

    image.png

    函数的组合

    除了第一个参数的函数之外,其他的函数只能接收一个参数

    image.png

    pipe操作

    image.png

    React高级组件

    接收组件的组件,或者返回组件的组件称之为高级组件

    image.png

    相关文章

      网友评论

        本文标题:柯里化 _ 高阶函数_React高级组件

        本文链接:https://www.haomeiwen.com/subject/dpirsctx.html