简介

在ES6中，对JavaScript进行了许多更新，包括扩散操作符、对象分解、新类型的变量等等。最显著的变化之一是_ARROW Functions_，这是一种新的简洁的函数编写方法。使用箭头函数，您可以在一行中定义一个可读且简洁的函数。在本文中，我们将介绍箭头函数的基础知识，并讨论它们的优点。

ES5的功能

让我们首先看一下如何使用ES5 JavaScript定义函数。要定义函数，需要使用_Function_关键字。例如，如果我们想定义一个将一个数乘以2的函数，它将如下所示。

1function multiplyByTwo(num){
2    return num * 2;
3}

如果愿意，我们还可以定义函数并将其赋给一个变量。

1const multiplyByTwo = function(num){
2    return num * 2;
3}

无论采用哪种方式，都必须包含关键字_Function_。

要创建箭头函数，不需要关键字_Function_。实际上，您基本上删除了该关键字，并在参数之后、左花括号之前添加了一个箭头。它看起来是这样的：

1const multiplyByTwo = (num) => {
2    return num * 2;
3}

在这一点上，它看起来与旧的方法没有本质上的不同，但我们可以做一些增强。

如果没有参数或有多个参数，则参数周围的括号是必需的。但是，当您的箭头函数只有一个参数时，您可以省略括号以简化它，如下所示：

1const multiplyByTwo = num => {
2    return num * 2;
3}

通常，我们编写的函数只在一行代码之后返回。使用旧的编写函数的方法，函数中的行数不会影响您定义函数的方式。有了箭头功能，它就可以。

如果你只想在函数中做一行返回，你可以使用_implicit return_来简化函数。当使用隐式返回时，你不需要花括号或_return_关键字。它看起来像这样：

1const multiplyByTwo = num => num * 2;

即使不一定需要返回任何内容，您仍然可以使用隐式返回语法。换句话说，如果您的函数的调用者不希望它返回任何东西，那么让它返回一些东西就没有关系了。

例如，如果要将某些内容打印到控制台，可以使用隐式返回来缩短函数的长度：

1const printName = (first, last) => console.log(`${first} ${last}`);

箭头函数最常见的地方之一是与JavaScript Array方法一起使用，如map，reduce，filter等。通过将箭头函数与这些方法一起使用，您可以在一行中完成数组转换。

让我们看两个示例，一个使用MAP，另一个使用过滤器。对于映射版本，假设我们希望通过将每个数字乘以2来转换数组。它应该看起来像这样：

1const twodArray = [1,2,3,4].map( num => num * 2);

注意，在这个箭头函数中，您省略了括号(因为只有一个参数)，而使用了隐式返回。这使得整个转换保持在一条线上。

现在，让我们用滤镜再做一次。假设我们想要过滤所有不是偶数的数字。我们会得到这样的结果：

1const filteredArray = [1,2,3,4].filter( num => num % 2 == 0);

同样，没有括号和隐式返回。

让我们从一个在person对象中使用ES5函数定义的例子开始：

1const person = {
2    first: "James",
3    last: "Quick",
4    getName: function() {
5        this.first + " " + this.last
6    }
7}

在本例中，我们创建了一个person对象，其中包含名字和姓氏，以及一个返回此人全名的getName（)函数。在函数内部，我们试图通过调用this.first和this.last来引用第一个和最后一个属性。

我们能够通过_this_关键字访问这些属性的原因是，当这些函数在对象内部定义时，它会自动绑定到对象本身。因此，对于ES5函数，我们仍然可以通过使用this来引用对象属性。

然而，当你使用箭头函数时，事情会发生一些变化。箭头函数不对关键字this做任何绑定。因此，如果我们要将函数定义更改为箭头函数，则无法正常工作。

1const person = {
2    first: "James",
3    last: "Quick",
4    getName: () => {
5        return this.first + " " + this.last
6    }
7}

在本例中，第一个和最后一个属性都将打印unfined，因为关键字this没有绑定到Person对象，也没有第一个和最后一个变量可供引用。

箭头函数是ES6 JavaScript的众多新特性之一。您将在示例和文档中看到它们越来越多地使用，因此值得学习它们的工作原理。它们还可以显著提高代码的简洁性和可读性。