I. default value of function parameter

//Practice before es6
function log(x,y){
    var y=y||'world';
    console.log(x,y);
}
log('hello'); // hello world
log('hello',0); //hello world

**: when the parameter y is assigned to false, the default value is valid. This may not be what we want. You may make the following improvements:

function log(x,y){
    if(arguments.length==1){
        y='world';
    }
    console.log(x,y);
}

Let's feel how es6 is written:

function log(x,y='world'){
    console.log(x,y);
}
log('hello','cc'); // 'hello cc'
log('hello',0); //'hello 0'

2. Use with deconstruction defaults

At this time, we must pass in the object. If we don't, an error will be reported.

function log({x,y=5}){
    console.log(x,y);
}
log({}); //undefiend 5
log({1,2}) // 1 2
log(); //Report errors 

3. scope of action

If the parameter default value is a variable, the scope of the variable is the same as that of other variables, that is, the scope of the current function first, and then the global scope.

var x=1;
function f(x,y=x){
    console.log(y);
}
f(2); //2

//If the variable x inside the function scope does not form when called.

let x=1;
function f(y=x){
    let x=2;
    console.log(y);
}
f(); //1

 

II. rest parameter

The form (... Variable name) is used to get redundant parameters of the function. Put extra parameters in an array.

function add(...values){
    let sum=0;
    values.forEach(function(item){
        sum+=item;
    });
    return sum;
}
add(2,3,5);

 

III. extension operator

The extension operator is three points (...).

//Array conversion value

console.log(1,...[2,3,4],5);

Instead of the apply method

//How to write the maximum value in es5
Math.max.apply(null,[12,19,22]);

//es6
Math.max(...[12,19,22]);

//Convert class array object

var nodeList=document.getElementsByTagName('div');
//es5
var arr=Array.prototype.slice.apply(null,nodeList);

//es6
var arr1=[...nodeList];

var arr1=[1,2];
var arr2=[3,4,5];
var arr3=[19,21,22];

//es5 medium
arr1.concat(arr2,arr3);

//es6 medium
[...arr1,...arr2,...arr3]

 

IV. arrow function

1. The arrow function is generally used in the callback, and this points to the outer function.

2. Cannot be used as a constructor. You cannot use the new command.

3. The arguments object cannot be used. The object does not exist in the body of the function.

4. Cannot be used as a Generator function

//For es5 in callback function

var arr=[1,2,3,4,5];
arr.some(function(item){
    return item>0;
});

//es6
arr.some((item)=>{return item>0;})

this always points to outer functions.  

		var handle={
			id:0,
			init:function(){
				console.log('init',this.id++);
				return ()=>{
					console.log('Arrow function this',this.id);
				}
			}
		}
		handle.init()();

No arguments, super

function foo(){
    setTimeout(()=>{
        console.log('arguments:',arguments);
    },1000);

}
foo(1,2,34,2);
//arguments: [1,2,34,2]