什么是高阶函数？
高阶函数：对其他函数进行操作的函数，可以将它们作为参数传递，或者是返回一个函数。如果一个函数符合下面两个规范中的任何一个，那该函数就是高阶函数。
1、若A函数，接收的参数是一个函数，那么A就可以称之为高阶函数。
2、若A函数，调用的返回值依然是一个函数，那么A就可以称之为高阶函数。
示例一：
function test1(back) {
console.log("我接收到的参数back是一个函数");
back() //调用参数函数
}
function callback() {
console.log("我是函数callback");
}
test1(callback)
示例二：
function test2() {
return function back() {
console.log("我是返回值，我是个函数！");
}
}
test2()()
常见的高阶函数
Array.prototype.reduce
reduce() 方法对数组中的每个元素执行一个由您提供的reducer函数(升序执行)，将其结果汇总为单个返回值。
接收参数： arr.reduce(callback[, initialValue])
arr.reduce(function(accumulator, currentValue, currentIndex, array), initialValue)
reduce方法接收1个callback的函数作为第一个参数，还有1个可选参数initialValue。
同时callback函数有最多4个参数。
accumulator累加器累加回调的返回值;它是在最后一次调用回调时返回的累计值。如果提供了initialValue，它的默认值就是initialValue，否则就是数组的第一个值。currentValue当前参与计算的元素。currentIndex(可选)当前参与计算的元素的数组下标。array(可选)当前参与运算的数组。initialValue(可选)累加器的初始值。没有时 累加器第一次的值为 currentValue
注意: 在对没有设置初始值的空数组调用 reduce 方法时会报错。
示例：
// arr.reduce(function (accumulator, currentValue, currentIndex, array) {
// return accumulator + currentValue
// }, initialValue)
let arr = [1, 2, 3, 4, 5, 6, 7]
let sum = arr.reduce(function (a, b) {
return a + b
}, 10)
console.log(sum);
Array.prototype.filter
filter() 方法创建一个新数组, 新数组中的元素是通过检查指定数组中符合条件的所有元素。若没有通过测试，则返回空数组。filter() 不会对空数组进行检测，不会改变原始数组。
filter为数组中的每个元素调用一次callback函数，并利用所有使得callback返回true或等价于true的值的元素创建一个新数组。callback只会在已经赋值的索引上被调用，对于那些已经被删除或者从未被赋值的索引不会被调用。那些没有通过callback测试的元素会被跳过，不会被包含在新数组中。
示例：
let array = ['apple', 'banana', 'car', 'dog', 'egg']
let result = array.filter(function (data) {
return data.length <= 3
})
console.log(result);
此外还有Promise、setTimeout、arr.map()等等
函数柯里化
函数柯里化(Currying)：通过函数调用继续返回函数的方式，实现多次接收参数最后统一处理的函数编码形式。即把接受多个参数的函数变换成接受一个单一参数（最初函数的第一个参数）的函数，并且返回接受余下的参数而且返回结果的新函数的技术。
函数柯里化 是将原来接受两个参数的函数变成新的接受一个参数的函数的过程，新的函数返回一个以原有第二个参数为参数的函数，这些函数不会立即求值，而是通过闭包的方式把传入的参数保存起来，直到真正需要的时候才会求值，减少了代码的冗余，实现函数的复用，是 js 函数式编程的一项重要应用。
柯里化不会调用函数，只是对函数进行转换，指将一个函数从可调用的 fn(x, y, z, …) 转换为可调用的 fn(x)(y)(z)…
示例：
<script>
// 正常写法：
function sum(a, b, c) {
return a + b + c
}
const result = sum(1, 2, 3)
console.log(result);
// 函数柯里化演示：
function sum2(a) {
return (b) => {
return (c) => {
return a + b + c
}
}
}
const result2 = sum2(1)(2)(3)
console.log(result2);
</script>
综合案例演示：
<script type="text/babel">
class Login extends React.Component {
state = {
username: '',
password: ''
}
// saveFormData 函数就是一个高阶函数+柯里化函数：调用的返回值依然是一个函数，多次接收参数最后统一处理的函数编码形式。
saveFormData = (dataType) => {
return (event) => {
console.log(event.target.value);
this.setState({
[dataType]: event.target.value
})
}
}
handleSubmit = (event) => {
event.preventDefault();
const {
username, password } = this.state
alert(`你输入的用户名是：${
username}，你输入的密码是：${
password}`)
}
render() {
return (
<form action="" onSubmit={
this.handleSubmit}>
用户名： <input type="text" onChange={
this.saveFormData('username')} /> <br /><br />
密码： <input type="password" onChange={
this.saveFormData('password')} name="password" id="" /> <br /><br />
<button>登录</button>
</form>
)
}
}
ReactDOM.createRoot(document.getElementById('test')).render(<Login />)
</script>
如有误，请指正！