Es6 notes 4 ^_^ function, es6 notes 4 function

Es6 notes 4 ^_^ function, es6 notes 4 function
I. Default function parameters

Now you can specify the default value of a parameter when defining a function, instead of using logic or operators as before.
Es5

Function sayHello (name) {// The traditional way to specify the default parameter let name1 = name | 'hubwiz'; return 'hello' + name1 ;}

Use the default ES6 Parameters

Function sayHello2 (name = 'hubwiz') {return 'Hello $ {name} ';} function sayHello3 (name = 'zhangsan', age = 19) {return' Hello, everyone, my name is $ {name}. My name is $ {age} '+' \ n' + "Hello everyone, my name is" + name + ", this year" + age;} console. log (sayHello (); // output: Hello hubwiz console. log (sayHello ('huizhi net'); // output: Hello huizhi console. log (sayHello2 (); // output: Hello hubwiz console. log (sayHello2 ('huizhi net'); console. log (sayHello3 (); // output: Hello huizhi Network console. log (sayHello3 ('Nick ', 26 ));

Ii. rest Parameters

The rest parameter (in the form of "... variable name") can be called an indefinite parameter. It is used to obtain redundant parameters of the function, so that you do not need to use the arguments object.
The variable used with the rest parameter is an array, which puts redundant parameters into the array.

function add(...values) {    console.log(...values);//1 2 3    console.log(values);//[1,2,3]    let sum = 0;    for (var val of values) {        sum += val;    }    return sum;}console.log(add(1, 2, 3));

The format of an indefinite parameter is three periods followed by variable names that represent all indefinite parameters. For example, in the above example,... values represents all parameters passed into the add function.

Iii. Extended Operators

The extension operator (spread) is three vertices (...). It is like the inverse operation of rest parameters. It converts an array into a comma-separated parameter sequence. This operator is mainly used for function calls.

It allows passing arrays or arrays of classes as function parameters without applying.

Let people = ['zhang san', 'Li si', 'wang wu']; // The sayHello function originally receives three independent parameters: people1, people2, and people3 function sayHello4 (lele1, people2, people3) {console. log ('Hello $ {people1}, $ {people2}, $ {people3} ');} // However, we pass an array as an extended parameter, it maps well to each individual parameter sayHello4 (... people); // output: Hello Zhang San, Li Si, Wang Wu // while in es5, if you need to pass an array as a parameter, we need to use the apply method of the function sayHello4.apply (null, people ); // output: Hello Zhang San, Li Si, Wang Wu

Iv. Arrow Functions

Arrow functions are short functions using the => syntax. This is similar in syntax to the features related to C #, Java 8, and CoffeeScript.

Let array = [1, 2, 3]; // a traditional array. forEach (function (v) {console. log (v) ;}); // ES6 array. forEach (v => console. log (v); // both expression bodies and statement bodies are supported. Unlike (common) functions, the arrow function shares the same lexical scope with the code in its context. Let evens = [1, 2, 3, 4, 5]; let fives = []; // expression body let odds = evens. map (v => v + 1); let nums = evens. map (v, I) => v + I); let pairs = evens. map (v => ({even: v, odd: v + 1}); // The statement body nums. forEach (v => {if (v % 5 = 0) {fives. push (v) ;}}); console. log (fives );

This with lexical scopes

    let bob = {        _name: "NICK",        _friends: ["Amy", "Bob", "Cinne", "Dylan", "Ellen"],        printFriends() {            this._friends.forEach(f => console.log(this._name + " knows " + f));        }    }    bob.printFriends();

Example:
Es6

(x, y) => {x++; y--; return x+y};

Equivalent to es5

function test(x, y) {    x++;    y--;    return x + y;}

This problem

class Animal {    constructor(){        this.type = 'animal'    }    says(say){        setTimeout(function(){            console.log(this.type + ' says ' + say)        }, 1000)    }}var animal = new Animal()animal.says('hi')  //undefined says hi

When you run the code above, an error is reported because this in setTimeout points to a global object. To make it run correctly, there are two traditional solutions:
The first is to pass this to self, and then use self to refer to this

function says(say) {    var self = this;    setTimeout(function () {        console.log(self.type + ' says ' + say)    }, 1000)}

The second method is to use bind (this), that is

    function says(say){        setTimeout(function(){            console.log(this.type + ' says ' + say)        }.bind(this), 1000)    }

But now we have the arrow function, so we don't need to worry about it:

class Animal2 {    constructor(){        this.type = 'animal'    }    says(say){        setTimeout( () => {console.log(this);            console.log(this.type + ' says ' + say)        }, 1000)    }}    var animal2 = new Animal2();    animal2.says('hi') ; //animal says hi

There are several usage notes for arrow functions.
1. this object in the function body, that is, the object where the definition is bound, rather than the object in use.
It is not because the arrow function has a mechanism to bind this internally. The actual reason is that the arrow function does not have its own this, and its this inherits from the outside, so the internal this is the this of the outer code block.
2. It cannot be used as a constructor. That is to say, the new command cannot be used. Otherwise, an error is thrown.
3. The arguments object cannot be used. This object does not exist in the function body.
In the above three points, the first point is particularly worth noting. The point of this object is variable, but it is fixed in the arrow function.
This article is to be continued ......