ES6 类

ES6 箭头函数

箭头函数是在 ES6 中引入的，它为您提供一种更准确的方法来编写 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

Syntactic Variations

箭头函数有一些语法变化，如下所示:

单个参数的可选括号

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 参数充当相同类型的多个参数的占位符。

为了声明 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 语句和Functional 大括号对于单行函数是可选的: 在ES5 中，我们需要在函数中定义return 语句，但在ES6 中，我们不需要为单行函数定义return 语句。函数大括号对于单行函数也是可选的。

例如

在 ES5 中

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

在 ES6 中

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

注意: 如果你不是在单条语句上使用大括号，那么你不需要使用return，但是如果你甚至在单条语句上使用大括号，那么你必须使用 return 关键字。

你可以在下面的例子中理解:

没有 Return Keyword

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

输出

undefined

带返回关键字

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

输出

25

3.词法绑定上下文: 箭头函数词法或静态绑定上下文。与常规函数相比，箭头函数中 this 的处理是不同的。在箭头函数中，没有任何this绑定。在常规函数中，this关键字用于表示调用该函数的对象，可以是一个窗口、按钮、文档或任何东西。

但是对于箭头函数，这个关键字总是代表定义箭头函数的对象。

让我们试着用下面的一段代码来理解它:

例如

考虑一个类有一个数字数组，如果数字小于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); 
});

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

正如我们所见，箭头函数使得函数的编写更少复杂，同时也减少了行数。

ES6 生成器

ES6 类