javascript 箭头函数（lambda表达式）-马育民老师

# 介绍

箭头函数，Arrow Function，是 **ES6标准** 新增的函数，相当于 **匿名函数** 的简写形式

# 匿名函数  VS  箭头函数

[![](https://www.malaoshi.top/upload/pic/js/QQ20210118223444.png)](https://www.malaoshi.top/upload/pic/js/QQ20210118223444.png)

- **箭头函数** 与 匿名函数 写法 **几乎相同**，只是 **少了** `function` ，**多了** `=>`
根据 **形参的数量**，函数中 **语句的数量**，箭头函数提供了多种 **简写形式**

- 箭头函数中的 `this` 指向与 匿名函数不同

### 应用场景

- 作为回调函数，如：事件、定时器、数组方法中使用箭头函数，避免 `this` 指向问题
- 异步操作
- 简单的单行逻辑（函数中只有一行代码），适合用箭头函数简化代码

箭头函数通过简洁的语法和稳定的 `this` 绑定，成为 JavaScript 开发中处理回调场景的理想选择。

# 基本语法

**注意：**要将箭头函数 **赋值** 给 **变量** 或 **常量**，否则无法调用

### 形式一
```
(参数) => 表达式
```

### 形式二
```
(参数) => {
    代码块
}
```

# 箭头函数的写法

1. 只有一个参数，`()` 可以 **省略**（没有参数 或 多个参数，不能省略）
2. `{}` 中只有一行代码，`{}` 可省略
3. `{}` 中只有一行代码，而是是 `return` ，`{}` 和 `return` 可以省略

### 例子：没有形参，{}中只有一条语句

- 没有形参，`()` 不可省略
- `{}`中只有一条语句，`{}` 可以省略

普通函数：
```
var test = function () {
    return 10
}

var res=test()
console.log("res="+res)
```

箭头函数：
```
// 没有形参，不可省略 ()
// 同时省略{} 和 return，自动将该行代码的结果返回
var test2 = () => 10

var res=test2()
console.log("res="+res)
```

### 例子：只有一个形参，{}中有一条语句

- 只有一个形参，`()` 可省略
- `{}`中只有一条语句，`{}` 可以省略

普通函数：
```
var test = function (a) {
    return a*2
}

var res=test(3)
console.log("res="+res)
```

箭头函数：
```
// 只有一个形参，可省略()
// 同时省略{} 和 return，自动将该行代码的结果返回
var test2 = a => a*2

var res=test2(3)
console.log("res="+res)
```

### 例子：多个参数，{}中有多条语句

- 多个形参，`()` 不可省略
- `{}` 中有多条语句，`{}` 不可省略

普通函数：
```
var add = function (a,b) {
    console.log("a="+a)
    console.log("b="+b)
    return a+b
}

var res=add(1,2)
console.log("res="+res)
```

箭头函数：
```
// 多个形参，不可省略()
// {}中有多行代码，不可省略{}
var add2 = (a,b) => {
    console.log("a="+a)
    console.log("b="+b)
    return a+b
}

var res=add2(1,2)
console.log("res="+res)
```