JavaScript 箭头函数 Arrow functions

与函数表达式相比，ES6 箭头函数为您提供一种编写更短的语法。

下面的示例定义一个返回两个数字之和的函数表达式：

下面的示例等效于上述函数表达式  add()，但使用箭头函数代替：

箭头函数（Arrow Function） 是 JavaScript 中的一种简洁语法，用来定义函数。箭头函数由 ES6 引入，它在语法上简化了传统的函数声明，并且具有一些不同的行为，尤其是在处理 this 上。

箭头函数的基本语法

箭头函数的语法比普通的函数声明更简洁，通常使用 => 语法：

这个箭头函数的功能与以下传统函数是等价的：

较为正式的箭头函数语法

基本语法：

这会创建一个函数 func，它接受参数 arg1..argN，然后使用这些参数计算右侧的表达式，并返回其结果。等同于：

具体的例子：

如你所见，(a, b) => a + b 表示一个接受两个参数 a 和 b 的函数。执行时，它计算表达式 a + b 并返回结果。

如果只有一个参数，那么参数周围的括号可以省略，使语法更加简洁。

箭头函数的语法结构

无参数：

如果函数没有参数，可以省略括号：

等价于：

一个参数：

如果只有一个参数，可以省略括号：

等价于：

例如：

多个参数：

多个参数需要使用括号：

有多行代码的箭头函数：

到目前为止，我们看到的箭头函数都非常简单。它们从 => 左侧获取参数，使用这些参数计算并返回右侧的表达式。

有时候我们需要更复杂的函数，包含多条表达式和语句。这种情况下，可以用大括号 {} 将它们包裹起来。主要的区别是：在使用大括号时，必须显式使用 return 语句来返回值（就像普通函数那样）。

再例如：

箭头函数可以像函数表达式（Function Expressions）一样使用。

例如，用来动态创建一个函数：

箭头函数一开始可能看起来陌生且不太易读，但随着习惯这种结构之后，这种感觉很快就会消失。

当我们只需要执行简单的单行操作、又懒得写太多代码时，箭头函数非常方便。

未完待续

这里我们称赞了箭头函数的简洁性。但这还不是全部！

箭头函数还有其他有趣的特性。

要深入学习它们，我们首先需要了解 JavaScript 的其他一些方面，因此稍后在章节《重新探讨箭头函数》中，我们会回到箭头函数的话题。

目前，我们已经可以在单行操作和回调函数中使用箭头函数了。

摘要：

箭头函数在处理简单操作时非常方便，尤其适合单行表达式。它们有两种写法：

• 没有大括号的写法：(...args) => expression —— 右侧是一个表达式，函数会计算它并返回结果。如果只有一个参数，括号可以省略，例如 n => n*2。

• 有大括号的写法：(...args) => { body } —— 使用大括号可以在函数内部编写多条语句，但需要显式使用 return 来返回值。

 

习题：

用箭头函数替换下面的函数表达式：

答案：