关于ES6的新特性

一、ES6的新特性

1、什么是ES6

ECMAScript 6.0（以下简称ES6）是JS语言的下一代标准，发布于2015年6月。它的目标是使得JS语言可以用来撰写复杂的大型应用程序，成为企业级开发语言。

2、ES6和JS之间的关系

ES是JS的一种语法规格，后者是前者的一种实现

3、 相对于JS新增加的特性

3.1、let和const 两种新的声明方式

即可声明变量也可声明对象

（1）、JS中var声明的局限，在声明变量后会导致提升变量的作用域。

//var全局变量
 var sum = 0
for(var i= 0;i<10;i++){
    
    sum+=i
}
console.log('sum:',sum)

console.log('i:',i)

var sum = 0 

（2）、用let声明的变量只在块中有效即块级作用域(‘{}’)。

//let局部变量
var sum = 0
for(let i= 0;i<10;i++){
    
    sum+=i
}
console.log('sum:',sum)

console.log('i:',i) 

（3）、const声明的是一个常量，因此常量必须初始化，并且赋值之后不能改变。

A、用const声明的对象(称为常对象)：可以改变对象属性的值，但不能改变对象。

 const obj = {
    
    name :'张三',
    age:20
}

console.log(obj)

obj.name = '刘协'

console.log('改变后：',obj) 

B、冻结对象：用const来声明对象，再用object.freeze(对象名)进行冻结。这样就无法修改对象的属性

//object.freeze冻结对象

 const obj = {
    
    name :'张三',
    age:20
}

console.log('改变前：',obj)
Object.freeze(obj)
obj.name = '刘协'

console.log('改变后：',obj) 

C、如何冻结对象的内部对象：可以通过封装函数，在函数中采用循环的遍历方式

3.2、临时死区：JS引擎会在扫描代码时，会在内存中开辟两个区域，一个是全局区：此区域用来放置var声明的变量;另外一个是临时死区：此区域用来存放let和const。

3.3、循环中let和const的使用

（1）、使用let声明变量

使用var的效果：

 let arr = []//数组：用来存放函数(数组的每个单元都是一个变量)

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

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

使用let的效果：

//循环中使用let 和const

 let arr = []//数组：用来存放函数(数组的每个单元都是一个变量)

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

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

(2)、for-in:用于遍历对象

//for...in循环：遍历对象的属性

 const obj = {
    
    name:'刘邦',
    age:45,
    address:'西安 ',
    sex:'男 '
}

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

(3)、使用for-of循环，通常用来遍历数组

//for-of循环，通常用来遍历数组
   
   const arr = ['秦始皇','刘邦','刘协','刘秀']

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

3.4、结构赋值：rest操作符(…)
（1）、在调用函数时，可以通过rest操作符传参

//在调用函数时，可以通过rest操作符传参
 function fn(x,y,z){
    
    console.log(x,y,z)
}

let arr = [11,22,33]
//fn(arr[0],arr[1],arr[2])//传统做法

fn(...arr) 

（2）、用于数组的结构，在遍历数组时使用rest操作符

/* var a=11,b=22,c=33传统做法*/

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

console.log(b)

let [t,...arr] = [1,20,30] //将1赋给t，将20，30赋值给...arr

console.log(t)

console.log(...arr)
 */

（3）、对象的结构：变量名必须和对象的属性名相同，和属性名先后顺序无关

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

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

（4）、在结构赋值中的默认值和参数：若obj对象中不存在这个属性则使用默认值，否则使用obj属性的值

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

4、模板字符串：

(1)、ES5中采用字符串拼接。例如：‘姓名：’+name+‘，性别：’+sex
（2）、ES6中采用反引号（``）实现，如需使用变量则采用${变量名}嵌入到反引号当中。

//模板字符串

let arr = [
    {
    
        uname :'刘恒',
        age:35

    },
    {
    
        uname :'朱棣',
        age:35
    },
    {
    
        uname :'李世民',
        age:35
    }
]

let str = ''

for(let item of arr){
    
    str+=`姓名：${
      item.uname},年龄：${
      item.age}\n`
}

console.log(str)

5、symbol

5.1、ES5的基本数据类型：number、bollean、string、Object、undefindl、null

5.2、 symbol是es6新增的数据类型，表示一个唯一的值。

使用方法：

（1）、let 变量名 = symbol或let 变量名 = symbol('字符串')

（2）、可以作为对象的属性名，也可以作为对象的属性值

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

let obj = {
    
     id : id1,
     sex:'男',
     uname:'朱棣'
}
let obj1 = {
    
    id : id2,
    sex:'男',
    uname:'李世民'
}

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

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

