技術標籤：前端es6javascript前端

一、集合介紹與API

1.1 Set

Set（集合）是es6提供的新的資料結構。類似於陣列，但成員的值都是唯一的，集合實現了Iterator介面，所以可以使用擴充套件運算子和for...of...進行遍歷。

結合的屬性和方法：

1. size：返回集合的元素個數
2. add：增加一個新元素，返回當前集合
3. delete：刪除元素，返回Boolean值
4. has：檢測集合中是否包含某個元素，返回Boolean值
5. 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的屬性和方法：

1. size：返回Map的元素個數
2. set：增加一個新的元素，返回當前Map
3. get：返回鍵名物件的鍵值
4. has：檢測Map中是否包含某個元素，返回Boolean值
5. 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寫法只是讓物件原型的寫法更加清晰、更像面向物件程式設計的語法而已。

知識點：

1. class宣告類
2. constructor定義建構函式初始化
3. extends繼承父類
4. super呼叫父級構造方法
5. static定義靜態方法和屬性
6. 父類方法可以重寫

例子：建構函式，例項化物件

//用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函式裡面的程式碼，並且這個函式裡面的返回值就是這個屬性的值