文章来源于网络收集而来，版权归原创者所有，如有侵权请及时联系！

第十七节：ES6 新增的 Map 和 WeakMap 又是什么东西？

发布于 2022-03-15 13:27:12 字数 8460 浏览 920 评论 0 收藏 0

上节介绍了Set和WeakSet，这节咱就讲Map和WeakMap是什么？当然，两者之前并没什么必然的联系，仅仅是用法类似。

什么是Map

介绍什么是Map，就不得不说起Object对象，我们都知道Object对象是键值对的集合：


    //Object对象
    {"name":"前端君","gender":1}

ES5中的key键名的类型要求一定是字符串，当然，ES6已经允许属性名的类型是Symbol，第十一节有讲解，可点击查看。

现在，ES6 提供了Map结构给我们使用，它跟Object对象很像，但是不同的是，它的key键名的类型不再局限于字符串类型了，它可以是各种类型的值；可以说，它比Object对象更加灵活了，当然，也更加复杂了。

Map的基本用法

知道了什么是Map，我们接着来学学它的基本用法，看看它是怎么使用的。

Map结构提供了一个构造函数给我们，我们使用的时候需要用new来创建实例：


    let m = new Map();

如果想要在创建实例的同时，初始化它的内容，我们可以给它传参，形式跟Set结构类型，都是需要用数组作为参数，我们来试试看看：


    let m = new Map([
            ["name","前端君"],
            ["gender",1]
    ]);
    
    console.log(m);
    //打印结果：Map {"name" => "前端君", "gender" => 1}

大家注意Map( )方法里面的参数，首先它是一个数组，而里面的内容也是由多个数组组成，“name”：“前端君”作为一个键值对，将它们装在一个数组里面，[“name”：“前端君”],另外一组键值对也一样：[“gender”：1 ]。这就是初始化一个Map结构实例的基本写法。

初始化成实例后，Map结构还提供了一些实例的属性和方法供我们实现对实例的操作。我们一起看看都有哪些属性和方法。

set( )方法

set( )方法作用：给实例设置一对键值对，返回map实例。


    let m = new Map();
    //set方法添加

    //添加一个string类型的键名
    m.set("name","前端君");  
  
    //添加一个数字类型的键名
    m.set(1,2);

    console.log(m);
    //打印结果：Map {"name" => "前端君", 1 => 2}

set方法的使用很简单，只需要给方法传入key和value作为键名和键值即可。注意：第三行代码中，我们传入的key是数字1，这就证明了，Map结构确实可以存储非字符串类型的键名，当然你还可以设置更多其它类型的键名，比如：


    //数组类型的键名
    m.set([1],2);

    //对象类型的键名
    m.set({"name":"Zhangsan"},2);

    //布尔类型的键名
    m.set(true,2);

    //Symbol类型的键名
    m.set(Symbol('name'),2);

    //null为键名
    m.set(null,2);

    //undefined为键名
    m.set(undefined,2);

以上6种类型值都可以作为键名，可以成功添加键值对，没毛病。

使用set方法的时候有一点需要注意，如果你设置一个已经存在的键名，那么后面的键值会覆盖前面的键值。我们演示一下：


    let m = new Map();
    m.set("name","前端君");
    console.log(m);
    //结果：Map {"name" => "前端君"}

    //再次设置name的值
    m.set("name","隔壁老王");
    console.log(m);
    //结果：Map {"name" => "隔壁老王"}

上面的案例，我们第一次把name的值设置为“前端君”，当再次使用set方法设置name的值的时候，后者成功覆盖了前者的值，从此“前端君” 变 “隔壁老王”。

get( )方法

get( )方法作用：获取指定键名的键值，返回键值。


    let m = new Map([["name","前端君"]]);

    m.get("name");//结果：前端君
    m.get("gender");//结果：undefined

get方法使用也很简单，只需要指定键名即可。获取存在对应的键值，如果键值对存在，就会返回键值；否则，返回undefined，这个也很好理解。

delete( )方法

delete( )方法作用：删除指定的键值对，删除成功返回：true，否则返回：false。


    let m = new Map();
    m.set("name","前端君");
    //结果：Map {"name" => "前端君"}

    m.delete("name");//结果：true
    m.delete("gender");//结果：false

