首页手记 ES6新增Map和WeakMap（2018-06-08）

ES6新增Map和WeakMap（2018-06-08）

标签：

JavaScript

Map

    //Object对象
    {"name":"刘英","gender":1}

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

Map的基本用法

    let m = new Map();

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

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);

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

    let m = new Map();
    m.set("name","王大拿");
    console.log(m);    //结果：Map {"name" => "王大拿"}

    //再次设置name的值
    m.set("name","隔壁老王");
    console.log(m);    //结果：Map {"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

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。

可遍历

我们可以使用ES6的新特性for...of来遍历它的键名或者键值。

entries( )方法

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

    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，然后控制台分别输出它们。

keys( ) 和 values( ) 方法

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

    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

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属性

获取实例的成员数。

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

    m.size;//结果：2

WeakMap

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

    let wm = new WeakMap();

    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
            }

WeakMap和Map的区别

    如果是普通的值类型则不允许。比如：字符串，数字，null，undefined，布尔类型。而Map结构是允许的，这就是两者的不同之处，谨记。
    跟Map一样，WeakMap也拥有get、has、delete方法，用法和用途都一样。不同地方在于，WeakMap不支持clear方法，不支持遍历，也就没有了keys、values、entries、forEach这4个方法，也没有属性size。
    键名中的引用类型是弱引用，你永远不知道这个引用对象什么时候会被垃圾回收机制回收了，如果这个引用类型的值被垃圾机制回收了，WeakMap实例中的对应键值对也会消失。

作者：a小磊_
链接：https://www.jianshu.com/p/88a1069cf7cc

点击查看更多内容