es6 commonly used features

First, the function of the arrow (Arrow Functions)

1. Definitions

= A> A + B; // can also be written (a, b) => a + b

This is equivalent to:

 function (a,b) {
        return a+b
    };

Arrow key function is actually replaced with the function '=>'.

2, this points to a problem

Arrow points to this function and the function is different from the ordinary and normal function of this point is to use this function of the object, and the arrow points to a function of this window when the object is located is defined.

 // general function refers to this object it is currently used, i.e. the object P 
    var P = { 
        name: 'P' , 
        F: function () { 
            the console.log ( this ) // {name: "P", F: ƒ} 
        } 

    }; 

// in the general definition of the function arrow function, this point P is still the object 
  var P = { 
    name: 'P' , 
    F: function () { 
      window.addEventListener ( 'the Click', () => { 
        the console.log ( the this )   // the this refers to an object P name {: "P", F: ƒ} 
      }) 
    } 

  };

    p=P.f();

Function arrow pointing to the window object is currently located.

  var P={
    name:'p',
    f:()=> {
      console.log(this)//Window {postMessage: ƒ, blur: ƒ, focus: ƒ, close: ƒ, parent: Window, …}
    }

  };

  p=P.f()

3, the object model monomers

As can be seen above, the arrow function convenient than an ordinary function, but the problem is that thsi point to the question, how will this point it's like ordinary function? Monomers may be used schema objects.

// monomers schema object 
    var P = { 
        name: 'P' , 
        F () { 
            the console.log ( the this ) // {name: "P", F: ƒ}, P is the object of the this point 
        } 

    }; 
    P = Pf ()

Two, async function

the processing asynchronous async task becomes linear, asynchronous code easier, more readable, such as ordinary functions:

deluser(context,object){   
 　　
　　　　axios.get('...')
        .then((response) => {
          // handle success
        })
        .catch((error) => {
          // handle error        
        })
        .finally(() => {
          // always executed
        });
}

Obviously, this requires a callback function, readability relatively badly. The use async function

    deluser the async (context, Object) {
       
      const the await res = Axios. Delete ( `CRM / User / $` {object.userId}); // returned result is received using res 

      } 
    },

An asynchronous function consists of two parts:

(1) In async prefixed

(2) using the keyword await asynchronous operation function calls, await the attention position in the asynchronous function

Asynchronous function encounters await keywords pause, perform the following operation until after the execution axios request.

Third, deconstruction

1. Definitions

ES6 allowed according to a certain pattern, and the object is extracted from an array of values, assignment variable, which is called deconstruction.

Previously, assigning a variable, you can only specify values ​​directly.

let a = 1;
let b = 2;

Now, you can use:

let [a, b,] = [1, 2 ];

2, nested objects deconstruction

This data structure may be returned back, and comprising an array of nested objects:

= {Response "Data" : ser.data, 
     "Meta" : {
                 "Message": "user has been created" , 
 "code": 2000}}        

Deconstruction of data returned:

 const {data, meta: {message, code}} = res.data;

Fourth, the default parameters and the remaining

1, default parameters

 Before you create a parameter with default values:

function f1 (x, y) { 

     var x = x || 10
      var y = y || 10      return x * and 
}
  

Support this approach in es6 created a default value of the parameter:

function f1(x=10,y=10){

     return x * y

}

2, the remaining parameters

ES6 supported converted into an array in the form of function parameters.

  function f2(...theNumbers){
    
// get the sum of the array elements
    console.log(theNumbers)  //[1,2,3,4]
    
    return theNumbers

  }
  
  f2(1,2,3,4,)

　　By adding three points before the named parameters  ..., and the position after the input to the function parameters are automatically converted to an array. Rest parameters can only be applied to the first subset of parameters of function, such a situation, it will only start parameter from the second array:

  function f2(x, ...theNumbers){

  // get the sum of the array elements
    console.log(x) //1
      console.log(theNumbers)  //[2,3,4]

      return theNumbers

    }

    f2(1,2,3,4,)

Fifth, the template string

The traditional JavaScript language output template usually is written like this:

<script>

  var a =1,b=2;

  var str="num is" + a +","+"num is" + b; //num is1,num is2
  console.log(str)

</script>

In this way it is clear cumbersome, es6 provides a functional template string:

<Script>
     var A =. 1, B = 2 ;
     var STR NUM = IS $ `{A}, {B} NUM IS $`; // use $ {} rendering value, 'upper left corner of the keyboard keys below the key esc 
    the console.log (STR)

 </ Script>