Set(集合)

• ES6提供了新的數據結構Set(集合)。
• 類似于數組，但是成員的值都是唯一的
• 集合實現了iterator接口，所以可以使用擴展運算符和for…of進行遍歷
• 申明一個Set語法:let s = new Set();
• 使用typeof類型檢測返回一個object
• 可以在申明時，為Set集合中傳入一個可迭代的參數，例如數組。let s= new Set([1,2,3,4]);,其中會自動進行去重操作

常用的屬性和方法

size

• 該屬性會返回集合的元素個數

let s = new Set(["江流", "江流", "心猿", "心猿",
 "木龍", "木龍"]);//集合會自動去重操作
console.log(s);
console.log(s.size);//3

add()

• 該方法可以為集合增加一個新元素，返回到當前集合

let s = new Set(["江流", "江流", "心猿", "心猿", "木龍", "木龍"]);//集合會自動去重操作
s.add("刀圭");
s.add("意馬");
console.log(s);//'江流', '心猿', '木龍', '刀圭', '意馬'

delete()

• 該方法可以刪除一個指定元素，返回boolean值

let s = new Set(["江流", "心猿", "木龍", "意馬"]);//集合會自動去重操作
s.delete("木龍")
console.log(s);//"江流", "心猿", "意馬"

has()

• 該方法檢測集合中是否包含某個元素，返回boolean值

let s = new Set(["江流", "心猿", "木龍", "意馬"]);//集合會自動去重操作
console.log(s.has("心猿"));//true
console.log(s.has("刀圭"));//false

clear()

• 該方法可以清空一個集合

let s = new Set(["江流", "心猿", "木龍", "意馬"]);//集合會自動去重操作
s.clear();
console.log(s);

for…of遍歷

let s = new Set(["江流", "心猿", "木龍", "意馬"]);//集合會自動去重操作

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

Set 實踐

數組去重

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

// 數組去重
let result = [...new Set(arr)];
console.log(result);//[1, 2, 3, 4, 5]

交集A ∩ B

let arr1 = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let arr2 = [4, 5, 6, 5, 6]
// 交集
let s2 = new Set(arr2);
let result = [...new Set(arr1)].filter(item =>s2.has(item));
console.log(result);//[ 4, 5 ]

并集A U B

let arr1 = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let arr2 = [4, 5, 6, 5, 6]
// 并集
let union = [...new Set([...arr1, ...arr2])];
console.log(union);//[ 1, 2, 3, 4, 5, 6 ]

差集A - B

let arr1 = [1, 2, 3, 4, 5, 4, 3, 2, 1];
let arr2 = [4, 5, 6, 5, 6]
// 交集 arr1 - arr2
let s2 = new Set(arr2);
let result = [...new Set(arr1)].filter(item =>!s2.has(item));
console.log(result);//[ 1, 2, 3 ]

Map

• ES6提供了Map數據結構。它類似于對象，也是鍵值對的集合。
• 但是鍵的范圍不限于字符串，各類數據的值（包括對象）都可以當作鍵。
• Map也實現了iterator接口，所以可以使用擴展運算符和**for…of…**進行遍歷。

Map常用屬性和方法

size

• 該屬性返回Map的元素個數

set()

• 該方法可以增加一個新元素，返回當前Map，鍵的范圍不限于字符串，各類數據的值（包括對象）都可以當作鍵。

// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流兒");

m.set("fun", function(){
    console.log("馬少爺！您真有錢！！");
});

// 申明一個對象
let key = {name:"江流"};

m.set(key, ["心猿", "木龍", "意馬"])

console.log(m);

get()

• 返回鍵名對象的鍵值

// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流兒");

m.set("fun", function(){
    console.log("馬少爺！您真有錢！！");
});

// 申明一個對象
let key = {name:"江流"};

m.set(key, ["心猿", "木龍", "意馬"])

// 獲取
console.log(m.get('name'));//江流兒

delete()

• 該方法可以刪除一個鍵值

// 申明Map
let m = new Map();
// 添加元素
m.set("name","江流兒");
m.set("fun", function(){
    console.log("馬少爺！您真有錢！！");
});
// 申明一個對象
let key = {name:"江流"};
m.set(key, ["心猿", "木龍", "意馬"])

// 刪除
m.delete('name')
console.log(m);

has()

• 檢測Map中是否包含某個元素，返回boolean值

// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流兒");

