📜  JavaScript ES6 中的箭头运算符

📅  最后修改于: 2022-05-13 01:56:39.827000             🧑  作者: Mango

JavaScript ES6 中的箭头运算符

ES6 有很多优点,其中之一就是箭头运算符。它减少了定义代码大小的函数,因此它是面试中的热门问题之一。让我们更深入地了解箭头运算符的功能。
句法:
在 ES5 中,函数由以下语法定义:

function functionName(arg1, arg2….)
{
    // body of function
}

但在 ES6 中,函数是使用箭头运算符定义的,其语法如下:

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

箭头运算符的优点:
1) 减少代码大小:
由于我们已经用相应的箭头运算符替换了该函数,因此代码的大小减少了,我们必须为相同的工作编写更少的代码。这就是为什么我喜欢定义函数的箭头运算符方法。
2) 删除一行函数的函数大括号:
我们可以在箭头运算符声明中删除函数的大括号,例如:
代码#1:


输出:

10

这也可以写成:
代码#2:


输出:

70

3)无需在一行函数中定义return语句:
在 ES5 中,您必须在函数中定义 return 语句,如果在 ES6 中我们没有定义 return 语句,那么 ES6 会在调用给定函数时自动返回值。
这将通过以下示例清楚地显示:
ES5版本的一位左移函数如下:

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

而在 ES6 中,下面的函数可以写成如下:

var leftShift = (value) => value / 2;

代码#3:


输出:

values before left shift
a : 10 b : 10
values after left shift
a : 5 b : 5

4)词法绑定上下文:
箭头运算符在词法上绑定上下文,因此 this 引用原始上下文。这意味着它从箭头函数中使用它。让我们考虑一个具有年龄数组的类,如果年龄<18,我们会将它们推入子队列。在 ES5 中,你必须这样做:

this.age.forEach(function(age) {
    if (age < 18)
        this.child.push(age);
}.bind(this));

在 ES6 中,这可以按如下方式完成:

this.age.forEach((age) => {
    if (age < 18)
        this.child.push(age);
});

所以我们不必隐式绑定它,这是由箭头函数自动完成的。
所以我们已经看到箭头函数使函数编写变得不那么复杂并减少了行数,因此它被开发人员使用,也是面试中最热门的问题之一。