上节介绍了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            }

从打印结果可以看出,以上类型的键名都可以成功添加到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。

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

  1. 第十六节:ES6新增的 Set 和 WeakSet 是什么东西?

    题外话:往后的章节,跟前面的章节联系越来越紧密,很多知识的讲解建立在前面章节的学习基础上,如果是新来的同学,建议从第一节学起.如果是忘记了前面的内容,前端君也会在适当的时候,加上跳转链接. 什么是Se ...

  2. 【ES6基础】Map与WeakMap

    开篇 ES6里除了增加了Set(集合)类型外(笔者在这篇文章<Set与WeakSet>有过介绍),今天的这篇文章笔者将继续介绍ES6引入的新类型--Map(映射类型)和其对应的弱类型Wea ...

  3. 初探ES6中的Map和WeakMap

    Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 使用映射对象 let myMap=new Map(); let keyObj={},keyfunc=function(){ ...

  4. [extjs5学习笔记]第三十七节 Extjs6预览版都有神马新东西

    本文在微信公众号文章地址:微信公众号文章地址 本文地址:http://blog.csdn.net/sushengmiyan/article/details/45190485 [TOC] 在Ext JS ...

  5. ES6新增的数组方法

    本文整理ES6"新增"的 map方法.filter方法.some方法.every方法.reduce方法 一.map()方法 给数组的每个元素做特殊的处理 返回一个新的数组 例1 给 ...

  6. 第二节:ES6新增了let关键字,干嘛用的?

    大白话,讲编程,连载的第一节,得到大家的认可和赞赏,谢谢支持.文章还出现了几个错别字,惭愧!此外,连载的频率初定为每周2节,时间大约在早上10:00:大家对此有何建议都可以留言,前端君都会回复. 来吧 ...

  7. ES6新增语法与内置对象扩展

    技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.什么是ES6 ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项 ...

  8. ES6(三)——Set、WeakSet、Map、WeakMap

    一.Set的基本使用 在ES6之前,我们存储数据的结构主要有两种:数组.对象. 在ES6中新增了另外两种数据结构:Set.Map,以及它们的另外形式WeakSet.WeakMap. Set是一个新增的 ...

  9. set和map去重调用什么方法_你真的了解ES6的Set,WeakSet,Map和WeakMap吗?

    之前在学习 ES6 的时候,看到 Set 和 Map,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结 ...

最新文章

  1. 关于javascript中私有作用域的预解释
  2. dotnetCore增加MiddleWare的Run,Use Map MapThen四个扩展方法
  3. Android之AIDL使用详解
  4. 推荐系统——矩阵分解FM
  5. python+OpenCV检测条形码
  6. 利用python进行数据分析之准备工作(1)
  7. redis——redis持久化处理
  8. 使用内部类或者外部类
  9. 一种基于flex的可视化多层流量切分界面的实现
  10. 解决 Error:No suitable device found: no device found for connection System eth0
  11. python中提交post表单_python接口自动化二(发送post请求)
  12. 惠普电脑u盘重装系统步骤_惠普笔记本u盘系统安装步骤 惠普u盘启动系统安装...
  13. texstudio 使用方法_Texstudio使用技巧——基于个人
  14. 联想服务器td340安装精简版win10
  15. mulesoft MCIA 破釜沉舟备考 2023.04.29.27 (易错题)
  16. centOS6使用NAT方式联网
  17. 离散数学与组合数学-05树
  18. ubuntu18.04下pass-through直通realteck PCI设备到qemu-kvm虚拟机实践
  19. python换行符是什么?
  20. 三面美团Java岗,java电子书下载百度云

热门文章

  1. 互联网日报 | 京东数科科创板IPO获受理;美团点评回应更名为“美团”;中通快递通过港交所上市聆讯...
  2. echarts 大屏可视化_看似复杂炫酷的数据可视化设计,用这波神器轻松搞定!
  3. 作者:洪文兴(1980-),男,厦门大学自动化系副教授,厦门信息产业与信息化研究院执行院长。...
  4. 作者:李大中(1976-),男,中国联合网络通信集团有限公司信息化事业部数据中心工程师...
  5. 2015年《大数据》高被引论文Top10文章No.3——我国政府数据开放现状和保障机制...
  6. 【Navicat】查看1000行以后的内容
  7. VMware 即使克隆解析
  8. 看完后,别再说自己不懂用户画像了
  9. nodjs npm 报错:Segmentation fault: 11
  10. 网络管理命令ping和arping