最新消息:Rockyxia Web技术博客全新改版,响应式布局满足各种设备各种尺寸的访问需求。

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

ES6 rockyxia 6286浏览

写在前面

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

20160620-es6

什么是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
}

从打印结果可以看出,以上类型的键名都可以成功添加到WeakMap实例中。

WeakMap和Map的区别

如果是普通的值类型则不允许。比如:字符串,数字,null,undefined,布尔类型。而Map结构是允许的,这就是两者的不同之处,谨记。

跟Map一样,WeakMap也拥有get、has、delete方法,用法和用途都一样。不同地方在于,WeakMap不支持clear方法,不支持遍历,也就没有了keys、values、entries、forEach这4个方法,也没有属性size。

理由跟WeakSet结构一样:键名中的引用类型是弱引用,你永远不知道这个引用对象什么时候会被垃圾回收机制回收了,如果这个引用类型的值被垃圾机制回收了,WeakMap实例中的对应键值对也会消失。

本节小结

总结:Map结构是一个键值对的集合,跟Object对象不同的是,Map结构的键名可以是任何类型的值,而WeakMap结构的键名只允许是引用类型的值。

它们都提供了各自的方法和属性供开发者使用:set、get、has、delete等相同的方法,其中Map结构还多了clear方法,size属性和一些用于遍历的方法:keys、values、entries、forEach。

本系列教程来自 web前端教程 微信公众号。

转载请注明:Rockyxia Web技术博客 » ES6第十七节:ES6新增的Map和WeakMap 又是什么东西?
感谢阅读,如果您发现文章中有表述不准确,欢迎提出来,也欢迎交流相关问题,你可以去这里进行一对一问答交流。

(本篇完)