打开网易新闻 查看更多图片

箭头函数是用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特性。如果使用恰当,这种紧凑的语法可以节省大量的开发时间和带宽,并提高代码的可读性。