m.set("fun", function(){
    console.log("馬少爺！您真有錢！！");
});

// 申明一個對象
let key = {name:"江流"};

m.set(key, ["心猿", "木龍", "意馬"])



console.log(m.has('name'));//ture

clear()

• 清空集合，返回undefined

// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流兒");

m.set("fun", function(){
    console.log("馬少爺！您真有錢！！");
});

// 申明一個對象
let key = {name:"江流"};

m.set(key, ["心猿", "木龍", "意馬"])


// 清空
m.clear();
console.log(m);

for…of遍歷

// 申明Map
let m = new Map();

// 添加元素
m.set("name","江流兒");

m.set("fun", function(){
    console.log("馬少爺！您真有錢！！");
});

// 申明一個對象
let key = {name:"江流"};

m.set(key, ["心猿", "木龍", "意馬"])

// 遍歷
for(let v of m)
{
    console.log(v);
}

class類

• ES6引入了Class(類)這個概念，作為對象的模板。
• 通過class關鍵字，可以定義類
• 新的class寫法可以讓對象原型的寫法更加清晰、更加像面向對象編程的語法

class申明類

ES5創建類的寫法

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

// 添加方法
Phone.prototype.call  = function(){
    console.log("我可以打電話！");
}
// 實例化對象
let Xiaomi = new Phone("小米", 3999);
Xiaomi.call();
console.log(Xiaomi);

ES6使用class創建類的寫法：

/*/ 手機
function Phone(brand, price)
{
    this.brand = brand;
    this.price = price;
}

// 添加方法
Phone.prototype.call  = function(){
    console.log("我可以打電話！");
}
// 實例化對象
let Xiaomi = new Phone("小米", 3999);
Xiaomi.call();
console.log(Xiaomi);

*/

class Phone{
    // 構造方法
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }
    // 方法必須使用該語法，不能使用ES5的對象完整形式
    call(){
        console.log("我可以打電話！！");
    }
}

let HUAWEI = new Phone("HUAWEI", 4999);
console.log(HUAWEI);

static 定義靜態方法和屬性

• 靜態成員是構造函數本身的屬性和方法
• 不能被實例化的對象直接訪問

ES5中添加靜態成員的寫法

// 手機
function Phone()
{

}
// ES5添加靜態成員
Phone.name = "手機";
Phone.change = function(){
    console.log("熱愛自己，熱愛生活！");
}
// 實例化對象
let Xiaomi = new Phone();
console.log(Xiaomi.name);//undefined

ES6中添加靜態成員的寫法

class Phone{
    // 靜態成員
    static name = "手機";
    static change(){
        console.log("熱愛自己，熱愛生活！");
    }
}
// 實例化對象
let HUAWEI = new Phone();
console.log(HUAWEI.name);//undefined

extends繼承父類

如果對ES5繼承不清楚的話，可以看看我之前的博客：https://blog.csdn.net/weixin_45660621/article/details/121423001?spm=1001.2014.3001.5501

ES6中繼承

// 定義父類
class Phone{
    constructor(brand, price){
        this.brand = brand;
        this.price = price;
    }
    // 父類成員方法
    call(){
        console.log("我可以打電話！！");
    }
}
// 定義子類
class SmartPhone extends Phone{
    //構造方法
    constructor(brand, price, color, size)
    {
        super(brand, price);//基礎父類的屬性
        this.color = color;
        this.size = size;
    }
    photo(){
        console.log("拍出你的美！");
    }
    playGame(){
        console.log("支持國內高幀率游戲");
    }
}

const Xiaomi = new SmartPhone("小米", "3999", "珍珠白","4.7")
console.log(Xiaomi);
Xiaomi.call();//調用父類的方法
Xiaomi.photo();//調用子類的方法
Xiaomi.playGame();

getter和setter

• ES6支持通過getter、setter在原型上定義屬性。
• 創建getter的時候需要用關鍵字get;創建setter的時候需要用關鍵字set。
• 通過該方法可以到達動態修改實例的屬性值。

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
    get name() {
        return this._name
    }
    set name(newName) {
        this._name = newName
    }
    get age() {
        return this._age;
    }
    set age(newValue) {
        this._age = newValue
    }
}

let p = new Person('張三', 20);
console.log("修改前：", p.name + ":" + p.age);
//動態修改年齡和姓名
p._age = 16;
p._name = "李四";
console.log("動態修改后：", p.name + ":" + p.age);