About ES6 learning summary, yesterday wrote the first article, mainly about variable declaration keywords let and const, new type Symbol and template string. Today, I am going to write the second article. The function part in ES6, ES6 added arrow function, Rest parameter and parameter default value.

Arrow function

The arrow function is so called because it is defined by an arrow, for example:

//ES5
function foo(param){
    return param*param;
}
//ES6 arrow function
var foo= param => param*param;

The above code simply compares the common function in ES5 with the arrow function in ES6. It is obvious that the arrow function is more convenient. There are some points needing attention in the arrow function:

The return value must be clear, and the return keyword must be added in the brackets. If the brackets are omitted, the return keyword can be omitted.

//The following two are the same.
() => "hello world";
() => { return "hello word"; }

When the number of parameters is more than one or none, it is necessary to wrap them in parentheses ().

//No parameters or multiple parameters need parentheses 
var foo1 = () => "hello world";
var foo1 = () => { return "hello word"; }
var foo2 = (param1,param2) => param1*param2;

When returning an object, you need to pay attention to adding () outside the brackets.

//Returning objects requires parentheses outside the function
var foo3 = param => ({key: value})

The use of this in arrow functions is different from that of ordinary functions. In common functions of JavaScript, there will be a value of this of its own, which is mainly divided into:

1. When a function is called as a global function, this points to the global object
2. When a function is called as a method in an object, this points to that object
3. When a function is used as a constructor, this points to a new object from the constructor new.
4. You can also change the direction of this through call, apply, and bind

In the arrow function, this belongs to the lexical scope, which is determined directly from the context. For this pointing to the indefinite in the ordinary function, the processing of this in the arrow function is undoubtedly simpler, as follows:

//ES5 General Function
function Man(){
  this.age=22;
  return function(){
    this.age+1;
  }
}
var cala=new Man();
console.log(cala())//undefined

//ES6 arrow function
function Man(){
  this.age=22;
  return () => this.age+1;
}
var cala=new Man();
console.log(cala())//23

There are no arguments in the arrow function (we can replace them with rest parameters), no prototypes, and no new keywords, for example:

//No arguments
var foo=(a,b)=>{return arguments[0]*arguments[1]}
console.log(foo(3,5))
//arguments is not defined

//No prototype
var Obj = () => {};
console.log(Obj.prototype); 
// undefined

//Cannot use new keyword
var Obj = () => {"hello world"};
var o = new Obj(); 
// TypeError: Obj is not a constructor

Rest parameter

Rest parameter is called residual parameter, prefixed with.. As mentioned above, arguments can not be used in the arrow function of ES6. We can replace them with rest parameter, for example:

function foo(){
  return arguments.length;
}
console.log(foo(1,2,3)) // 3

var foo= (...rest) => {
  return rest.length;
}
console.log(foo(1,2,3)) // 3

If there are other formal parameters before the rest parameter, the rest parameter can only be placed at the end:

var foo = (param1,param2,...rest) => {
    return param1 + param2 + rest.length;
};
console.log(foo(1,2,3,4,5)) // 6

var foo = (param1,...rest,param2) => {
    return param1 + param2 + rest.length;
};
console.log(foo(1,2,3,4,5)) //  Rest parameter must be last formal parameter

Default parameter values

Before ES6, JavaScript defaulted to undefined for parameters that were not passed in function calls, and ES6 added default values for parameters that allowed initialization of parameters using default values.

var foo = (param1,param2=10) => {
  return param1*param2;
}
console.log(foo(10)) // 100

As can be seen from the above example, a simple function of multiplying parameters is defined. When calling a function, only the value of the first parameter is passed in, and the result is returned to 100, because the default value of the second parameter in the function is 10. If we do not explicitly specify the parameter value when calling a function, the default value of the parameter will be used by default.

var foo = (param1,param2=10) => {
  return param1*param2;
}
console.log(foo(10，20)) // 200

This time when we call the function large, both parameters pass the value, so we return 200.