Map数据结构

一、作用

　　1、Object 的 键的只能是字符串，Map可以解决这一问题，键不限类型。

二、特点

　　一个键（内存地址相同，才视为同一个键）多次赋值，后面的值将覆盖前面的值

三、语法

　　1、新建： new Map( [Iterator] ) 

　　2、属性

　　　　（1）size 

　　3、实例方法：

　　　　（1）get(key) : 获取键值，如果没有返回undefined

　　　　（2）set(key, value)  : 返回整个Map结构

　　　　（3）has（key） :  返回布尔值

　　　　（4）delete（key） ：  删除，返回布尔值（只有存在才会删除成功）

　　　　（5）clear（） ： 清空

        const map = new Map([['name','小白'],[1,'Number']]);

        console.log(map.size);    //2
        console.log(map.get(1));  //Number

        map.set([0],111);
        map.set([0],222);
        console.log(map.get([0]));    //undefined

        let str1 = [0];
        let str2 = [0];
        map.set(str1,333);
        map.set(str2,444);
        map.set(str2,555);
        console.log(map.get(str1));   //333
        console.log(map.get(str2));   //555

        if(map.has('name')){
            map.delete('name');
        }
        
        console.dir(map);   //Map(5)
        map.clear();
        console.dir(map);   //Map(0)

 

       4、遍历方法

　　　　（1）keys(  )   ：  返回键名的遍历器

　　　　（2）values（）： 返回键值的遍历器

　　　　（3）entries（）： 返回所有成员的遍历器

　　　　（4）forEach（）：遍历Map的所有成员

　　　　（5）扩展运算符 ...  ： 可以转化为数组，调用数组的方法

        const map = new Map([['name','小白'],[1,'Number'],['a','String'],[true,'Boolean']]);
        console.log([...map.keys()]);  //["name", 1, "a", true]
        map.set('add','addvalue');
        console.log([...map.values()]);  //["小白", "Number", "String", "Boolean", "addvalue"]
        //过滤
        const newMap = new Map([...map].filter(([key,value]) => {
            if(typeof(key) == 'number'){
                return [key,value];
            }
        }));
        console.log(newMap);    //Map(1) {1 => "Number"}

 

　　　　注： keys()  values() 和 entries()都是返回遍历器，还要搭配 for.... of   , 而Map本身就可以调用遍历器的方法， 所以这三个方法的使用，意义不大　

const map = new Map([['name','小白'],[1,'Number'],['a','String'],[true,'Boolean']]);
        const obj = {'key': 12, 'value': 'abc'};
        map.set(obj,'Object');
        for(let key of map.keys()){
            console.log(key);   //name 1 a true {key: 12, value: "abc"}
        }
        console.dir('....................');
        for(let value of map.values()){
            console.log(value);     //小白 Number String Boolean Object
        }
        console.dir('....................');
        for(let [key,value] of map.entries()){
            console.dir(key);   //name 1 a true {key: 12, value: "abc"}
            console.dir(value);     //小白 Number String Boolean Object
        }
        console.dir('....................');

        //相当于
        for(let [key,value] of map){
            console.dir(`${key}-----${value}`);     //name-----小白    1-----Number     a-----String    true-----Boolean   [object Object]-----Object
        }

        console.dir('....................');
        map.forEach((item,index) => {
            console.dir(`${item}-----${index}`);
            //  小白-----name     Number-----1     String-----a      Boolean-----true       Object-----[object Object]  
        });

5.常见数据类型的相互转化

　　（1）Array  < ------> Map

//Array 转化为 Map
       const arr = [1,'a'];
       const arrMap = new Map([arr,[2,'b']]);
       console.log(arrMap);     //Map(2) {1 => "a", 2 => "b"}

       //Map 转化为 Array
       console.dir([...arrMap]);    //[[1,"a"],[2,"b"]]

　　（2）Object   <------->   Map

//Object 转化为 Map
       const obj = {"id":1,"name":"my name is map"};
       //方法一：
       const objMap1 = new Map(Object.entries(obj));
       console.log(objMap1);    // Map(2) {"id" => 1, "name" => "my name is map"}
       //方法二：
       const objMap2 = objectToMap(obj);    
       console.log(objMap2);    // Map(2) {"id" => 1, "name" => "my name is map"}
       function objectToMap(obj){
         const map = new Map();
         for(let key in obj){
            map.set(key,obj[key]);
         }
         return map;
       }

       //Map 转化为 Object
       const mapObj = mapToObject(objMap2);
       console.log(mapObj);     //{id: 1, name: "my name is map"}
       function mapToObject(map){
            const obj = Object.create(null);
            for(let [key,value] of map){
                obj[key] = value;
            }
            return obj;
       }

四、与WeakMap的区别

　　（1）WeakMap的键名只能是对象，且键名所指向的对象，不计入垃圾回收机制

　　（2）WeakMap 没有 size 属性， 没有clear() 方法 ， 没有遍历方法

　　（3）MeakMap的用途：

　　　　1、DOM节点作为键名，不存在内存泄露的风险

　　　　2、部署私有属性