说明
有两个函数:函数 a() 和 函数 b(),函数 b() 作为参数,传递给 函数 a() ,那么函数 b() 就是回调函数,即:作为参数的函数就是回调函数
应用场景
应用极为广泛:
- setTimeout() 定时执行
- 数组部分方法,如:
forEach()、map()、filter() - 事件绑定
例子
// 函数a,有一个形参,从形参看不出是函数
function a( fun:Function ){
fun() // 通过后面的(),可以看出调用函数了
}
// 函数b
function b(){
console.log("函数b")
}
// 调用函数a,并将函数b传入
a(b)
执行结果:
函数b
案例
有数组如下:
let arr = [1,2,3,10,20,100,500]
定义函数,可以实现过滤功能,比如:
- 打印出数组中的偶数
- 打印出大于
3的值 - 打印出小于
10的值
分析
如果按照传统方式定义3个函数:
- 第一个函数:打印出数组中的偶数
- 第二个函数:只能打印大于
3的值 - 第三个函数:只能打印出小于
10的值
显然太笨了,如下:
let arr = [1,2,3,10,20,100,500]
function fun1(arr:number[]){
for( let item of arr){
if(item % 2 == 0){
console.log("",item)
}
}
}
fun1(arr)
解决
可以使用回调函数
定义主函数
形参:
- 参数1:数组
- 参数2:回调函数,该回调函数是对数组进行的操作
功能:遍历数组,并执行回调函数,将数组的元素传给该回调函数,如果该函数返回 true,表示符合条件,就打印该元素
function fun(arr:number[],callback:(a:number) => boolean ){
for( let item of arr){
let res = callback(item)
if(res){
console.log("",item)
}
}
}
定义回调函数
定义箭头函数,作为回调函数
形参:数组的一个元素
功能:定义过滤规则,即:能被 2 整除就打印,如下:
let filter = (e:number) => {
return e % 2 == 0
}
调用函数:
fun(arr, filter)
简化上面的箭头函数
将箭头函数直接传入函数中:
fun(arr, (e:number) => {
return e % 2 == 0
})
简化上面的箭头函数
fun(arr, e => e % 2 == 0 )
总结
最大的好处,调用函数 fun() 时,可以传入回调函数,在回调函数中,可以 任意定义过滤规则