ES6 -Set和Map数据结构

---

Set数据结构

---

1.set数据结构基本用法。
ES6 提供了一个新的数据结构–set，它类似于数组，但是成员的值都是唯一的，没有重复。

• Set 本身是一个构造函数，用来生成Set数据结构

 //1
        const s = new Set();

        [2,3,4,5,4,2,2].forEach(x => s.add(x));
        for(let i of s){
            console.log(i)  // 2  3  4  5
        }

        console.log(s);  //Set(4) {2, 3, 4, 5}

        //上面的代码通过add方法向Set结构加入成员，结构表明set结构不会添加重复的值。

• 通过add方法向Set实例添加成员，通过size返回set成员数

 //2
        //通过add方法向Set实例添加成员

        let set1 = new Set();
        set1.add(2);
        console.log(set1);
        console.log(set1.size)
        //Set(1) {2}
        //1
        // set实例通过size方法得到实例成员的个数，而不是length

• Set函数可以接受一个数组作为参数，用来初始化。

const set = new Set([1,2,3,4,4,4,5,6,6]);
        [...set]
        //[1, 2, 3, 4, 5, 6]
        console.log(set.size);  //6

• 向set添加值时不会发生类型转换,set内部判断两个值的时严格相等的。

let set2 = new Set();
        set2.add(NaN);
        set2.add(NaN);

        console.log(set2,set2.size);
        //Set(1) {NaN} 1
        //由此可以得出 set数据结构认为 NaN等于NaN

        //但是两对象是永远不相等的

        let set3 = new Set();
        set3.add({});
        set3.add({});

        console.log(set3,set3.size);
        //Set(2) {{…}, {…}}[[Entries]]0: Objectvalue: {}1: Objectsize: (...)__proto__: Set 2

2.set实例的属性和方法

• Set.prototype.constructor: 构造函数,默认就是Set函数

• Set.prototype.size: 返回Set实例的成员总数

• Set实例的操作方法

    	1.add(value) : 添加某个值，返回set结构本身
  

 let s = new Set();
        s.add(2).add(2).add(1).add(3);
        //Set(2) {2, 1, 3}

		2.delete(value) 删除某个值，返回一个布尔值，表示是否删除成功

 console.log(s.delete(2));  
        //true

		3.has(value):返回一个布尔值，表示参数是否为Set的成员

		s.has(1);   //true
        s.has(2);   //false
        s.has(3);   //true

		4.clear(value)  : 清楚set所有成员

• Set实例有4个遍历方法，可以用于遍历成员

let set2 = new Set(['red','green','blue']);
                

        //+ keys(): 返回键名的遍历器
        for(let i of set2.keys()){
            // console.log(i);  red  green  blue
        }

        //+ values(): 返回键值的遍历器
        for(let a of set2.values()){
            // console.log(a);  red  green  blue
        }

        //由于set结构没有键名,所以说键名和键值是同一个值

        //+ entries()
        for(let b of set2.entries()){
            console.log(b);
            //(2) ["red", "red"]
            //(2) ["green", "green"]
            //(2) ["blue", "blue"]
        }

3.set结构的一些高级应用

• 因为set结构的实例默认可以建立，遍历器生成函数就是他的values方法，所以可以直接用for…of方法循环遍历Set

    Set.prototype[Symbol.iterator] === Set.prototype.values

 {
            let set2 = new Set(['red', 'green', 'blue']);
            for (let x of set2) {
            // console.log(x);  
            //red green blue
            }
        }

• forEach() 对set结构的每个成员执行某种操作，没有返回值

 new Set([1, 2, 3, 4, 5]).forEach((key, value) => {
            console.log(value * 2) //2 4 6 8 10
        })

• 扩展运算符内部也使用for…of循环，所以也就而已用于set结构

{
            let set2 = new Set(['red', 'green', 'blue']);
            let arr = [...set2];
            console.log(arr);
            // ["red", "green", "blue"]
        }

• 数组去重

 {
            let arr = [1,2,3,2,1,4,6,7,4,6,5];
            let newArray = [...new Set(arr)];
            console.log(newArray)
            // (7) [1, 2, 3, 4, 6, 7, 5]
        }

• 数组去重 Array.from()

 {
            function dedupe(arr){
                return Array.from(new Set(arr));
            }
            let arr = [1,2,3,2,1,4,6,7,4,6,5];
            console.log(dedupe(arr));
            // (7) [1, 2, 3, 4, 6, 7, 5]
        }

---

map数据结构

---

1.map数据结构的基本。

• javascript的对象本质上是键值对的集合(Hash结构)，但是局限于只能用字符串作为键名

    书上的一个例子
    const data = {};
    const element = document.getElementById('mydiv')[0];
    data[element] = 'metadata';
    data['[Object HTMLDivElement]']  //'metadata'
  
    上面的代码想要将一个DOM节点作为对象data的键，但是由于对象只接受字符串作为键名，所以被转换为了字符串
  
    map结构类似于对象  Object  ‘字符串-值’的对应   Map  ‘值-值’的对应
  
    map也是构造函数
  

• 简单操作

		const m = new Map();
        const o = {p:'hello world'};

        m.set(o,'content');
        console.log(m.get(o));   //content
        console.log(m.has(o));   //true
        console.log(m.delete(o));   //true
        console.log(m.has(o));    //false

