Typescript：箭头函数：callback 回调函数（函数作为参数，传递给另一个参数）-马育民老师

# 说明

有两个函数：函数 `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()` 时，可以传入回调函数，在回调函数中，可以 **任意定义过滤规则**

原文出处：http://malaoshi.top/show_1GW21X8Cy3QC.html