What does es6 arrow function mean?

In es6, the arrow function is a new syntax that uses "=>" to define functions; the this pointer in the function body of the arrow function always points to the object where it is defined, and does not point to calling it. object, and this cannot be changed. The syntax is "let fun=(parameter) => {function body};".

The operating environment of this tutorial: Windows 10 system, ECMAScript version 6.0, Dell G3 computer.

What does es6 arrow function mean

In ES6, arrow function is the most interesting new feature. As the name suggests, arrow functions are a new syntax that uses arrows (=>) to define functions, but it is slightly different from traditional JavaScript functions, mainly focusing on the following aspects:

• No This, super, arguments and new.target are bound, and their values ​​are determined by the nearest non-arrow function in the periphery.

• Cannot be called through the new keyword

• No prototype

• The binding of this cannot be changed

• arguments object is not supported

• Duplicate named parameters are not supported

The point of this in the function body always points to the object where it is defined, and will not point to the object that calls it. We know that the function in es5 Whoever executes it, to whom it is directed.

is as follows:

var f = v = > v;
//等同于
var f = function(v){
      return v;
}
var sum = (num1,num2) => num1+num2 ;
//等同于
var sum = function(num1,num2){
      return num1+num2
}
[1,2,3].map(function (x) {
      return x * x;
});
// 箭头函数写法
[1,2,3].map(x => x * x);//简洁了许多

We can see from the example that function is omitted and the curly braces ‘{}’ are replaced with ‘=>’. This way of writing is more concise.

Examples are as follows;

//1、参数默认值 位置在所有形参的后面
    //es6之前的采取的默认值只能变相采取
    function test(a,b) {
        a=a||2;
        b=b||2;
        return a*b
    }
    console.log(test());
//但是这个有弊端  当我们传递的值为0的时候，还是会走默认值。改造之后
    function test1(a,b) {
        a=typeof a==="undefined"?2:a;
        b=typeof b==="undefined"?2:b;
        return a*b
    }
    console.log(test1(0,0))
//    es6为我们提供了默认值
//    语法糖：  function(a,b=2){}
     let test2=(a=2,b=2) =>{
        return a*b
    };
    console.log(test2());

Output results:

[Related recommendations:javascript video tutorial,webfrontend】

The above is the detailed content of What does es6 arrow function mean?. For more information, please follow other related articles on the PHP Chinese website!