开始使用 JavaScript 中的 ES6箭头函数 | Docmiao 为您提供 Linux 云计算教程

2019-12-12

在 ES6中，JavaScript 有很多更新，包括 spread 操作符、对象析构化、新类型的变量等等。最显著的变化之一是箭头函数，这是一种新的简洁的函数编写方式。使用箭头函数，您可以在一行中定义一个可读和简洁的函数。在本文中，我们将介绍箭头函数的基础知识，并讨论它们的优点。

Es5的功能

首先让我们看看如何使用 ES5 JavaScript 定义函数。要定义一个函数，需要使用 function 关键字。例如，如果我们想定义一个将一个数字乘以2的函数，它看起来就像这样。

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

我们也可以定义这个函数，如果我们愿意的话，我们可以把它赋给一个变量。

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

不管你用哪种方式，关键字函数都必须包含在内。

要创建箭头函数，不需要关键字函数。事实上，你基本上删除了这个关键字，并添加了一个箭头右后的参数，但前面的开放式花括号。它看起来是这样的:

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

此时，它看起来与旧的方法没有实质上的不同，但是我们可以做一些改进。

如果没有参数或多个参数，则需要在参数周围加上括号。但是，如果你的箭头函数只有一个参数，你可以省略括号来简化它，像这样:

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

通常情况下，我们编写的函数只在一行代码之后返回。使用旧的函数编写方式，函数中的行数不会影响定义函数的方式。使用箭头函数，它可以。

如果您只想在函数中执行一行返回，那么可以使用隐式返回来简化函数。使用隐式 return 时，不需要大括号或 return 关键字。它看起来是这样的:

const multiplyByTwo = num => num * 2;

您仍然可以使用隐式返回语法，即使不一定需要返回任何内容。换句话说，如果函数的调用者并不期望它返回任何内容，那么让它返回某些内容并不重要。

例如，如果你想在控制台上打印一些东西，你可以使用隐式返回缩短函数的长度:

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

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

让我们来看两个例子，一个使用 map，另一个使用 filter。对于映射版本，假设我们想通过将每个数字乘以2来转换一个数组。它看起来是这样的:

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

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

现在，让我们做另一个过滤器。假设我们想过滤所有不是偶数的数字。我们可以这样做:

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

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

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

const person = {
    first: "James",
    last: "Quick",
    getName: function() {
        this.first + " " + this.last
    }
}

在这种情况下，我们创建了一个带有姓和名的 person 对象，以及一个返回人的全名的 getName ()函数。在函数内部，我们试图通过调用 this.first 和 this.last 来引用第一个和最后一个属性。

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

但是，当您使用箭头函数时，情况会发生一些变化。箭头函数不对关键字 this 做任何绑定。因此，如果我们将函数定义更改为箭头函数，事情就不会正常工作。

const person = {
    first: "James",
    last: "Quick",
    getName: () => {
        return this.first + " " + this.last
    }
}

在这种情况下，undefined 将同时为第一个和最后一个属性打印，因为关键字 this 没有绑定到 person 对象，也没有第一个和最后一个变量可以引用。

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