ES6箭头功能

📌 相关文章

📜 ES6箭头功能

📅 最后修改于: 2021-01-01 03:55:38 🧑 作者: Mango

JavaScript编写方法。它们使我们能够编写较小的函数语法。箭头功能使您的代码更具可读性和结构性。

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

输出量

单个语句的可选大括号；如果不需要任何参数，则为空大括号。

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));

输出量

3.用词法绑定上下文： Arrow函数以词法或静态方式绑定上下文。相比于常规的功能这样做的处理是在箭头的功能不同。在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函数自动执行。

正如我们所看到的，箭头函数，使函数的写作不太复杂，而且还减少了线的数量。