首页
学习
活动
专区
圈层
工具
发布
社区首页 >专栏 >JS 当中的函数柯里化和高阶函数

JS 当中的函数柯里化和高阶函数

作者头像
小小杰啊
发布2022-12-21 21:23:04
发布2022-12-21 21:23:04
1.7K0
举报
文章被收录于专栏:Dimples开发记Dimples开发记

# JS 当中的函数柯里化和高阶函数

# 一、函数柯里化

在使用 React 的时候,有受控组件和非受控组件,在受控组件当中,通过 onChange 的事件来修改组件的状态,一般数量少表单控件可以采用一个控件一个监听函数的方式来编写,但是这种写法会让我们写大量的重复代码,所以我们应该采用函数柯里化的方式来编写

柯里化: 在计算机科学中,柯里化(Currying)是把接受多个参数的函数变换成接受一个单一参数(最初函数的第一个参数)的函数,并且返回接受余下的参数且返回结果的新函数的技术

如下一个最简单的实例,求和:

代码语言:javascript
复制
function sum(a, b, c) {
  return a + b + c;
}
sum(1, 2, 3); // 6

采用函数柯里化的方式来写的话就如下:

代码语言:javascript
复制
function sum(a) {
  return (b) => {
    return (c) => {
      return a + b + c;
    };
  };
}

sum(1)(2)(3); // 6

# 二、受控组件当中使用函数柯里化

使用方法如下面代码所示:

代码语言:javascript
复制
class Login extends React.Component {
  //初始化状态
  state = {
    username: "", //用户名
    password: "", //密码
  };

  //保存表单数据到状态中
  saveFormData = (dataType) => {
    return (event) => {
      this.setState({ [dataType]: event.target.value });
    };
  };

  //表单提交的回调
  handleSubmit = (event) => {
    event.preventDefault(); //阻止表单提交
    const { username, password } = this.state;
    alert(`你输入的用户名是:${username},你输入的密码是:${password}`);
  };
  render() {
    return (
      <form onSubmit={this.handleSubmit}>
        用户名:
        <input
          onChange={this.saveFormData("username")}
          type="text"
          name="username"
        />
        密码:
        <input
          onChange={this.saveFormData("password")}
          type="password"
          name="password"
        />
        <button>登录</button>
      </form>
    );
  }
}

# 三、高阶函数

如果一个函数符合下面 2 个规范中的任何一个,那该函数就是高阶函数。 ​ 1、若 A 函数,接收的参数是一个函数,那么 A 就可以称之为高阶函数。 ​ 2、若 A 函数,调用的返回值依然是一个函数,那么 A 就可以称之为高阶函数。 ​ 常见的高阶函数有:Promise、setTimeout、arr.map()等等

JavaScript 当中的高阶函数使用指南: 高阶函数 (opens new window)

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2020-12-27,如有侵权请联系 cloudcommunity@tencent.com 删除
目录
  • # JS 当中的函数柯里化和高阶函数
    • # 一、函数柯里化
    • # 二、受控组件当中使用函数柯里化
    • # 三、高阶函数
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档