ECMAScript 6（es6）

1、ECMAScript 6

1.1 What is? ECMAScript 6

ECMAScript 6.0（ abbreviation ES6） yes JAvascript The next generation standard of language . Its goal , Is making Javascript Language can be used to write complex large applications , Become an enterprise development language .

1.2 ECMAScript 6 and JAvascript The relationship between

ECMAScript 6 and JAvascript The relationship is , The former is the latter's specification , The latter is an implementation of the former ( additional ECMAScript Dialects and Jscript and ActionScript)

2、 Basic grammar

2.1 let Declare variables

//var Declared variables have no local scope

//let Declared variable has local scope , Can only be used in the corresponding code block

{

// Defining variables

var a=0

let b=2

}

console.log(a)//0

console.log(b)//b is not defined

//var Declared variables can be assigned multiple times

//let A declared variable can only be assigned once

var m=1;

var m=2;

let n=10;

let n=20;

console.log(m) //2

console.log(n)//Identifier 'n' has already been declared

2.2 const declare constant

stay es6 Constants declared in must be assigned values , And it can't be assigned again .

const a=0;

a=4;//Assignment to constant variable.

const b;//Missing initializer in const declaration

2.3  Deconstruct assignment

Deconstructing assignment is an extension of assignment operator . It is a pattern matching method for arrays or objects , And then assign values to the variables .

Concise and readable in code writing , The meaning is clearer ; It is also convenient to obtain data fields in complex objects  

  An array of deconstruction

Tradition ：

let a=1,b=2,c=3;

console.log(a,b,c)

ES6：

let[x,y,z]=[1,2,3]

console.log(x,y,z)

Object to deconstruct

Tradition ：

let user={name:'Helen',age:18}

let name1=user.name

let age1=user.age

console.log(name1,age1)

ES6：

let{name,age}=user // Be careful ： The variable of the structure must be user Properties in

cosnole.log(name,age)

2.4  Template string

Templates

The string is equivalent to the enhanced string , Use back quotes `, Except as a normal string , It can also be used to define multiline strings , You can also add variables and expressions to a string  

Insert variables and expressions into the string . The variable name is written in ${} in ,${} You can put JavaScript expression .

let name="lucy"

let age=20

let info=`My name is ${name} ,

I am ${age+1}`

console.log(info)

 

 2.5  Declaration object abbreviation

 // Traditionally defined objects

     const name="lucy"

     const age=18

     const  user1={name:name,age:age}

     console.log(user1)

     //es6

     const user2={name,age}

     console.log(user2)

 2.6  Object extension operators

Extension operator (...) Used to extract all traversable properties of the parameter object and copy it to the current object

    //1、 Copy the object

    let person1={name:"Amy",age:18}

    let someone={...person1}

    console.log(someone)

    //2、 Merge objects

    let age={age:18}

    let name={name:"Amy"}

    let person2={...age,...name}

    console.log(person2)

 

 2.7  Arrow function

Arrow functions are often used to define anonymous functions

 // Tradition

   var f1=function(a){

       return a

   }

   console.log(f1(1))

   //ES6 Use the arrow function to define

   // Parameters => The body of the function

   var f2=a=>a

   console.log(f2(1))

   var f3=function(m,n){

       return m+n

   }

   console.log(f3(1,2))

   var f4=(m,n)=>m+n

   console.log(f4(1,2))