ES6特性

一、JavaScript的组成

1、ECMAScript：JavaScript的基本语法

2、BOM：浏览器对象模型（操作浏览器）—- 核心对象 window

3、DOM：文档对象模型（操作html文档）—- 核心对象document

二、ECMAScript

1、ECMAScript5：脚步语言。不需要独立的编译器，通过浏览器加载运行。实现用户和页面的交互

2、ECMAScript6：是JavaScript的下一代语法标准，于2015年6月发布。是JavaScript正式成为企业级的开发语言

3、ECMAScript和JavaScript的关系：

ECMAScript是一个语法规范，JavaScript是该语法规范的实现

三、ES6的语法

1、let和const

（1）let：用来声明块级变量。var声明的变量会出现作用域的提升（会出现变量的污染）

（2）const：声明的常量必须要初始化

（3）const声明的对象：常对象

   a、可以修改对象的属性值，但是不能修改对象本身

const obj = { 
    name:'张三',
    age:25
}
obj.name = '李四'  //正确的：修改对象的属性
obj = {} // 错误的：不能改变对象

   b、冻结对象：不能修改对象的属性。使用Object.freeze(对象名)

const obj = {
            name:'李四',
            age: 25
        }
console.log(obj)
Object.freeze(obj) //冻结对象obj,就不能修改obj的属性
obj.name = '王五'
console.log(obj)

c、冻结嵌套的对象

const p = {
            name:'李四',
            age: 25,
            family:{
                father:'李世民',
                mother:'长孙皇后'
            }
        }
    //定义一个冻结函数
    function fun(obj){ //函数的参数是对象
        //1.冻结对象：参数接收的对象
        Object.freeze(obj)
        //2.使用for...in循环遍历对象的属性
        for(let key in obj){ //key = 'mother'
            //2.1 hasOwnProperty用来判断对象是否包含给定的属性。typeyof用来判断数据类型
            if(obj.hasOwnProperty(key) && typeof obj[key] === 'object'){
                fun(obj[key])
            }
        }
    }
    fun(p)
    p.family.father = '李建成'
    console.log(p)

hasOwnProperty(key)函数：判断key是否是对象的属性，若是返回true，不是返回false

四、ES6的新特性

1、临时死区：用let和const声明的变量，放在’临时死区‘，使用let、const声明的变量的作用域不会被提升

2、在循环中使用var的情况

let arr = []
for(var i=0;i<5;i++){ //var定义的i是全局的，若将var改为let,则输出0 1 2 3 4
arr.push(function(){ //arr是一个函数数组：数组的每个单元都是函数
console.log(i)
})
}

3、解构赋值：Rest运算符：'...'

（1）当迭代器使用：会按顺序遍历容器中的元素

 function fun(x,y,z){
            console.log(x,y,z)
        }
        let arr = [11,22,33]
        fun(...arr) //'...'运算符的作用是一个迭代器：依次遍历数组中的元素

（2）替代函数的内置属性arguments

function fun(...args){
            console.log(args)
        }
let arr = [11,22,33]
fun(arr)

（3）通过解构赋值可以简化变量的赋值

let arr = [11,22,33]
let [a,b,c] = arr
console.log(a)

（4）通过解构来交换变量的值

let a = 10
let b = 20; //必须要以分号结尾
[a,b] = [b,a]
console.log(a,b)

4、对象的解构

（1）将对象的属性解构出来赋给变量

let obj = {
            id:1001,
            userName:'关羽',
            sex:'男'
        }
        let { id,userName,sex } = obj  //变量名必须和对象的属性名相同
        console.log('编号：',id)
        console.log('用户名：',userName)
        console.log('性别：',sex)

（2）解构多层对象

let obj = {
            id:1001,
            userName:'关羽',
            sex:'男',
            score:{
                html: 98,
                css:95,
                js: 85
            }
        }
        let { id,userName,sex,score:{html,css,js} } = obj  
        //变量名必须和对象的属性名相同
        console.log('编号：',id)
        console.log('用户名：',userName)
        console.log('性别：',sex)
        console.log('css的成绩：',css)

（3）在解构时可以给变量取别名

let obj = {
            id:1001,
            userName:'关羽',
            sex:'男',
            score:{
                html: 98,
                css:95,
                js: 85
            }
        }
        let { id:userId,userName:name } = obj  //userId是id的别名,name是userName的别名
        console.log('编号：',userId)
        console.log('用户名：',name)
        console.log('性别：',sex)

5、模板字符串：使用反引号` `和${变量名}将字符串常量和变量写在一个串里。就不需要使用'+'进行字符串的拼接

6、Symbol类型

（1）ES5的数据类型：number、string、boolean、bigint、null、undefined、object

（2）ES6新增的Symbol：表示一个唯一的值

    a、直接创建：let 变量名 = Symbol

    b、间接创建：传字符串 let 变量名 = Symbol（字符串)

7、Set集合：是一种数据结构，里面不能存放重复的值。可以用于数组去重、字符串去重

（1）创建方式：

   a、使用new运算符：let 变量 = new Set()

   b、通过数组来创建：let 变量名 = new Set( [1,2,3,5,6] ) ,去除重复的元素

（2）常用的方法：

    a、add(val)：向集合中添加元素

    b、delete(val)：删除集合中的元素。删除成功返回true，删除失败返回false

    c、has(val)：判断val在集合中是否存在，若存在返回true，不存在返回false

    d、clear()：清空集合，没有返回中

    e、values()：获取的是集合中所有value

    f、keys()：获取集合中的key

强调：Set集合也是key-value格式，它的key和value是相同的

（3）属性：size 存放的是集合中元素的个数

（4）遍历方法：

    a、for … of

    b、forEach

（5）集合运算

     a、并集

let setA = new Set([4,5,6])
let setB = new Set([5,6,7])
let bj = new Set([...setA,...setB])
console.log(bj)

    b、交集

let arr = [...setA]  //解构集合setA，将其转换成数组  
       //对arr进行过滤：使用filter函数
       //依次从arr中取出元素传递给item,在函数体内设置筛选条件，将满足条件的元素返回给temp
       let temp = arr.filter(function(item){
           if(setB.has(item)){ 
              return item
           }
       })
    console.log(temp)

c、差集

let arr = [...setA]  //解构集合setA，将其转换成数组  
       //对arr进行过滤：使用filter函数
       //依次从arr中取出元素传递给item,在函数体内设置筛选条件，将满足条件的元素返回给temp
       let temp = arr.filter(function(item){
           if(setB.has(item)==false){ 
              return item
           }
       })
    console.log(temp)