ES6箭头函数介绍和用法示例

本文概述

• 带参数的箭头函数
• 带有默认参数的箭头函数
• 带有Rest参数的箭头函数
• 无括号的箭头函数
• 箭头函数的优点

ES6中引入了Arrow函数, 它为你提供了一种更准确的JavaScript编写方法。它们使我们能够编写较小的函数语法。箭头函数使你的代码更具可读性和结构性。

箭头函数是匿名函数(没有名称且未与标识符绑定的函数)。它们不返回任何值, 并且可以在不使用function关键字的情况下进行声明。箭头函数不能用作构造函数。箭头函数中的上下文是按词汇或静态方式定义的。它们在不同语言中也称为Lambda函数。

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

定义箭头函数的语法

const functionName = (arg1, arg2, ?..) => {
	//body of the function
}

箭头函数或Lambda函数由三部分组成：

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

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

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

// function expression

var myfun1 = function show() {
 console.log("It is a Function Expression");   
}

// Anonymous function

var myfun2 = function () {
    console.log("It is an Anonymous Function");   
   }
   
//Arrow function

var myfun3 = () => {
    console.log("It is an Arrow Function");   
   };

myfun1();
myfun2();
myfun3();

输出如下

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

句法变化

箭头函数有一些语法变化, 如下所示：

• 单个参数的可选括号

var num = x => {
    console.log(x);
}
num(140);

输出如下

140

• 单条语句的可选括号, 如果不需要任何参数, 则为空括号。

var show = () => console.log("Hello World");
show();

输出如下

Hello World

带参数的箭头函数

如果需要使用箭头函数传递多个参数, 则必须在括号内传递它们。

例如

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

输出如下

100 200 300

带有默认参数的箭头函数

在ES6中, 如果没有传递给它的值或未定义, 则该函数允许使用默认值初始化参数。你可以在以下代码中看到相同的插图：

例如

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

在上述函数中, b的值默认设置为200。如果未显式传递b的值, 则该函数将始终将200视为b的值。

输出如下

100 200

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

例如

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

输出如下

100 500

带有Rest参数的箭头函数

其余参数不限制你传递函数中值的数量, 但所有传递的值必须具有相同的类型。我们也可以说rest参数充当相同类型的多个参数的占位符。

为了声明rest参数, 参数名称应以具有三个句点(不超过三个或不小于三个)的扩展运算符为前缀。

在以下示例中, 你可以看到相同的插图：

var show = (a, ...args) => {
    console.log(a + " " + args);
}
show(100, 200, 300, 400, 500, 600, 700, 800);

输出如下

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

无括号的箭头函数

如果你要传递单个参数, 则括号是可选的。

例如

var show = x => {
    console.log(x);
}
show("Hello World");

输出如下

Hello World

箭头函数的优点

下图显示了使用箭头函数的一些优点：

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

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

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

例如

在ES5中

function show(value){
return value/2;
}

在ES6中

var show = value => value/2;
console.log(show(100));

注意：如果未在单个语句上使用花括号, 则不需要使用return, 但是, 即使在单个语句上也使用花括号, 则必须使用return关键字。

你可以在以下示例中理解它：

没有返回关键字

var show = value => {
    value/2;
}
console.log(show(50));

输出如下

undefined

带返回关键字

var show = value => {
   return value/2;
}
console.log(show(50));

输出如下

25

3.用词法绑定上下文：Arrow函数以词法或静态方式绑定上下文。与常规函数相比, 箭头函数的处理方式有所不同。在箭头函数中, 没有任何绑定。在常规函数中, 此关键字用于表示调用该函数的对象, 该对象可以是窗口, 按钮, 文档或其他任何东西。

但是对于箭头函数, 此关键字始终代表定义箭头函数的对象。

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

例如

考虑一个具有数字数组的类, 如果数字小于30, 则将其推入子队列。

在ES5中, 可以按以下步骤完成

this.num.forEach(function(num) { 
    if (num < 30) 
        this.child.push(num); 
}.bind(this));

在ES6中, 可以通过使用箭头函数来完成

this.num.forEach((num) => { 
    if (num < 30) 
        this.child.push(num); 
});

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

如我们所见, 箭头函数使函数的编写变得不那么复杂, 并且还减少了行数。