什么是高阶函数?
高阶函数:对其他函数进行操作的函数,可以将它们作为参数传递,或者是返回一个函数。如果一个函数符合下面两个规范中的任何一个,那该函数就是高阶函数。
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>
如有误,请指正!