前言
1. ES6 前定义函数
2. ES6 箭头函数语法
3. ES6 箭头函数返回值
4. 箭头函数中的 this 到底是谁 ?
前言
ES6 新增了一种新的函数: 箭头函数 Arrow Function
箭头函数相当于匿名函数，简化了函数定义，将原函数的 function 关键字和函数名都删掉，并使用 => 连接参数和函数体
- ES6 前定义函数
undefined
// function 关键字function add(num1, num2) {return num1 + num2;}// 函数表达式const sub = function (num1, num2) {return num1 - num2;}// 对象字面量中定义函数const obj = {mul: function (num1, num2) {return num1 * num2;},div(num1, num2) {return num1 / num2;}-
} -
ES6 箭头函数语法
当没有参数时, 可以定义为以下形式
undefined
const test = () => {}
当只有一个参数时，括号可以省略。但是，如果这个参数是解构赋值，括号不能省略
undefined
const test = res => {console.log(res);}const test = ({ code, msg }) => {console.log(res);}
当有多个参数时，括号不能省略
undefined
const test = (num1, num2) => {return num1 + num2;}
当函数体只有一行语句时，可以省略 {}
undefined
const test = (num1, num2) => num1 + num2;
使用箭头函数的场景: 闭包函数
undefined
setTimeout(() => {-
}, 1000) -
ES6 箭头函数返回值
当方法体只有一条语句时可以省略花括号
undefined
// 普通写法// const math = (num1, num2) => {// return num1 + num2// }// 省略 {}const math = (num1, num2) => num1 + num2
当箭头函数需要返回一个数据时，可以使用下面写法
返回值数据类型是 字符串，数组，布尔值， => 后面直接跟上数据即可，返回值如果是键值对形式的对象，需要使用 ({})
undefined
const demo = {// 返回值是 []a1: () => [],// 返回值是 'abc'a2: () => 'abc',// 返回值是 truea3: () => true,// 返回值是键值对的对象时 需要使用 ({})// 因为使用 () => {} , {} 会被当作方法体的定界符a4: () => ({name: 'liang'}),
箭头函数直接返回一个数据的写法，多用于 vue，uniapp 开发中
undefined
export default {name: "my-search",props: {config: {type: Object,default: () => ({height: 36,}),},},-
} -
箭头函数中的 this 到底是谁 ?
箭头函数中的 this 指向问题标准答案: 向外层作用域中一层层查找 this，直到有 this 的定义
Original: https://blog.csdn.net/linyichao123/article/details/128425625
Author: 很酷的站长
Title: ES6 箭头函数 Arrow Function
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/786771/
转载文章受原作者版权保护。转载请注明原作者出处！