JavaScript ES6 Features

ES6 Core Features

Block-level scopes

Let: the existence of a block-level scope for a declared variable does not declare advance

ES5

//
  declare ahead of var x = ' outer '; function Test (inner) {    if  (inner) {        var x = ' inner ';        Console.log (x);     }    Console.log (x);} Test (false//Test (true)  //  inner inner 

ES6

//  declaration does not advance let x = ' outer ';   function Test (inner) {    if  (inner) {        = ' inner ';        Console.log (x);     }    Console.log (x);} Test (false//  outertest (true)  //  inner Outer

Advantages

// ES5 {    var a = 1;} Console.log (a)//  ES6{    = 2;} Console.log (b)

Const : Constants cannot be modified

Template string

Use ${} with ' Wrap variable '

// ES5 var str1 = ' LPT '; var str2 = ' Want to eat everything! ' ; Console.log (' I want to say: ' + str1 + ' + str2) // ES6Const STR3 = ' LPT '= ' Want to eat everything! ' ; Console.log (' I want to say: ${str3} ${STR4} ')

Deconstruction replication

Deconstructed assignments allow you to assign properties of arrays and objects to various variables using syntax like arrays or object literals

If the default value is a function, then the function will only be evaluated if necessary.

function fn (num) {  console.log (num);   return  = fn (1)] = [ten];  // do not execute function let [b = fn (2)] = [];  // Execute function a  //  B  //  2

Deconstruction assignment allows you to specify a default value

// ES5 var arr = [1, 2, 3, 4]; var first = Arr[0]; var third = arr[2//  1 3//  ES6Const ARR1 = [1, 2, 3, 4  = Arr1;console.log (a,c)

Exchange value

// ES5 var a = 1; var b = 2; var tmp == =//  2 1//  ES6Let a = 1 /c14>= 2=//  2 1

Deconstruction to multiple return values

// ES6 function margin () {    Constleft =1, right=2, top=3, bottom=4;     return  =//  1 4

Classes and objects

//ES5varAnimal = (function () {    functionMyconstructor (name) { This. Name =name; } MyConstructor.prototype.speak=functionspeak () {Console.log ( This. Name + ' makes a noise. ');    }; returnMyconstructor;}) ();varAnimal =NewAnimal (' LPT '); Animal.speak (); //LPT makes a noise.

//ES6class Animal {constructor (name) { This. Name =name; } speak () {Console.log ( This. Name + ' makes a noise. '); }}const Animal=NewAnimal (' LPT '); Animal.speak (); //LPT makes a noise.

Inherited

//ES5varAnimal = (function () {    functionMyconstructor (name) { This. Name =name; } MyConstructor.prototype.speak=functionspeak () {Console.log ( This. Name + ' makes a noise. ');    }; returnMyconstructor;}) ();varMonkey = (function () {    functionMyconstructor (name) {Animal.call ( This, name); }    //Prototypal InheritanceMyconstructor.prototype =object.create (Animal.prototype); MyConstructor.prototype.constructor=Animal; MyConstructor.prototype.speak=functionspeak () {Animal.prototype.speak.call ( This); Console.log ( This. Name + ' roars ');    }; returnMyconstructor;}) ();varMonkey =NewMonkey (' Simba '); Monkey.speak (); //Simba makes a noise.//Simba roars.//ES6class Animal {constructor (name) { This. Name =name; } speak () {Console.log ( This. Name + ' makes a noise. ');        }}class Lion extends Animal {speak () {super.speak (); Console.log ( This. Name + ' roars '); }}const Lion=NewLion (' Simba '); Lion.speak (); //Simba makes a noise.//Simba roars.

Arrow functions

The arrow function completely fixes this the point, this always pointing to the lexical scope, that is, the outer callerobj

 //  ES6   var  obj = {birth:  1992 
    
     function 
      () { var< /span> B = this . Birth; //   1992  var  fn = () = new  Date (). getFullYear ()-this . Birth; //  This points to the Obj object      Console.log (FN ()); }};obj.getage ();  //   

for...of

//  for var array = [' A ', ' B ', ' C ', ' d '];  for (var i = 0; i < array.length; i++) {    var element = Array[i];    Console.log (Element);} // ForEachArray.foreach (  Element) {    Console.log (element);}); // For ... of  for (const element of array) {    console.log (element);}

Default parameters

//ES5functionPoint (x, y, Isflag) {x= x | | 0; Y= y | | -1; Isflag= Isflag | |true; Console.log (x, y, isflag);} Point (0, 0)//0-1 TruePoint (0, 0,false)//0-1 TruePoint (1)//1-1 TruePoint ()//0-1 True//ES6functionPoint (x = 0, y =-1, Isflag =true) {console.log (x, y, isflag);} Point (0, 0)//0 0 TruePoint (0, 0,false)//0 0 FalsePoint (1)//1-1 TruePoint ()//0-1 True

To find the maximum value of an array

//  -

Use the extension operator (... ) Copy Array

// Bad Const LEN == [];let i;  for (i = 0; i < len; i++) {  = items[i];} // goodConst ITEMSCOPY = [... items];

Use the Array.from method to convert an array-like object to an array

const FOO = Document.queryselectorall ('. Foo '= Array.from (foo);

Not to be continued

JavaScript ES6 Features