黔西县城市建设局网站做盗版网站吗
在 JavaScript 和 React 中，高阶函数是指能够接收其它函数作为参数，或者返回一个函数的函数。柯里化是一种将函数的多个参数转化为一系列嵌套函数的技术，通常用于简化函数的使用和提高其可组合性。
使用前：
import React,{Component} from "react";export default class Sum extends Component{// 初始化状态state = {username: '',// 账号password:'',// 密码}// 保存账号saveUsername = (event) => {const {target} = eventthis.setState({username:target.value})}// 保存密码savePassword = (event) => {const {target} = eventthis.setState({password:target.value})}// 表单提交的回调handleSubmit = (event) => {event.preventDefault() // 阻止表单提交默认行为const { username, password } = this.stateconsole.log(username,password);}render() {return (<div> <form onSubmit={this.handleSubmit}>账号：<input onChange={this.saveUsername} type="text" name="username" />密码：<input onChange={this.savePassword} type="password" name="password" /><button>登录</button></form></div>)}
}
高阶函数写法：
高阶函数：若一个函数符合下面 2 个规范中的任何一个，那该函数就是高阶函数。
- 若 A 函数，接收的参数是一个函数，那么 A 就可以称之为高阶函数；
- 若 A 函数，调用的返回值依然是一个函数，那么 A 就可以称之为高阶函数。
常见的高阶函数有：Promise，setTimeout，arr.map()等
import React,{Component} from "react";export default class Sum extends Component{// 初始化状态state = {username: '',// 账号password:'',// 密码}// 保存账号 密码 到状态中saveFormData = (dataType) => {return (event) => {this.setState({[dataType]:event.target.value})console.log(dataType,event.target.value);}}// 表单提交的回调handleSubmit = (event) => {event.preventDefault() // 阻止表单提交默认行为const { username, password } = this.stateconsole.log(username,password);}render() {return (<div> <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></div>)}
}
函数柯里化：
函数的柯里化：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。
补充：方括号语法 [ ]
在 JavaScript 中，方括号语法 [] 用于动态地访问或设置对象属性的值。这种语法允许使用变量或表达式作为属性名，而不是只使用静态字符串。这在处理动态属性名时尤其有用。
1. 变量作为属性名
当知道属性名在运行时是动态变化的（例如在循环中、条件判断中或处理用户输入时），可以将变量作为属性名来访问或修改对象的属性。
const fieldName = 'username';
const user = {username: 'john_doe',password: '123456'
};// 使用方括号语法动态访问
console.log(user[fieldName]); // 输出: john_doe
2. 使用表达式
方括号语法允许使用表达式来计算属性名。例如，可以根据某些条件来决定要访问的属性。
const prefix = 'user_';
const user = {user_name: 'john_doe',user_age: 30
};// 使用表达式
console.log(user[prefix + 'name']); // 输出: john_doe
console.log(user[prefix + 'age']); // 输出: 30
3. 在对象字面量中动态创建属性名
在对象字面量中，也可以使用方括号语法来动态地为对象创建属性名。这使得可以在对象初始化时动态设置属性。
const key = 'xx';
const value = 'blue';// 使用方括号语法来创建带有动态键名的对象
const obj = {[key]: value
};console.log(obj.xx); // 输出: blue
4. 在 React 中状态管理
在 React 中，在更新 state 时，使用方括号语法来动态设置键名是非常常见的，特别是在根据输入框等动态生成的字段名来更新状态时。
this.setState({ [dataType]: event.target.value });
在这个例子中，dataType 可能是 'username' 或 'password'，使用方括号语法允许灵活地根据不同键名更新状态，而不需要写多个 setState 调用。
总结
使用方括号语法 [] 的主要原因是能够使用变量或表达式动态访问或设置对象的属性。它使得代码更加灵活和可读，能够处理许多情况，例如动态状态管理、条件逻辑和其他基于用户输入的场景。