ES6 —— Map与Set

补充：

在介绍Map与Set之前，先了解一个ES6新增的基本数据类型：Symbol。

Symbol是一个内置全局函数，它可以生成一个独一无二的数据。

        let s1 = Symbol(10)
        let s2 = Symbol(10)
        console.log(s1,s2);
        console.log(s1 == s2);

 

Map对象

Map 对象保存键值对。任何值(对象或者原始值) 都可以作为一个键或一个值。

Map和Object的区别:

 - 一个 Object 的键只能是字符串或者 Symbols，但一个 Map 的键可以是任意值。
- Map 中的键值是有序的（FIFO 原则），而添加到对象中的键则不是。
- Map 的键值对个数可以从 size 属性获取，而 Object 的键值对个数只能手动计算。
- Object 都有自己的原型，原型链上的键名有可能和你自己在对象上的设置的键名产生冲突。

1) Map的创建语法

Map中的key值可以是任意类型的数据，

        var a = ["key"]
        var m1 = new Map([["age",21],[2,"abc"],[a,20]]) 
        console.log(m1);

 2) Map的基本操作语法

 （1）对Map对象进行存、取数据 （set和get方法）

        var a = ["key"]
        var m1 = new Map([["age",22],[20,"abc"],[a,20]])
        // 取数据
        var re = m1.get("age")
        var re2 = m1.get(20)
        var re3 = m1.get(a)
        console.log(re,re2,re3);
        // 存数据
        m1.set("life",1)
        m1.set("age",10)
        console.log(m1);

 （2）删除Map对象中的某个数据以及清除所有数据 （delete和clear方法）

        var a = ["key"]
        var m1 = new Map([["age",22],[20,"abc"],[a,20]])
        // 删除某个数据
        m1.delete(20)
        var re = m1.delete("age")
        console.log(re);
        console.log(m1);

        // 清除所有数据
        m1.clear()
        console.log(m1);

ps：delete方法的返回值是boolean 类型的数据：true 或 false

3）Map的迭代：对Map进行遍历

 （1）for...of

        var m1 = new Map();
        m1.set(1, "a");
        m1.set(2, "b");

        for (var [key, value] of m1) {
            console.log(key + ":" + value);
        }

 在for...of循环中也能使用entries方法，然后返回一个新的 Iterator 对象，按插入顺序包含了 Map 对象中每个元素的 [key, value] 数组。

        var m1 = new Map();
        m1.set(1, "a");
        m1.set(2, "b");

        for (var [key, value] of m1.entries()) {
            console.log(key + ":" + value);
        }

除了上述的，还可以使用keys 或values方法返回一个新的 Iterator 对象， 它按插入顺序包含了 Map 对象中每个元素的键或值。

        var m1 = new Map();
        m1.set(1, "a");
        m1.set(2, "b");

        for (var key of m1.keys()) {
            console.log(key);
        }

        
        for (var value of m1.values()) {
            console.log(value);
        }

 （2）forEach()

        var m1 = new Map();
        m1.set(1, "a");
        m1.set(2, "b");

        m1.forEach(function (value, key) {
            console.log(key + ":" + value);
        }, m1)

 

Set对象

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。

Set中的特殊值

Set 对象存储的值总是唯一的，所以需要判断两个值是否恒等。有几个特殊值需要特殊对待：

+0 与 -0 在存储判断唯一性的时候是恒等的，所以不重复；
undefined 与 undefined 是恒等的，所以不重复；
NaN 与 NaN 是不恒等的，但是在 Set 中只能存一个，不重复。

 1）Set的基本语法

（1）对Set对象进行存值操作（ps：当添加的数据相同重复时，只会保存一个。）

        var s1 = new Set() 

        s1.add(10)
        s1.add(10)
        s1.add("abc")
        s1.add([1,2])
        s1.add({name:"xiaozhang"})
        console.log(s1);

 

（2）从Set对象中取出数据时，采用遍历的方式，如使用forEach：

        var s1 = new Set() 

        s1.add(10)
        s1.add(10)
        s1.add("abc")
        s1.add([1,2])
        s1.add({name:"xiaozhang"})

        s1.forEach(function (el) {
            console.log(el);
        })

 2）Set对象的作用

（1）数组去重

            var arr = [1,2,3,3,2,4]
            var s1 = new Set(arr)
            var arr2 = Array.from(s1)
            console.log(arr2);

（2） 并集

        var arr = [10,20,30,40]
        var arr2 = [100,200,10,30]
        var s1 = new Set([...arr,...arr2])
        console.log(s1);

 （3）交集

        var arr = [10,20,30,40]
        var arr2 = [100,200,10,30]
        var s1 = new Set(arr.filter(function (el) {
            if (arr2.includes(el)) {
                return el
            }
        }))
        console.log(s1);

（4） 差集

        var arr = [10,20,30,40]
        var arr2 = [100,200,10,30]
        var s1 = new Set(arr.filter(function (el) {
            if (!arr2.includes(el)) {
                return el
            }
        }))
        console.log(s1);