ES6 箭头函数

箭头函数在 ES6 中引入，它为您提供了更准确的方式来编写 JavaScript 中的函数。它们允许我们编写更短的函数语法。箭头函数使您的代码更具可读性和结构性。

箭头函数是匿名函数（没有名称且未绑定标识符的函数）。它们不返回值，并且可以在没有 function 关键字的情况下声明。箭头函数不能用作构造函数。箭头函数中的上下文是词法或静态定义的。它们在不同的语言中也被称为 Lambda 函数。

箭头函数不包含任何原型属性，并且不能与 new 关键字一起使用。

定义箭头函数的语法

箭头函数或 Lambda 函数有三个部分

• 参数： 任何函数都可以选择具有参数。
• 胖箭头符号/lambda 符号： 这是箭头 (=>)的符号。
• 语句： 它代表函数的指令集。

让我们尝试通过一个例子来理解它。

在下面的示例中，我们定义了三个函数，它们显示了函数表达式、匿名函数和箭头函数。

输出

It is a Function Expression
It is an Anonymous Function
It is an Arrow Function

句法变体

箭头函数有一些句法变体，如下所示

• 单个参数的可选括号

输出

140

• 单个语句的可选大括号以及不需要任何参数的空大括号。

输出

Hello World

带有参数的箭头函数

如果您需要通过箭头函数传递多个参数，则必须将它们放在括号内。

例如

输出

100 200 300

带有默认参数的箭头函数

在 ES6 中，如果函数没有传递任何值，或者该值为 undefined，则允许使用默认值初始化参数。您可以在下面的代码中看到相同的说明

例如

var show = (a, b=200) => {
    console.log(a + " " + b);
}
show(100);

在上面的函数中，b 的值默认为 200。如果未显式传递 b 的任何值，该函数将始终将 200 视为 b 的值。

输出

100 200

如果函数显式传递其值，则参数 'b' 的默认值将被覆盖。您可以在以下示例中看到它

例如

输出

100 500

带有 Rest 参数的箭头函数

Rest 参数不会限制您在函数中传递值的数量，但所有传递的值必须属于同一类型。我们也可以说 rest 参数充当同一类型的多个参数的占位符。

要声明 rest 参数，参数名称应以展开运算符为前缀，该运算符有三个句点（不多于三个或不少于三个）。

您可以在以下示例中看到相同的说明

输出

100 200,300,400,500,600,700,800

没有括号的箭头函数

如果您只有一个参数要传递，则括号是可选的。

例如

输出

Hello World

箭头函数的优点

使用箭头函数有一些优点，如下图所示

让我们试着详细说明上图中可用的优点。

1. 减小代码大小： 当我们使用箭头函数的语法时，代码的大小会减小。通过使用箭头函数，我们可以编写更少量的代码。

2. 单行函数的可选 return 语句和函数大括号： 在 ES5 中，我们需要在函数中定义 return 语句，但在 ES6 中，我们不需要为单行函数定义 return 语句。单行函数的函数大括号也是可选的。

例如

在 ES5 中

在 ES6 中

注意：如果您没有在单个语句上使用花括号，则不需要使用 return，但是如果您在单个语句上使用花括号，则必须使用 return 关键字。

您可以在以下示例中理解它

没有 Return 关键字

输出

undefined

带有 Return 关键字

输出

25

3. 词法绑定上下文： 箭头函数以词法或静态方式绑定上下文。箭头函数中 this 的处理方式与普通函数不同。在箭头函数中，没有 this 的任何绑定。在普通函数中，this 关键字用于表示调用该函数的对象，它可以是窗口、按钮或文档或任何内容。

但是使用箭头函数，此关键字始终表示定义箭头函数的对象。

让我们尝试用以下代码来理解它

例如

考虑一个包含数字数组的类，如果数字小于 30，那么我们将它们推入子队列。

在 ES5 中，可以如下所示

在 ES6 中，可以使用箭头函数完成

因此，通过使用箭头函数，我们不需要隐式地绑定它，因为它由箭头函数自动执行。

正如我们所看到的，箭头函数使编写函数不那么复杂，并且它也减少了行数。