上面使用Map结构的set方法，将对象o作为m的一个键，然后使用get读取这个键，接着使用delete删除这个键。

• Map也可以接受一个数组作为参数，该数组的成员是一个个表示键值对的数组

const map = new Map([
            ['name','康家豪'],
            ['age','20']
        ])

         console.log(map.size)  //2
        console.log(map.has('name'));  //true
        console.log(map.get('name'));   //康家豪
        console.log(map.has('age'));    //true
        console.log(map.get('age'));    //20

• 同样的值的两个实例在Map结构中被视为两个键

const map3 = new Map();
        const k1 = ['a'];
        const k2 = ['a'];
        map
            .set(k1,111)
            .set(k2,222)

        // console.log(map.get(k1));  111
        // console.log(map.get(k2));  222

• Map内部判断两个数相等类似于Object.is()
  2.实例的属性和操作方法。

        const map4 = new Map();
        
        //1.size属性返回Map结构的成员数
        map4.size;  //0

        //2.set(key,value)  可以使用链式写法
        map4
            .set('one',1)
            .set('two',2)
            .set('three',3)
        
        console.log(map4,map4.size)
        //Map(3) {"one" => 1, "two" => 2, "three" => 3} 3

        //3.get(key)读取当前的键值
        console.log(map4.get('one'));  // 1
        console.log(map4.get('two'));  // 2


        //4.has(key) 返回一个布尔值，表示某个键是否在Map数据结构中
        console.log(map4.has('one'));   //true
        console.log(map4.has('four'));  //false

        //5.delete(key) 删除某个键，返回true  删除失败 返回false
        console.log(map4.delete('one')); //false
        //6.clear  清楚所有成员，没有返回值

        map4.clear();

3.实例的遍历方法。

map 结构的遍历方法
         + keys(): 返回键名的遍历器
         + values(): 返回键值的遍历器
         + entires(): 返回所有成员的遍历器
         + forEach(): 遍历Map的所有成员
        let map = new Map();
        map
            .set('one','1')
            .set('two','2')
            .set('three','3')
        
        for(let a of map.keys()){
            console.log(a)    // one  two  three
        }
        console.log('_____________________________')
       
        for(let b of map.values()){
            console.log(b)   // 1  2  3 
        }
        console.log('_____________________________')
       
        for(let c of map.entries()){
            console.log(c);
            //["one", "1"]
            //["two", "2"]
            //["three",'3']
        }
        

4.map的高级用法

• map的结构默认遍历器接口就是entries方法

map[Symbol,iterator] === map.entries


所以：这样等同于使用map.entries()
let map = new Map();
        map
            .set('one','1')
            .set('two','2')
            .set('three','3')
        for(let [key, value] of map){
            console.log(key, value)
            //one 1
            //two 2
            //three 3
        }

• 结合扩展运算符可以将map数据结构转换为数组

 let map = new Map();
        map
            .set('one','1')
            .set('two','2')
            .set('three','3')
       console.log([...map]);
       //(3) [Array(2), Array(2), Array(2)]

• 结合扩展运算符可以使用filter,map等方法。
  5.map数据结构和其他数据结构的互相转换。
• Map转化为数组（使用拓展运算符）

       let map = new Map();
        map
            .set('one','1')
            .set('two','2')
            .set('three','3')
       console.log([...map]);
       //(3) [Array(2), Array(2), Array(2)]

• 数组转换为map

 let arr = [1,2,3,4,5]
        let map0 = new Map([
            [true,7],
            [{foo:3},['abc']]
        ]);
        console.log(map0);
        //Map(2)

• map转换为对象（map的所有键都必须为字符串）

function strMapToObj(strMap){
            let obj = Object.create(null);
            for(let [k,v] of strMap){
                obj[k] = v
            }
            return obj;
        }

        const myMap = new Map();
        myMap
            .set('one',1)
            .set('two',2)

        // console.log(strMapToObj(myMap));
        //{one: 1, two: 2}

• 对象转换为map结构

 function ObjToMap(obj){
            let map2 = new Map()
            for(let k of Object.keys(obj)){
                map2
                    .set(k, obj[k]);
            }
            return map2;
        }
        const Object2 = {
            name:'kjh',
            age:20
        }
        // console.log(ObjToMap(Object2));
        //Map(2) {"name" => "kjh", "age" => 20}

• Map转换为JSON

• 对象JSON

//如果Map的键名都是字符串，这是可以选择转换为对象JSON
        // 先将Map转换为对象，之后再转换为JSON

        function strMapTOJson(strMap) {
            function strMapToObj(strMap) {
                let obj = Object.create(null);
                for (let [k, v] of strMap) {
                    obj[k] = v;
                }
                return obj;
            }
            return JSON.stringify(strMapToObj(strMap))
        }

        let strMap = new Map();
        strMap
            .set('one', 1)
            .set('two', 2)
        console.log(strMapTOJson(strMap)); //{"one":1,"two":2}
        var obj = strMapTOJson(strMap);

• 数组json

 //如果Map中有数组，则转换为数组JSON
        //先将Map转换为数组，再转换为JSON
        function arrMapToJson(strMap2) {
            return JSON.stringify(...strMap2)
        }
        const strMap2 = new Map();
        strMap2.set([
            ['name', '康家豪'],
            ['home', '宝鸡']
        ])
        console.log(arrMapToJson(strMap2));
        //[[["name","康家豪"],["home","宝鸡"]],null]