JavaScript中的ES6箭头函数入门

在 ES6 中，对 JavaScript 进行了许多更新，包括扩展运算符、对象解构、新类型的变量等等。最显着的变化之一是箭头函数，一种新的简洁的函数编写方式。使用箭头函数，您可以在一行中定义一个可读且简洁的函数。在本文中，我们将介绍箭头函数的基础知识并讨论它们的好处。

ES5 中的函数

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

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

如果需要，我们还可以定义函数并将其分配给变量。

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

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

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

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

在这一点上，它看起来与旧的方法没有太大的不同，但我们可以做一些改进。

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

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

很多时候，我们编写的函数只在一行代码之后就返回。使用旧的函数编写方式，函数中的行数不会影响您定义函数的方式。使用箭头函数，它可以。

如果你只想在一个函数中做单行返回，你可以使用 implicit return 来简化你的函数。使用隐式返回时，不需要大括号或 return 关键字。它看起来像这样：

const multiplyByTwo = num => num * 2;

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

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

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

您会看到使用箭头函数的最常见的地方之一是 JavaScript 数组方法，如 map、reduce、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
    }
}

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

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

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

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

在这种情况下，将为 first 和 last 属性打印 undefined，因为关键字 this 未绑定到 person 对象并且没有要引用的 first 和 last 变量.

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