ECMAScript/ES6箭头函数

1. 语法变化

箭头函数有一些语法变化，如下所示：
单个参数的可选括号

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

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

140

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

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

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

Hello World

2. 带参数的箭头函数

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

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

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

100 200 300

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

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

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

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

100 200

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

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

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

100 500

4. 带有Rest参数的箭头函数

Rest参数不限制传递到函数中值的数量，但所有传递的值必须是相同的类型。 也可以说rest参数充当相同类型的多个参数的占位符。为了声明rest参数，参数名称应以具有三个句点(不超过三个或不小于三个)的扩展运算符为前缀。
在以下示例中，可以看到相同的效果：

const 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. 无括号的箭头函数

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

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

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

Hello World

6. 箭头函数的优点

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

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

示例代码：
ES5代码 -

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

ES6代码 -

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

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

可以在以下示例中理解它：
不使用 return关键字：

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

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

undefined

使用 return关键字：

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

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