我们使用delete方法，删除“name”的时候成功，返回了true。删除“gender”的时候，由于Map结构中不存在键名：“gender”，所以删除失败，返回false。

clear( )方法

跟Set结构一样，Map结构也提供了clear( )方法，让你一次性删除所有键值对。


    let m = new Map();
    m.set("name","前端君");
    m.set("gender",1);

    m.clear();
    console.log(m);
    //打印结果：Map {}

使用clear方法后，我们再打印一下变量m，发现什么都没有，一个空的Map结构，说明clear方法起作用了。

has( )方法

has( )方法作用：判断Map实例内是否含有指定的键值对，有就返回：true，否则返回：false。


    let m = new Map();
    m.set("name","前端君");

    m.has('name');//结果:true
    m.has('age');//结果:false

Map实例中含有键名：name，就返回了true，键名age不存在，就返回false。好理解吧，比较简单。

可遍历

Object对象能被for...in遍历，Map结构也不示弱，同样可以被遍历。我们可以使用ES6的新特性for...of来遍历它的键名或者键值。

entries( )方法

entries( )方法作用：返回实例的键值对遍历器。

我们在第十三节说过，for...of可以遍历具有遍历器接口的对象。那么，我们就结合for...of来演示一下Map结构的遍历。


    let m = new Map([
            ["name","前端君"],
            ["age",25]
    ]);

    for(let [key,value] of m.entries()){
        console.log(key+'  '+value);
    }
    //打印结果：name  前端君
    //              age  25

案例中的 m.entries( ) 返回键值对的遍历器，使用了for...of来遍历这个遍历器，得到的值分别赋值到key和value，然后控制台分别输出它们。

还记得吗？上一节中，介绍Set结构的遍历的时候，也是这样的遍历方式。

keys( ) 和 values( ) 方法

keys( )方法：返回实例所有键名的遍历器。

values( ) 方法：返回实例所有键值的遍历器。

既然都是遍历器，那就用for...of把它们遍历出来吧：

    
    let m = new Map([
        ["name","前端君"],
        ["age",25]
    ]);

    //使用keys方法获取键名
    for(let key of m.keys()){
        console.log(key);
    }
    //打印结果：name
    //                 age

    //使用values方法获取键值
    for(let value of m.values()){
        console.log(value);
    }
    //打印结果：前端君
    //                 25

keys方法和values方法的使用方式一致，只是返回的结果不同。

forEach( )方法

除了使用以上三个方法实现遍历以外，我们还可以使用forEach遍历每一个键值对：

    
    let m = new Map([
        ["name","前端君"],
        ["age",25]
    ]);
    
    m.forEach(function(value,key){
        console.log(key+':'+value);
    });
    //打印结果：name:前端君
    //                 age:25

forEach方法接收一个匿名函数，给匿名函数传参value和key，分别是Map实例的键名和键值，这个方法的使用相信大家一定不会陌生。

size属性

其中一个常用的属性就是size：获取实例的成员数。


    let m = new Map();
    m.set(1,3);
    m.set('1','3');

    m.size;//结果：2

使用set方法给实例m添加了两个键值对成员，所以实例的 size为：2。

什么是WeakMap

讲了Map结构，我们现在讲WeakMap结构。

WeakMap结构和Map结构很类似，不同点在于WeakMap结构的键名只支持引用类型的数据。哪些是引用类型的值呢？比如：数组，对象，函数。

关于什么是引用类型，其中涉及到了传址和传值的区别，还记得装修工张师傅和王师傅的例子吗？第三节有详细的讲解，点击可查看。

WeakMap的基本用法

WeakMap结构的使用方式和Map结构一样：


    let wm = new WeakMap();

两者都是使用new来创建实例。如果添加键值对的话，我们同样是使用set方法，不过键名的类型必须要求是引用类型的值，我们来看看：


    let wm = new WeakMap();

    //数组类型的键名
    wm.set([1],2);

    //对象类型的键名
    wm.set({'name':'Zhangsan'},2);

    //函数类型的键名
    function fn(){};
    wm.set(fn,2);

    console.log(wm);
    //打印：WeakMap {
            [1] => 2, 
            Object {name: "Zhangsan"} => 2, 
            function => 2
            }