雷达智富

首页 > 内容 > 程序笔记 > 正文

程序笔记

ES6 箭头函数 Arrow Function

2024-09-20 14

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

前言


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

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

1. ES6 前定义函数


// 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;    }}

2. ES6 箭头函数语法


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

const test = () => {}

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

const test = res => {    console.log(res);}const test = ({ code, msg }) => {    console.log(res);}

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

const test = (num1, num2) => {    return num1 + num2;}

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

const test = (num1, num2) => num1 + num2;

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

setTimeout(() => {}, 1000)

3. ES6 箭头函数返回值


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

// 普通写法// const math = (num1, num2) => {//     return num1 + num2// }// 省略 {}const math = (num1, num2) => num1 + num2

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

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

const demo = {    // 返回值是 []    a1: () => [],    // 返回值是 'abc'    a2: () => 'abc',    // 返回值是 true    a3: () => true,    // 返回值是键值对的对象时 需要使用 ({})    // 因为使用 () => {} , {} 会被当作方法体的定界符    a4: () => ({        name: 'liang'    }),

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

export default {    name: "my-search",    props: {        config: {            type: Object,            default: () => ({                height: 36,            }),        },    },}

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


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

更新于:19天前
赞一波!

文章评论

评论问答