es6 set（集合）、Map、class（类）（es6学习笔记05）

一、集合介绍与API

1.1 Set

Set（集合）是es6提供的新的数据结构。类似于数组，但成员的值都是唯一的，集合实现了Iterator接口，所以可以使用扩展运算符和for...of...进行遍历。

结合的属性和方法：

size：返回集合的元素个数
add：增加一个新元素，返回当前集合
delete：删除元素，返回Boolean值
has：检测集合中是否包含某个元素，返回Boolean值
clear：清空集合里所有的元素

//声明一个集合
        let h = new Set();
        //可以传入可迭代的数据，一般是数组
        let h2 = new Set(['红红','黄黄','蓝蓝','绿绿','绿绿']); //会去掉重复
        //元素个数
        console.log(h2.size);
        //添加新元素
        h2.add('紫紫');
        //删除元素
        h2.delete('绿绿');
        //检测是否存在
        console.log(h2.has('红红'));
        //清空
        h2.clear();
        //遍历
        for(let v of h2){
    
    
            console.log(v);
        }

1.2 去重、求交集并集差集

let arr = ['A','B','C','D','C','B','A'];
        //1.数组去重
        let result = [...new Set(arr)];  //扩展运算符转换为数组
        //2.求交集
        let arr2 = ['B','C','C','A'];
        let result = [...new Set(arr)].filter(item => {
    
    
            let s2 = new Set(arr2);
            if(s2.has(item)){
    
    
                return true;
            }else{
    
    
                return false;
            }
        });
        let result = [...new Set(arr)].filter(item => new Set(arr2).has(item));
        console.log(result);

        //3.求并集
        let bing = [...new Set([...arr,...arr2])];

        //4.求差集
        let cha = [...new Set(arr)].filter(item => !(new Set(arr2).has(item)))

二、Map

Map是es6提供的数据结构。他类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。Map也实现了Iterator接口，所以可以使用扩展运算符和for...of...进行遍历。

Map的属性和方法：

size：返回Map的元素个数
set：增加一个新的元素，返回当前Map
get：返回键名对象的键值
has：检测Map中是否包含某个元素，返回Boolean值
clear：清空集合，返回undefined

//声明Map
        let h = new Map();
        //添加元素
        h.set('name','红红'); //"键"，"值"
        h.set('like',function(){
    
    
            console.log("红红喜欢玩水");
        });
        let friends = {
    
    
            names:'名字';
        };
        h.set(friends,['绿绿','蓝蓝','懒懒']);

        //删除
        h.delete('name');  //删除键
        //获取
        console.log(h.get('like'));
        console.log(h.get(friends));

        //清空
        h.clear();
        //遍历
        for(let v of h){
    
    
            console.log(v);  //输出键值，键值....
        }

简单来说，Map就是升级版的对象。

三、Class类

es6提供了更接近传统语言（java,c++等）的写法，引入了class（类）这个该娘，作为对象的模板。通过class关键字，可以定义类。基本上，es6的class可以看作只是一个语法糖，他的绝大部分功能，es5都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已。

知识点：

class声明类
constructor定义构造函数初始化
extends继承父类
super调用父级构造方法
static定义静态方法和属性
父类方法可以重写

例子：构造函数，实例化对象

//用es5构造实例化对象
        function ren(name,age){
    
    
            this.name = name;
            this.age = age;
        }
        //添加方法
        ren.prototype.play = function(){
    
    
            console.log("我喜欢玩水");
        }
        //实例化对象
        let lvlv = new ren('绿绿',20);
        lvlv.play();
        console.log(lvlv);

    //用class构造
        class ren1{
    
    
            //构造方法，名字不能修改
            constructor(name,age){
    
    
                this.name =name;
                this.age = age;
            }
            //方法必须使用该语法，不能使用es5的对象完整形式
            play(){
    
    
                console.log("我喜欢玩水");
            }
        }
        let hong = new ren1('红红','20');
        console.log(hong);

结果：
在这里插入图片描述

3.1 class里的static

对于class里面static标注的属性和方法属于类，而不属于实例对象。

//class的静态成员
        class ren{
    
    
            //静态属性
            static name = '名字';
            static play(){
    
    
                console.log("我喜欢玩火");
            }
        }

        let hong = new ren();
        console.log(hong.name);  //undefined
        console.log(ren.name);   //名字

3.2class 的类继承

用extends继承父类，super调用父类的构造方法

//定义父类
        class TV{
    
    
            //构造方法
            constructor(brand,price){
    
    
                this.brand = brand;
                this.price = price;
            }
            //父类的成员属性
            look(){
    
    
                console.log("看电视咯");
            }
        }
        //定义子类----用extends去继承父类
        class netTV extends TV{
    
    
            //构造方法
            constructor(brand,price,color,size){
    
    
                super(brand,price);//TV.look(this,brand,price)
                this.color = color;
                this.size = size;
            }
            watch(){
    
    
                console.log("快来快来看电视");
            }
            play(){
    
    
                console.log("快来快来玩游戏");
            }
            look(){
    
    
                super.look();  //可以使用super去调用
                console.log("不想看电视");
            }
        }
        //构造实例化对象
        const changhong = new netTV('长虹',2999,'蓝色','68寸');
        console.log(changhong);
		changhong.look()  //调的是子类里面的方法

子类对父类方法的重写：就是在子类里面定义和父类名字一样的方法。但是子类不能直接去调用父类里面的方法。

3.3 class的get和set的使用

get和set就是用来对对象的属性进行方法的绑定。

get：添加get方法，当对某个属性进行获取时，去执行get对应的函数。get通常对对象的动态属性进行封装，就是这个属性是变化的。

set：当对某个属性进行设置时，去执行set函数里面对应的代码。对于set可以添加更多的控制和判断

//get和set
        class book{
    
    
            get author(){
    
    
                console.log("作者信息已被读取");
                return '是个名人';
            } 

            set author(val){
    
        //set要传参
                console.log("作者信息被修改了");
            }
        }
        //实例化对象
        let h = new book();
        console.log(h.author); //读取实例对象的author属性，就会执行get函数里面的代码，并且这个函数里面的返回值就是这个属性的值
        s.price = 'free';  //进行赋值时会执行set

读取实例对象的author属性，就会执行get函数里面的代码，并且这个函数里面的返回值就是这个属性的值