箭头函数的简单使用

最新推荐文章于 2024-09-10 08:30:00 发布

原创最新推荐文章于 2024-09-10 08:30:00 发布 · 194 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了ES6中的箭头函数，包括其与传统函数的联系、转化方式及不同参数情况下的使用示例。通过简化函数定义，箭头函数提供了更简洁的语法，适用于单行返回的函数表达式。不论是无参、单个参数、多个参数还是可变参数，箭头函数都有对应的简洁写法，使得代码更加易读。

文章目录

1、概要：
2、箭头函数与基本函数联系与转化

1、概要：

箭头函数是基本函数的简化形式；

2、箭头函数与基本函数联系与转化

ES6中函数的基本语法

var fn1 = function(a, b) {
    return a + b
}
function fn2(a, b) {
    return a + b
}

使用ES6箭头函数语法定义函数，将原函数的“function”关键字和函数名都删掉，并使用“=>”连接参数列表和函数体，

使用箭头函数简化后的写法


var fn1 = (a, b) => {
    return a + b
}
(a, b) => {
   return a + b
}

当函数参数只有一个，括号可以省略；但是没有参数时，括号不可以省略。

当参数为无参、单个参数、多个参数、可变参数时箭头函数写法

// 无参
var fn1 = function() {}
var fn1 = () => {}

// 单个参数
var fn2 = function(a) {}
var fn2 = a => {}

// 多个参数
var fn3 = function(a, b) {}
var fn3 = (a, b) => {}

// 可变参数
var fn4 = function(a, b, ...args) {}
var fn4 = (a, b, ...args) => {}