ES6~ES11新特性：Set，Map与class

一.Set

Set（集合），它类似于数组，但成员的值都是唯一的，还实现了Iterator接口

1.介绍

声明方式：let 名 = new Set();

        let s = new Set();

还可以对其进行赋初值

        let s2 = new Set(['a1','a2','a3','a4','a2']);

输出一下s2

        console.log(s2);

可见集合可以自动去重

2.属性与方法

• 元素个数：size

		console.log(s2.size)

• 添加新的元素：.add()

        s2.add("a5")
        console.log(s2)

• 删除元素：.delete()

        s2.delete("a1")
        console.log(s2)

• 检测元素是否存在：.has()

        console.log(s2.has('a2'))

• 清空所有元素：.clear()

        s2.clear()
        console.log(s2)

• 遍历

拥有接口，可以用for…of来遍历Set

        let s3 = new Set(['b1','b2','b3','b4','b2']);
        for(let v of s3){
            console.log(v)
        }

3.实践

创建一个数组

        let arr = [1,2,3,4,5,4,3,2,1]

• 数组去重

        let result1 = [...new Set(arr)]
        console.log(result1)

new Set(arr) 可将其转为集合，而且里面元素是不重复的，而扩展运算符 … 可以将伪数组转为数组

• 交集

        let arr2 = [4,5,6,5,6];
        let result1 = [...new Set(arr)]
        let result2 = new Set(arr2)
        let result3 = result1.filter(item =>{
            if(result2.has(item)){
                return true
            }else{
                return false
            }
        })
        console.log(result3)

• 并集

        let result4 =[...new Set([...arr, ...arr2])]
        console.log(result4)

这里运用到了扩展运算符的知识，有不了解的可以去看我的这篇博客>-<

二.Map

ES6也提供了Map数据结构，它类似于对象，也是键值对的集合（但是键的范围不限于字符串），也实现了iterator接口

1.介绍

声明方式：let 名 = new Map();

        let m = new Map();

2.属性和方法

• 添加元素：.set(“键名”,“键值”)

        m.set('name','111')
        console.log(m)

---

        m.set('add', function(){
            console.log('学生')
        })
        console.log(m)

---

        let key = {
            sex:'男'
        }
        m.set(key, ['男','女'])
        console.log(m)

• 获取Map个数：.size

console.log(m.size)

• 删除元素：.delete(‘键名’)

        m.delete('name')
        console.log(m)

• 获取值：.get(键名)

        console.log(m.get('add'))
        console.log(m.get(key))

• 遍历

       for(let v of m){
            console.log(v)
        }

• 清空：.clear()

m.clear();

三.class

基本上ES6的class可以看做一个语法糖，绝大部分功能ES5都可以做到

1.介绍

• ES5

        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        Phone.prototype.c = function(){
            console.log('打电话')
        }

        let n = new Phone('小米','4000');
        n.c();
        console.log(n)

• ES6

        class Phone{
            // 构造方法 名字不能修改
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }

            // 方法必须使用该语法 不能用ES5的方法
            c(){
                console.log('打电话')
            }
        }

        // 当我们new的时候会自动执行constructor方法
        let n = new Phone('iPhone','6000');
        n.c();
        console.log(n)

2.静态成员

静态属性和方法是从一个实例到另一个实例都不会发生改变的属性或者方法，是属于类的，而不是属于实例的

• ES5

       function Phone(){

        }
        // 不可调用，是属于函数对象的，被称为静态成员
        Phone.name='手机';
        Phone.use = function(){
            console.log('打电话')
        }

        // 不属于这个实例对象
        let c = new Phone();
        console.log(c.name)      //不可调用的
        console.log(c.use())

可见静态成员不可被调用

• ES6

        class Phone{
            // 静态成员，和java一样
            static name = '手机'
            static use(){
                console.log('打电话')
            }
        }

        let c = new Phone();
        console.log(c.name)
        console.log(Phone.name)

是属于类的，而不是属于实例的

3.继承与重写

继承是面向对象软件技术当中的一个概念，与多态、封装共为面向对象的三个基本特征。继承可以使得子类具有父类的属性和方法或者重新定义、追加属性和方法等。

• ES5

我们先定义一个函数

        function Phone(brand, price){
            this.brand = brand;
            this.price = price;
        }

        Phone.prototype.c = function(){
            console.log('打电话')
        }

继承

        function SmartPhone(brand, price, wx, qq){
            // 继承
            Phone.call(this, brand, price)
            this.wx = wx;
            this.qq = qq;
        }
            // 设置子级构造函数的原型
            SmartPhone.prototype = new Phone

            // 声明子类的方法
            SmartPhone.prototype.w = function(){
                console.log("发微信")
            }

我们来调用一下子类的方法

       const shouji = new SmartPhone("1","2","3","4");
        console.log(shouji)

• ES6

在ES6中引入了类的概念

我们先创建一个class类

        class Phone{
            // 构造方法
            constructor(brand, price){
                this.brand = brand;
                this.price = price;
            }
            // 成员属性
            call(){
                console.log("我可以打电话")
            }
        }

继承
格式：class 子类名 extends 父类名

        class SmartPhone extends Phone{
            // 构造方法
            constructor(brand, price, wx, qq){
                super(brand, price)
                this.wx = wx;
                this.qq = qq;
            }

            wx(){
                console.log("发微信")
            }

            // 方法的重写
            call(){
                console.log("我可以视频通话")
            }
        }

重写是子类对父类的允许访问的方法的实现过程进行重新编写, 返回值和形参都不能变

我们来调用一下子类的方法

        let shouji = new SmartPhone('1','2','3','4')
        console.log(shouji)
        shouji.call();
        shouji.w();

4.get和set

创建一个类

        class Phone{
            get price(){
                console.log("价格属性被读取了")
                return 'iloveyou'
            }

            set price(newVal){
                console.log("价格属性被修改了")
            } 
        }

实例化对象

        let s = new Phone();

        // 只要读取了实例对象的price属性，就会执行 get 函数里面的代码
        s.price
        
        // 函数里面的返回值就是属性里的值
        console.log(s.price)

        // 当你对price属性进行赋值的时候就会调用 set 函数
        s.price='free'

选集为：30，31，32，33，34，35，36，37，38