About the new features of ES6

One 、ES6 New features

1、 What is? ES6

ECMAScript 6.0（ hereinafter referred to as ES6） yes JS The next generation standard of language , Published on 2015 year 6 month . Its goal is to make JS Language can be used to write complex large-scale applications , Become an enterprise development language .

2、ES6 and JS The relationship between

ES yes JS A grammatical specification of , The latter is an implementation of the former

3、 be relative to JS New features

3.1、let and const Two new ways of declaration

You can declare variables or objects

（1）、JS in var Limitations of declarations , Declaring a variable will cause the scope of the variable to be promoted .

//var Global variables 
 var sum = 0
for(var i= 0;i<10;i++){
    
    sum+=i
}
console.log('sum:',sum)

console.log('i:',i)

var sum = 0 

（2）、 use let Declared variables are only valid in blocks, that is, block level scopes (‘{}’).

//let local variable 
var sum = 0
for(let i= 0;i<10;i++){
    
    sum+=i
}
console.log('sum:',sum)

console.log('i:',i) 

（3）、const Declared is a constant , So constants must be initialized , And it cannot be changed after assignment .

A、 use const Declared object ( They are called constant objects )： You can change the value of the object attribute , But you can't change the object .

 const obj = {
    
    name :' Zhang San ',
    age:20
}

console.log(obj)

obj.name = ' Liu Xie '

console.log(' After change ：',obj) 

B、 Freeze objects ： use const To declare objects , Reuse object.freeze( Object name ) Freeze . In this way, the properties of the object cannot be modified

//object.freeze Freeze objects 

 const obj = {
    
    name :' Zhang San ',
    age:20
}

console.log(' Before change ：',obj)
Object.freeze(obj)
obj.name = ' Liu Xie '

console.log(' After change ：',obj) 

C、 How to freeze the internal objects of an object ： You can encapsulate functions , Loop traversal is adopted in the function

3.2、 Temporary dead zone ：JS The engine will scan the code , Two areas will be opened in memory , One is the global area ： This area is used to place var Declared variables ; The other is the temporary dead zone ： This area is used to store let and const.

3.3、 In circulation let and const Use

（1）、 Use let Declare variables

Use var The effect of ：

 let arr = []// Array ： Used to store functions ( Each cell of the array is a variable )

for(var i = 0;i<5;i++){
    
    arr.push(function(){
    
        console.log(i)
    })
}

arr.forEach(function(item){
    
    item()
})

Use let The effect of ：

// Use in loop let  and const

 let arr = []// Array ： Used to store functions ( Each cell of the array is a variable )

for(let i = 0;i<5;i++){
    
    arr.push(function(){
    
        console.log(i)
    })
}

arr.forEach(function(item){
    
    item()
})

(2)、for-in: Used to traverse objects

//for...in loop ： Traversing the properties of an object 

 const obj = {
    
    name:' Liu bang ',
    age:45,
    address:' Xi'an  ',
    sex:' male  '
}

for(const key in obj){
    
    console.log(key)
}

(3)、 Use for-of loop , Usually used to traverse an array

//for-of loop , Usually used to traverse an array 
   
   const arr = [' Qin shi huang ',' Liu bang ',' Liu Xie ',' Liu Xiu ']

   for(const item of arr){
    
    console.log(item)
   }

3.4、 Structure assignment ：rest The operator (…)
（1）、 When the function is called , Can pass rest Operator transfer parameter

// When the function is called , Can pass rest Operator transfer parameter 
 function fn(x,y,z){
    
    console.log(x,y,z)
}

let arr = [11,22,33]
//fn(arr[0],arr[1],arr[2])// Traditional practice 

fn(...arr) 

（2）、 Structure for arrays , When traversing an array, use rest The operator

/* var a=11,b=22,c=33 Traditional practice */

 let [a,b,c] = [11,22,33]

console.log(b)

let [t,...arr] = [1,20,30] // take 1 Assign to t, take 20,30 Assign a value to ...arr

console.log(t)

console.log(...arr)
 */

（3）、 Structure of objects ： The variable name must be the same as the attribute name of the object , It has nothing to do with the order of attribute names

