美文网首页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高级组件

    柯里化 Currying 让所有函数只接受一个参数【单一参数】 单一参数有什么意义 那么怎么支持两个参数 用对象...

  • React基础篇之高阶函数&函数柯里化

    高阶函数 函数柯里化

  • 利用 React 高阶组件实现一个面包屑导航

    什么是 React 高阶组件 React 高阶组件就是以高阶函数的方式包裹需要修饰的 React 组件,并返回处理...

  • React 进阶之高阶组件

    高阶组件 HOC 高阶组件(HOC)是react中的高级技术,用来重用组件逻辑。但高阶组件本身并不是React A...

  • react 笔记

    react 基本概念解析 react 的组件声明周期 react 高阶组件,context, redux 等高级...

  • 初学函数式编程

    高阶函数(Higher-Order Function):高阶函数就是把函数作为参数的函数。 柯里化(Curryin...

  • React高阶组件HOC

    高阶组件本质是函数,参数是 组件1 返回组件2,高阶组件是为了复用通用逻辑高阶组件eg:import React,...

  • javascript-柯里化2018-08-08

    柯里化 / 高阶函数 柯里化:将 f(x,y) 变成 f(x=1)(y) 或 f(y=1)x 重点!!!柯里化可以...

  • JS函数柯里化

    在正式聊函数柯里化之前,我这里给大家补充下高阶函数的概念和应用: 1.1、什么是高阶函数?高阶函数英文叫 High...

  • React 高阶组件

    高阶组件(HOC)是React中用于复用组件逻辑的高级技巧。输入是组件,输出新的组件的过程就是高阶组件。巴拉巴拉 ...

网友评论

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

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