ES6-set集合-Map-class类

一、set

ES6提供了新的数据结构set（集合）。类似于数据，但是成员的值都是唯一的，集合实现了iterator接口，所以可以使用扩展运算符和for…of进行遍历。
集合的属性和方法：
（1）size：返回集合的元素个数
（2）add：增加一个新元素，返回当前集合
（3）delete：删除元素，返回boolean值
（4）has：检测集合中是否包含某个元素，返回boolean值

  let s=new Set(['aa','bb','cc','aa']);
         
        console.log(s);//会自动去重，只显示aa，bb，cc
        //查看集合的个数
        console.log(s.size);//3
        //添加新元素
        s.add('dd');
        console.log(s);//aa,bb,cc,dd
        //删除元素
        s.delete('aa');
        console.log(s);//bb,cc,dd
       //检测是否含有某元素
        
        console.log(s.has('aa'));//false
        //清空
        s.clear();
        console.log(s);

遍历集合：

 for(let v of s){
            console.log(v);
        }

二、set集合实践

1. 数组去重：

const name=[1,2,3,4,5,6,4,3,2,1]
    let result=[...new Set(name)];//将集合变为数组
        console.log(result);

2. 交集

 const arrs=[1,2,3,6,7,5,8,9];
  
 let result=[...new Set(arr)].filter(items=>{
       let nArrs=new Set(arrs);
       if(nArrs.has(items)){
           return true;
       }else{
           return false;
       }
    });

    //简化写法
    let result=[...new Set(arr)].filter(items=>new Set(arrs).has(items))
    console.log(result);

4. 并集

 const arr=[1,2,3,4];
    const arrs=[5,6,4,3,2,1];
    let result=arr.concat(arrs);
    result=[...new Set(result)];
    console.log(result);

5. 差集

//arr与arrs计算差集
     const arr=[1,2,3,4,7];
     const arrs=[5,6,4,3,2,1];
     let result=[...new Set(arr)].filter(items=>{
         let nArrs=new Set(arrs);
         if(!(nArrs.has(items))){
             return true;
         }else{
            return false;
         }
     });
     console.log(result)//7
    //arrs与arr计算差集
     let diff=[...new Set(arrs)].filter(items=>(!(new Set(arr)).has(items)))
     console.log(diff);//5,6

三、Map

ES6提供了Map数据结构。它类似于对象，也是键值对的集合。但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当做键。Map实现了Iterator接口，可以使用扩展运算符和for…of遍历。
Map的属性和方法：
（1）size：返回Map的元素个数
（2）set：增加一个新元素，返回当前Map
（3）get：返回键名对象的键值
（4）has：检测Map中是否包含某个元素，返回boolean值
（5）clear：清空，返回undefined

添加
 let m=new Map();
        m.set('name','lili');
        m.set('age',22);
        m.set('sayName',function(){
            console.log("hello")
        });
         let key={
          school:'武汉'
        }
        m.set('key',['长沙','上海'])
        console.log(m);
//可以添加一个对象作为键名     
//get方法
console.log(m.get('name'));

//has方法
console.log(m.has('name'));

//delete方法
console.log(m.delete('name'));

//遍历
 for(let x of m){
            console.log(x);
        }

四、Class类

（1）class声明类

（2）constructor定义构造函数初始化

class Phone{
          //构造方法，constructor名字不能修改
            constructor(name,price){
                this.name=name;
                this.price=price;
            }
          //添加方法,方法必须使用以下这种语法形式
            call(){
                console.log('我可以打电话')
            }
        }
        //实例化
        let p=new Phone('oppo',2345);
        console.log(p);
        p.call();

（3）static定义静态方法和属性

ES5静态成员：
实例对象p的属性只跟构造函数Phone原型对象是相通的。
name是属于函数对象Phone的，并不属于实例对象p的，这样的属性就是静态成员。name是属于Phone类的，而不是实例对象的。

 function Phone(){
        }
        Phone.name='手机';
        let p=new Phone();
        
        console.log(p.name);//undefined
        
 Phone.prototype.name='手机';
 console.log(p.name);//手机      

静态成员的属性和方法只有构造函数可以调用，实例化对象不能。

 class Phone{
            static name='手机'
            static call(){
                console.log('我可以打电话')
            }
        }
        //实例化
        let p=new Phone();
        console.log(p.name);//undefined
        console.log(Phone.name);//手机

（4）extends继承父类

ES5构造函数实现继承：

 //手机父类
        function Phone(name,price){
           this.name=name;
           this.price=price;
        }
        //添加方法：
        Phone.prototype.call=function(){
            console.log('我可以打电话');
        }
        //子级智能手机
        function SmartPhone(name,price,color,size){
          Phone.call(this,name,price);//调用Phone的name、price并作用于smartPhone，smartPhone继承了Phone
          this.color=color;
          this.size=size;
        }
        
        //设置子级构造函数的原型为Phone类的一个实例
        SmartPhone.prototype=new Phone();//此时 SmartPhone.prototype 中的 constructor 被重写了
      
        SmartPhone.prototype.constructor=SmartPhone;//将SmartPhone原型对象中的constructor重新指向了SmartPhone本身

        //添加SmartPhone的方法
        SmartPhone.prototype.game=function(){
            console.log('我可以打游戏');
        }
        //实例化
        const sp=new SmartPhone('oppo',2390,'黑色',5.5)
        console.log(sp);
        

（5）super调用父级构造方法

ES6构造方法实现继承

<script>
        class Phone{
            //构造方法
            constructor(name,price){
                this.name=name;
                this.price=price;
            }
            //父类的成员变量
            call(){
                console.log("我可以打电话");
            }
        }

        class SmartPhone extends Phone{
            //构造方法
            constructor(name,price,color,size){
              super(name,price);//super就是父类的contructor方法，Phone.call(this,name,price);
              this.color=color;
              this.size=size;
            }
            //方法：
            game(){
                console.log("我可以玩游戏");
            }
        }
        //实例化一个对象
        const sj=new SmartPhone("vivo",2345,'白色',4);
        console.log(sj);
        
    </script>

（6）父类方法可以重写

在子类定义一个与父类同名的方法，调用时会调用子类中的那个方法

（7）get与set

 <script>
        class Phone{
            //get通常对对象的动态属性作封装
            get name(){
                console.log('我是名字是oppo');
                return 'hello'
            }
            set name(newValue){
                console.log(newValue)//11
            }
        }
        const p=new Phone();
        console.log(p.name);//hello
        p.name;//我是名字是oppo

        p.name='11'
    </script>