const obj={
    
    name:' liu ',
    age:25,
    height:'178cm'
}

 let {
    name:n,age:a,height:h} = obj
console.log(n,a,h)

（4）、 Default values and parameters in structure assignment ： if obj If this attribute does not exist in the object, the default value is used , Otherwise use obj The value of the property

const obj={
    
    name:' liu ',
    age:25,
    height:'178cm'
}
 let{
    name,age,height='189cm',font='64kg'} = obj
console.log(name,age,height,font)

4、 Template string ：

(1)、ES5 String splicing in . for example ：‘ full name ：’+name+‘, Gender ：’+sex
（2）、ES6 Use backquotes in （``） Realization , If you need to use variables, use ${ Variable name } Embedded in backquotes .

// Template string 

let arr = [
    {
    
        uname :' liu ',
        age:35

    },
    {
    
        uname :' Zhu di ',
        age:35
    },
    {
    
        uname :' Li Shimin ',
        age:35
    }
]

let str = ''

for(let item of arr){
    
    str+=` full name ：${
      item.uname}, Age ：${
      item.age}\n`
}

console.log(str)

5、symbol

5.1、ES5 Basic data types for ：number、bollean、string、Object、undefindl、null

5.2、 symbol yes es6 New data types , Represents a unique value .

Usage method ：

（1）、let Variable name = symbol or let Variable name = symbol(' character string ')

（2）、 It can be used as the attribute name of the object , It can also be used as the attribute value of the object

const id1 = Symbol('10010')
const id2 = Symbol('10010')

let obj = {
    
     id : id1,
     sex:' male ',
     uname:' Zhu di '
}
let obj1 = {
    
    id : id2,
    sex:' male ',
    uname:' Li Shimin '
}

console.log(obj)
console.log(obj1)

console.log(obj.id === obj1.id)

6、Set aggregate ： It's a data structure , The structure is similar to an array , Unlike arrays , Duplicate values cannot be placed inside , Usually used for array de duplication , String de duplication .

6.1、 Create set ：new set()

6.2、 Common methods ：

（1)、add(): Add elements to the collection , The return value is the set itself

let set = new Set()

set.add(1)
set.add(2)
set.add(2)

set.add(3).add(100).add(10000)
console.log(set) // Output ：set(5){1,2,3,100,10000}
console.log(...set) // Output :1,2,3,100,10000
console.log([...set]) // Output ：[1,2,3,100,10000]

You can see that after outputting the above code , There are clearly two in the code add The value of is 2, Only one... Is displayed when it can be output , That's what I mentioned earlier Set Duplicate values cannot be placed in the set .

（2）、delete(): Remove elements

let set = new Set()

set.add(1)
set.add(2)
set.add(2)
// Remove elements 

set.delete(100) //true Indicates that the deletion was successful ,false It means failure 

console.log(set)

（3）、has(): Determine whether a value exists

let set = new Set()

set.add(1)
set.add(2)
set.add(2)

set.add(3).add(100).add(10000)
// Determine whether a value exists 
console.log(set.has(100))// Judge 100 Whether there is 

console.log(set.has(13))// Judge 13 Whether there is 

（4）、claer(): Clear all elements in the collection

let set = new Set()

set.add(1)
set.add(2)
set.add(2)

set.add(3).add(100).add(10000)
// Clear all elements in the collection 
set.clear()

console.log(set)

6.3、 Traversal of the set ：set Collection key and vlaue It's the same , So the key values returned are the same

（1）、 Get the... Of the collection keys() or values() Traversal

// adopt key() and  values() Traverse 
let set = new Set()

