0
点赞
收藏
分享

微信扫一扫

ES6 箭头函数 Arrow Function


ES6 箭头函数 Arrow Function_es6

 

前言
1. ES6 前定义函数
2. ES6 箭头函数语法
3. ES6 箭头函数返回值
4. 箭头函数中的 this 到底是谁 ?

前言

ES6 新增了一种新的函数: 箭头函数 Arrow Function

箭头函数相当于匿名函数,简化了函数定义,将原函数的 function 关键字和函数名都删掉,并使用 ​​=>​​ 连接参数和函数体

1. ES6 前定义函数

1. ​​// function 关键字​​
2. ​​function add(num1, num2) {​​
3. ​​return num1 + num2;​​
4. ​​}​​
5. ​​// 函数表达式​​
6. ​​const sub = function (num1, num2) {​​
7. ​​return num1 - num2;​​
8. ​​}​​
9. ​​// 对象字面量中定义函数​​
10. ​​const obj = {​​
11. ​​mul: function (num1, num2) {​​
12. ​​return num1 * num2;​​
13. ​​},​​
14. ​​div(num1, num2) {​​
15. ​​return num1 / num2;​​
16. ​​}​​
17. ​​}​​

2. ES6 箭头函数语法

当没有参数时, 可以定义为以下形式


1. ​​const test = () => {​​
2.
3. ​​}​​

当只有一个参数时,括号可以省略。但是,如果这个参数是解构赋值,括号不能省略


1. ​​const test = res => {​​
2. ​​console.log(res);​​
3. ​​}​​
4. ​​const test = ({ code, msg }) => {​​
5. ​​console.log(res);​​
6. ​​}​​

当有多个参数时,括号不能省略




1. ​​const test = (num1, num2) => {​​
2. ​​return num1 + num2;​​
3. ​​}​​

当函数体只有一行语句时,可以省略 {}


1. ​​const test = (num1, num2) => num1 + num2;​​

使用箭头函数的场景: 闭包函数


1. ​​setTimeout(() => {​​
2.
3. ​​}, 1000)​​

3. ES6 箭头函数返回值

当方法体只有一条语句时可以省略花括号


1. ​​// 普通写法​​
2. ​​// const math = (num1, num2) => {​​
3. ​​// return num1 + num2​​
4. ​​// }​​
5. ​​// 省略 {}​​
6. ​​const math = (num1, num2) => num1 + num2​​

当箭头函数需要返回一个数据时,可以使用下面写法

返回值数据类型是 字符串,数组,布尔值,​​=>​​​ 后面直接跟上数据即可,返回值如果是键值对形式的对象,需要使用 ​​({})​

1. ​​const demo = {​​
2. ​​// 返回值是 []​​
3. ​​a1: () => [],​​
4. ​​// 返回值是 'abc'​​
5. ​​a2: () => 'abc',​​
6. ​​// 返回值是 true​​
7. ​​a3: () => true,​​
8. ​​// 返回值是键值对的对象时 需要使用 ({})​​
9. ​​// 因为使用 () => {} , {} 会被当作方法体的定界符​​
10. ​​a4: () => ({​​
11. ​​name: 'liang'​​
12. ​​}),​​

箭头函数直接返回一个数据的写法,多用于 vue,uniapp 开发中


1. ​​export default {​​
2. ​​name: "my-search",​​
3. ​​props: {​​
4. ​​config: {​​
5. ​​type: Object,​​
6. ​​default: () => ({​​
7. ​​height: 36,​​
8. ​​}),​​
9. ​​},​​
10. ​​},​​
11. ​​}​​

4. 箭头函数中的 this 到底是谁 ?

箭头函数中的 this 指向问题标准答案: 向外层作用域中一层层查找 this,直到有 this 的定义

举报

相关推荐

0 条评论