6、Set集合：是一种数据结构，结构类似于数组，和数组不同的是，里面不能放重复的值，通常用于数组去重，字符串去重。

6.1、创建集合：new set()

6.2、常用方法：

（1)、add():向集合中添加元素，返回值就是集合本身

let set = new Set()

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

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

可以看到将上面的代码输出后，在代码中明明有两个add的值为2，可输出时只显示了一个，这就是前面提到的Set集合里不能放重复的值。

（2）、delete():删除元素

let set = new Set()

set.add(1)
set.add(2)
set.add(2)
//删除元素

set.delete(100) //true表示删除成功，false表示失败

console.log(set)

（3）、has():判断某个值是否存在

let set = new Set()

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

set.add(3).add(100).add(10000)
//判断某个值是否存在
console.log(set.has(100))//判断100是否存在

console.log(set.has(13))//判断13是否存在

（4）、claer():清除集合中的所有元素

let set = new Set()

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

set.add(3).add(100).add(10000)
//清除集合中的所有元素
set.clear()

console.log(set)

6.3、集合的遍历：set集合中key和vlaue是一样的，所以返回的键值都是一样的

（1）、获取集合的keys()或values()进行遍历

//通过key()和 values()遍历
let set = new Set()

set.add('西安').add('渭南').add('宝鸡')

for(let i of set.keys()){
     //keys()函数的作用：获取set中的所有键(key),返回值也是集合
    console.log(i)

}

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

//注意;Set中key和value是相同的，即key()he values()的返回值一样

（2）、可以通过forEach循环遍历

//通过key()和 values()遍历
let set = new Set()

set.add('西安').add('渭南').add('宝鸡')
//通过forEach循环遍历

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

6.4、通过数组来构造一个set集合

//通过数组来构造一个set集合
 let arr = [112,33,44,55]

let set = new Set(arr)

console.log(set) 

6.5、通过set实现集合的并集和交集

（1）、并集：

//通过set实现集合的并集和交集

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集合:',...setA)
console.log('B集合:',...setB)

console.log('并集：',...C)

（2）、交集;

//交集

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

}))

console.log('交集：',...D)
console.log('D的元素个数:',D.size) //size用来表示元素中的个数

6.6、WeakSet集合：

只能存放对象.支持add方法，hsa和delet，不支持size和keys

7、Map集合：

7.1、在ES5中没有Map,但有Object对象(他本质上也是hash结构，特点是以keys：value的形式，但key的形式只能是字符串)。

7.2、在ES6中增加了Map集合，

（1）、经常用的属性:size（表示集合中的元素个数）

（2）、常用方法：

a、set():添加数据

b、get():获取数据

c、has():检测key是否存在

d、delete():删除key

e、clear():清除所有的key

let map = new Map()

map.set('id',1001) 
map.set('name','刘邦')
map.set('age',45)
map.set('address','小沛')

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)

总的来说Map的常用方法的用法和Set几乎一致。

（3）、map集合的遍历方法：

a、keys()返回的是map中的所有key

let map = new Map()

map.set('id',1001) 
map.set('name','刘备')
map.set('age',25)
map.set('address','小沛')


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

b、values():返回map中的所有value

let map = new Map()

map.set('id',1001) 
map.set('name','刘备')
map.set('age',25)
map.set('address','小沛')

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

c、entries():返回所有的map成员

let map = new Map()

map.set('id',1001) 
map.set('name','刘备')
map.set('age',25)
map.set('address','小沛')

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

d、forEach:

map.forEach(function(key,val){
      //函数带两个参数，第一个参数对应key，第二个参数对应value，若只有一个参数则该参数对应value。
 console.log(`${
      key}:${
      val}`)
  })

let map = new Map()

map.set('id',1001) 
map.set('name','刘备')
map.set('age',25)
map.set('address','小沛')
/* map.forEach(function(key,val){ console.log(`${key}:${val}`) }) */

（4）、转为数组：使用…运算符

//将key键转为数组
   let map = new Map()

    map.set('id',1001) 
    map.set('name','刘备')
    map.set('age',25)
    map.set('address','小沛')
   let k = [...map.keys()]//[ 'id', 'name', 'age', 'address' ]
   console.log(k)

   let m = [...map.values()] //[ 1001, '刘备', 25, '小沛' ]
   console.log(m)

   //输出是二维数组
    let obj  = [...map.entries()]  
   console.log(obj)

（5）、可以对map中的元素进行过滤：使用过滤器filter

let map  = new Map()

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

console.log(map)

//将map中value是偶数的键值对（key-values）过滤出来，存入新的map中

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

console.log(map1)