1. Set the default parameters

In ES6, it is possible to set default values for function arguments directly after the arguments:

function sayHello(name){

    // The traditional way to specify default parameters

    var name = name||'lalala';

    document.write('Hello '+name);

} 

// Use ES6 default parameters

function sayHello2(name='lalala'){

    document.write(`Hello ${name}`);

}

sayHello();  // Output: Hello lalala

sayHello('hahahha');  // Output: Hello hahahha

sayHello2();  // Output: Hello lalala

sayHello2('hahahha');  // Output: Hello hahahha
Copy the code

Rest parameters

Before ES6, arguments were used to get extra arguments to a function:

function fn(a) {
    for(var i = 0; i < arguments.length; i ++){
        console.log(arguments[i]);
    }
    console.log(a);   
}
fn(1.2.3);
/ / 1
/ / 2
/ / 3
/ / 1
Copy the code

Rest parameters (of the form “… Variable names “) can be called indeterminate arguments to get extra arguments to a function so you don’t need to use arguments objects.

The rest argument goes with a variable that puts the extra arguments into an array.

function add(. values) {

   let sum = 0; 

   for (var val of values) {

      sum += val;

   } 

   return sum;

} 

add(1.2.3) / / 6
Copy the code

Pay attention to

The rest parameter cannot be followed by any other parameter (that is, only the last parameter), otherwise an error will be reported.

/ / an error
function f(a, ... b, c) {
  // ...
}
Copy the code

The length property of the function, excluding the REST argument.

(function(a) {}).length  / / 1
(function(. a) {}).length  / / 0
(function(a, ... b) {}).length  / / 1
Copy the code

Arrow function

ES6 allows functions to be defined using arrows (=>). Here is the simplest function:

var sayHi = () = > {
    alert('hi');
}

/ / equivalent to the

function sayHi() {
    alert('hi');
}
Copy the code

If you need to pass arguments, write them in parentheses:

var add = (a, b) = > {
    console.log(a + b);
}

/ / is equivalent to

function add(a, b){
    console.log(a + b);
}
add(10.20);   / / 20
Copy the code

If you have only one argument, you can omit the parentheses:

var fn = a= > {
    console.log(a);
}
fn(100);   / / 100
Copy the code

And even curly braces can be omitted if there is only one statement.

var fn = a= > console.log(a);
fn(100);   / / 100
Copy the code

Pay attention to

  • This in the arrow function refers to the object on which it was defined, not the object on which it was called.

  • Should not be used as a constructor, that is, should not use the new operator, otherwise an error will be reported.

  • Arguments objects cannot be used.

The arrow function this points to

The arrow function does not have its own this inside it, so it cannot be used as a constructor. The arrow function refers to the outer this. The this pointer is fixed in the arrow function.

The arrow function causes this to always point to this in the object where the function definition takes effect;

function foo() { 
    setTimeout(() = > { console.log(this); }, 100); 
} 
foo()   // Global object, since the arrow function does not have its own this, the this of the foo function points to the arrow function this. In foo, this points to global, so this in the arrow function also points to global.
Copy the code