ES6基础

一、ES6的语法

        1、let和const

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

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

                （3）const声明的对象：

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

const obj ={
    name:'张三',
    age:24
}
 
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='father'
                //2.1 hasOwnProperty用来判断对象是否包含给定的属性。typeeof用来判断数据类型
                if (obj.hasOwnProperty(key) && typeof obj[key] === 'object') {  //obj['name']  --- String  obj['age']  --- Number   obj['family']  --- 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，则输出1 2 3 4
            arr.push(function(){  //arr是一个函数数组：数组的每个单元都是函数
                console.log(i);
            })
        }
 
        arr.forEach(function(item){  //item是函数：输出5个5
            item();
        })

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

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

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

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

		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,...arr]=[11,22,33];  //将11赋给a，将22，33赋给arr，arr就是一个数组
        console.log(a);
        console.log(arr);

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

 		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: 85,
                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: 85,
                css: 95,
                js: 85,
            }
        }
        let { id: userId, userName: name, sex, score: { html, css, js } } = obj;  //变量名必须和对象的属性名相同,userId是id的别名，name是userName别名
        console.log('编号：', userId);
        console.log('姓名：', name);
        console.log('性别：', sex);
        console.log('css的成绩', css);

        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,4,5,6])，去除重复元素

        let s1 = new Set();  //创建一个空集合
        console.log(s1);
 
        let arr = [1,2,3,4,5,6];
        let s2 = new Set(arr);
        con.log(s2);

                （2）常用的方法：

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

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

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

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

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

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

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

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

                （4）遍历方法：

                        a、for...of

		for(let i of s1.keys()){
            console.log(i);
        }
        console.log('Size:',s1.size);

                        b、forEach

 		s1.forEach(function(value,key){
            console.log(value+'-----'+key)
        })

                （5）集合运算

                        a、并集

 		let setA = new Set([4, 5, 6]);
        let setB = new Set([5, 6, 7]);
        //1.实现setA与setB的并集
        let bj = new Set([...setA, ...setB]);
        console.log(bj);

                        b、交集

		let setA = new Set([4, 5, 6]);
        let setB = new Set([5, 6, 7]);
         /*2.实现setA与setB的交际：通过过滤器实现
        [...setA]:解构集合setA，将其转换为数组
        */
        let arr = [...setA];  //解构集合setA，将其转换为数组
        //对arr进行过滤：使用filter函数
//第一种
        let temp = arr.filter(function (item) {  //依次从arr中取出元素传递给item，在函数体内设置筛选的条件，将满足条件的元素返回给temp
            // return setB.has(item);  //将满足条件的item返回（简写）
            if(setB.has(item)){
                return item
            }
        })
        console.log(temp);
//第二种
 
        let t = [...setA].filter(function (item) {
            return setB.has(item);
        })
        console.log(t);

                        c、差集

		let setA = new Set([4, 5, 6]);
        let setB = new Set([5, 6, 7]);
         /*2.实现setA与setB的交际：通过过滤器实现
        [...setA]:解构集合setA，将其转换为数组
        */
        let arr = [...setA];  //解构集合setA，将其转换为数组
        //对arr进行过滤：使用filter函数
//第一种
        let temp = arr.filter(function (item) {  //依次从arr中取出元素传递给item，在函数体内设置筛选的条件，将满足条件的元素返回给temp
            // return setB.has(item);  //将满足条件的item返回（简写）
            if(setB.has(item) == false){
                return item
            }
        })
        console.log(temp);
//第二种
 
        let t = [...setA].filter(function (item) {
            return setB.has(item);
        })
        console.log(t);

问题1：创建Set集合时为什么要用new运算符？

                Set是一个构造函数，凡是用构造函数创建对象是都要有new

问题2：Set构造方法的参数为什么是数组或null？

                底层代码规定的

        8、WeakSet集合：只是一个对象集合。即集合中只能存放对象。它支持add、has、和delete方法

练习：创建构造函数Student，它的属性有id、name、html、css、js。

                （1）利用改构造函数创建5个对象，并将这5个对象存放到Set集合中

                （2）把css成绩不及格的对象挑选出来

        //1.构造函数
        function Student(id, name, html, css, js) {
            this.id = id;
            this.name = name;
            this.html = html;
            this.css = css;
            this.js = js;
        }
        //2.创建对象
        let s1 = new Student('1001', '小明', '60', '58', '77');
        let s2 = new Student('1002', '小红', '62', '53', '66');
        let s3 = new Student('1003', '小率', '88', '72', '87');
        let s4 = new Student('1004', '小栏', '60', '66', '72');
        let s5 = new Student('1005', '小白', '65', '59', '65');
 
        //3.创建数组
 
        let all = new Set([]);  //set空对象数组
        all.add(s1).add(s2).add(s3).add(s4).add(s5);  //添加对象
        console.log(all)
 
        //4.输出css不及格人员
        // for(let value of all){
        //     if(value.css<60){
        //         console.log(value)
        //     }
        // }
 
        let arr = [...all];
        let temp = arr.filter(function (item) {
            if (item.css < 60) {
                return item
            }
        })
        console.log(temp)