如何使用ES6箭头函数

箭头函数是用JavaScript编写函数的一种相对较新的方式。它们是由ECMAScript 6规范引入的，从那以后成为最流行的ES6特性。箭头函数允许你用箭头符号快速定义JavaScript函数。它最大的优点是，在创建新的JavaScript函数时，可以省略花括号和function关键字以及return关键字。

这种语法起初可能看起来很奇怪，但值得掌握。箭头函数不仅节省时间，还能写出更易读的代码。许多JavaScript工程师已经习惯每天都用它了。

它的基本句法如下所示：

在本文中，我们将使用一些真实的例子，看看如何在不同的场景中创建箭头函数。我们还将使用旧的ECMAScript 5语法来编写相同功能的代码，这样你可以了解二者之间的区别。

没有参数

最简单的箭头函数句法是函数没有任何参数。在下面的示例中，用ECMAScript 5语法声明了一个函数表达式，并将其赋给 birthday 变量。它向控制台输出一个简单的字符串，“Happy birthday!”。

在箭头函数语法中，花括号、function和 return 关键字都消失了。现在，整个函数只需要一行代码。空括号表示函数没有任何参数，箭头后面就是函数体。

一个参数

我们修改上面的例子，为函数增加一个参数，名为 name。旧版 ES5 语法会取得一个参数，然后将其追加到返回的字符串中：

箭头函数语法本质上做了同样的事情。你需要将name参数括在箭头之前的括号中，然后在函数体中省略return关键字：

两个参数

你可以在箭头函数里带上任意多的参数。例如，还是以 birthday 为例，它有两个参数，age 和 name。现在，birthday()函数需要两个参数来返回字符串。首先，我们使用ECMAScript 5语法：

然后，这是 ES6 的版本实现相同的功能：

如果函数声明太长或占用多行，也可以用花括号将它括起来，如下所示。不过，当你这样做的时候，也必须把return关键字添加到函数体中。

条件语句

当你想要在函数体中使用条件语句时，箭头函数也是一个不错的选择。下面的脚本定义了一个简单的开关，其中 state 参数指示开关是打开还是关闭。

由于 if-else 语句占用了多行，你需要在每个代码块中使用 return 关键字。除此之外，和上面的写法没有什么不同：

对象字面量

你还可以使用箭头函数语法来声明setter函数，让用户设置对象字面量的值。下面的setBirthday()函数允许用户设置寿星的姓名和年龄：

使用箭头函数句法，只需要一行代码即可实现同样的功能：

数组操作

你也可以使用箭头函数来操作JavaScript数组。例如，让我们看一下persons数组，它包含三个对象字面量，每个对象都有一个 name 和 age 属性：

JavaScript内置的map() 方法允许你在数组的每个元素上调用相同的函数。使用传统的ES5语法，你可以通过以下方式返回每个人的 name 属性：

使用箭头函数句法，只需要一行代码即可实现同样的操作：

何时不要使用箭头函数

虽然箭头函数有许多使用场景，但是它们也有一些限制。有些情况下，你不能或不应该使用箭头函数语法。

最重要的是，不能用箭头函数创建构造函数。如果使用 new 关键字和箭头函数，控制台将抛出一个错误。这是因为JavaScript把箭头函数看作类似于对象的方法。因此，箭头函数不能拥有自己的方法。

此外，箭头函数没有自己的 this，它总是使用外层包裹它的作用域所用的 this。如果对象字面量中的函数需要访问此对象的属性，这个函数也不要使用箭头函数。

总结

箭头函数为开发者用JavaScript编写函数时提供了一种快捷方法。箭头语法有许多使用场景，因此它很快就成为了JavaScript社区最喜欢的ES6特性。如果使用恰当，这种紧凑的语法可以节省大量的开发时间和带宽，并提高代码的可读性。