ECMAScript/ES6箭头函数

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

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

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

箭头函数定义：

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

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

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

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

// 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

1.语法变化

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

单个参数的可选括号

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

执行上面示例代码，得到以下结果：

140

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

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

执行上面示例代码，得到以下结果：

Hello World

2.带参数的箭头函数

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

示例代码：

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

执行上面示例代码，得到以下结果：

100 200 300

3.带有默认参数的箭头函数

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

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

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

上面示例代码执行结果为：

100 200

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

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

上面示例代码执行结果为：

100 500

4.带有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

5.无括号的箭头函数

如果要传递单个参数，则括号是可选的。如下示例：

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

上面示例代码执行结果为：

Hello World

6.箭头函数的优点

下面是使用箭头函数的一些优点：

• 减少代码大小：当使用箭头函数的语法时，代码的大小会减少。通过使用箭头函数，可以编写更少的代码。
• return语句和功能括号对于单行函数是可选的：在ES5中，需要在函数中定义return语句，但是在ES6中，不需要为单行函数定义return语句。 对于单行功能，函数括号也是可选的。

示例代码：

ES5代码 -

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

ES6代码 -

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

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

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

不使用 return关键字：

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

执行上面示例代码，得到以下结果：

undefined

使用 return关键字：

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

执行上面示例代码，得到以下结果：

25

词汇绑定上下文： 箭头函数以词法或静态方式绑定上下文。 与常规功能相比，箭头函数的处理方式有所不同。 在箭头函数中，没有任何绑定。 在常规函数中，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);   
});

因此，通过使用箭头函数，我们不需要隐式绑定它，因为它由箭头函数自动执行。如上所见，箭头函数使函数的编写变得不那么复杂，并且还减少了行数。