set.add(' Xi'an ').add(' Weinan ').add(' baoji ')

for(let i of set.keys()){
     //keys() Function function ： obtain set All the keys in (key), The return value is also a set 
    console.log(i)

}

for(let t of set.values()){
    
    console.log(t)
}

// Be careful ;Set in key and value It's the same , namely key()he values() The return value of is the same 

（2）、 Can pass forEach Loop traversal

// adopt key() and  values() Traverse 
let set = new Set()

set.add(' Xi'an ').add(' Weinan ').add(' baoji ')
// adopt forEach Loop traversal 

set.forEach(function(key,vua){
    
    console.log(`${
      key}:${
      vua}`)
})

6.4、 Construct a through an array set aggregate

// Construct a through an array set aggregate 
 let arr = [112,33,44,55]

let set = new Set(arr)

console.log(set) 

6.5、 adopt set Realize the Union and intersection of sets

（1）、 Combine ：

// adopt set Realize the Union and intersection of sets 

let arr = [22,33,44,55]

let list  = [66,77,33,44]

let setA = new Set(arr)
let setB = new Set(list)

let C = new Set([...setA,...setB])
console.log('A aggregate :',...setA)
console.log('B aggregate :',...setB)

console.log(' Combine ：',...C)

（2）、 intersection ;

// intersection 

let D = new Set([...setA].filter(function(val){
    
    
    if(setB.has(val)){
    
        return val
    }
    

}))

console.log(' intersection ：',...D)
console.log('D Number of elements of :',D.size) //size Used to represent the number of elements 

6.6、WeakSet aggregate ：

Only objects can be stored . Support add Method ,hsa and delet, I won't support it size and keys

7、Map aggregate ：

7.1、 stay ES5 There is no Map, But there are Object object ( He is also essentially hash structure , It is characterized by keys：value In the form of , but key The form of can only be string ).

7.2、 stay ES6 Added in Map aggregate ,

（1）、 Frequently used attributes :size（ Represents the number of elements in the set ）

（2）、 Common methods ：

a、set(): Add data

b、get(): get data

c、has(): testing key Whether there is

d、delete(): Delete key

e、clear(): Clear away all key

let map = new Map()

map.set('id',1001) 
map.set('name',' Liu bang ')
map.set('age',45)
map.set('address',' Xiaopei ')

console.log(map.size)
let name = map.get('name')
console.log('name')

console.log(map.has('id'))

map.delete('address')
console.log(map.has('address'))

map.clear()
console.log(map)

in general Map The usage and Set Almost unanimously .

（3）、map Traversal method of collection ：

a、keys() The return is map All in key

let map = new Map()

map.set('id',1001) 
map.set('name',' Liu bei ')
map.set('age',25)
map.set('address',' Xiaopei ')


for(let key of map.keys()){
    
    console.log(`${
      key}:${
      map.get(key)}`)
}

b、values(): return map All in value

let map = new Map()

map.set('id',1001) 
map.set('name',' Liu bei ')
map.set('age',25)
map.set('address',' Xiaopei ')

for(let val of map.values()){
    
    console.log(val)
} 

c、entries(): Return all map member

let map = new Map()

map.set('id',1001) 
map.set('name',' Liu bei ')
map.set('age',25)
map.set('address',' Xiaopei ')

for(let kv of map.entries()){
    
    console.log(kv)
}

d、forEach:

map.forEach(function(key,val){
      // The function takes two arguments , The first parameter corresponds to key, The second parameter corresponds to value, If there is only one parameter, the parameter corresponds to value.
 console.log(`${
      key}:${
      val}`)
  })

let map = new Map()

map.set('id',1001) 
map.set('name',' Liu bei ')
map.set('age',25)
map.set('address',' Xiaopei ')
/* map.forEach(function(key,val){ console.log(`${key}:${val}`) }) */

（4）、 Converted to an array ： Use … Operator

// take key Key to array 
   let map = new Map()

    map.set('id',1001) 
    map.set('name',' Liu bei ')
    map.set('age',25)
    map.set('address',' Xiaopei ')
   let k = [...map.keys()]//[ 'id', 'name', 'age', 'address' ]
   console.log(k)

   let m = [...map.values()] //[ 1001, ' Liu bei ', 25, ' Xiaopei ' ]
   console.log(m)

   // The output is a two-dimensional array 
    let obj  = [...map.entries()]  
   console.log(obj)

（5）、 It can be done to map Filter the elements in the ： Use filters filter

let map  = new Map()

map.set('101',15)
map.set('102',5)
map.set('103',10)
map.set('104',15)

console.log(map)

// take map in value Is an even number of key value pairs （key-values） To filter out , Deposit new map in 

let map1 =new Map( [...map].filter(function([key,val]){
    
       if(key%2==0){
    
        return[key,val]
       }
}))

console.log(map1)