JavaScript的ES6中的箭头运算符-yiteyi-C++库

ES6有很多优点，其中之一就是arrow operator。它减少了函数定义代码的大小，因此这是采访中提出的热门问题之一。让我们更深入地了解箭头操作符的功能。 语法： 在ES5中，函数由以下语法定义：

null

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

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

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

Arrow运算符的优点： 1）减少代码大小： 因为我们用相应的箭头操作符替换了函数，所以代码的大小减小了，我们必须为同样的工作编写更少的代码。这就是为什么我喜欢定义函数的箭头操作符方法。 2）删除单行函数的大括号： 我们可以在arrow运算符声明中删除函数的大括号，例如： 代码#1：

                     <script>                   
                             
                                         //ES5 VERSION                   
                                         var                               setSize = (sz)=>                   
                                         size=sz;                   
                             
                                         //sets size value to the passed value                   
                                         setSize(10);                   
                                         document.write(size);                   
                             
                     </script>                   

输出：

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

                     <script>                   
                             
                                         //ES6 Version                   
                                         //Do not need to put curly braces for one line functions                   
                                         setDoubleSize = (sz)=>size=2*sz;                   
                             
                                         //Sets value of size equivalent to double of                   
                                         //passed argument in setDoubleSize function                   
                                         setDoubleSize(35);                   
                                         document.write(size);                   
                             
                     </script>                   

输出：

3）无需在单行函数中定义return语句： 在ES5中，您必须在函数中定义return语句，如果在ES6中我们没有定义return语句，那么只要调用给定函数，ES6就会自动返回该值。下面的例子可以清楚地说明这一点： ES5版本的一位左移功能如下：

function leftShift(value)

{

return value / 2;

}

在ES6中，以下函数可以编写为：

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

代码#3：

                     <script>                   
                             
                                         //ES5 VERSION                   
                                         function                               leftShiftES5(value){                   
                                         return                               value/2;                   
                                         }                   
                             
                                         //ES6 VERSION                   
                                         var                               leftShiftES6 = (value)=>value/2;                   
                                         var                               a=10,b=10;                   
                                         document.write(                               'values before left shift'                               +                               "<br>"                               );                   
                                         document.write(                               'a : '                               +a+                               ' b : '                               +b +                               "<br>"                               );                   
                             
                                         //Both of the function should give same output                   
                                         a=leftShiftES5(a);                   
                                         b=leftShiftES6(b);                   
                                         document.write(                               'values after left shift'                               +                               "<br>"                               );                   
                                         document.write(                               'a : '                               +a+                               ' b : '                               +b +                               "<br>"                               );                   
                             
                     </script>                   

输出：

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

4）从词汇上绑定上下文： Arrow运算符在词汇上绑定上下文，使其指向原始上下文。这意味着它使用的是箭头函数。我们考虑一个有年龄排列的班级，如果年龄小于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);

});

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

文章版权归作者所有，未经允许请勿转载。

THE END

Javascript