第十七节:ES6新增的Map和WeakMap 又是什么东西?
上节介绍了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 又是什么东西?相关推荐
- 第十六节:ES6新增的 Set 和 WeakSet 是什么东西?
题外话:往后的章节,跟前面的章节联系越来越紧密,很多知识的讲解建立在前面章节的学习基础上,如果是新来的同学,建议从第一节学起.如果是忘记了前面的内容,前端君也会在适当的时候,加上跳转链接. 什么是Se ...
- 【ES6基础】Map与WeakMap
开篇 ES6里除了增加了Set(集合)类型外(笔者在这篇文章<Set与WeakSet>有过介绍),今天的这篇文章笔者将继续介绍ES6引入的新类型--Map(映射类型)和其对应的弱类型Wea ...
- 初探ES6中的Map和WeakMap
Map 对象保存键值对.任何值(对象或者原始值) 都可以作为一个键或一个值. 使用映射对象 let myMap=new Map(); let keyObj={},keyfunc=function(){ ...
- [extjs5学习笔记]第三十七节 Extjs6预览版都有神马新东西
本文在微信公众号文章地址:微信公众号文章地址 本文地址:http://blog.csdn.net/sushengmiyan/article/details/45190485 [TOC] 在Ext JS ...
- ES6新增的数组方法
本文整理ES6"新增"的 map方法.filter方法.some方法.every方法.reduce方法 一.map()方法 给数组的每个元素做特殊的处理 返回一个新的数组 例1 给 ...
- 第二节:ES6新增了let关键字,干嘛用的?
大白话,讲编程,连载的第一节,得到大家的认可和赞赏,谢谢支持.文章还出现了几个错别字,惭愧!此外,连载的频率初定为每周2节,时间大约在早上10:00:大家对此有何建议都可以留言,前端君都会回复. 来吧 ...
- ES6新增语法与内置对象扩展
技术交流QQ群:1027579432,欢迎你的加入! 欢迎关注我的微信公众号:CurryCoder的程序人生 1.什么是ES6 ES的全称是ECMAScript,它是由ECMA国际标准化组织制定的一项 ...
- ES6(三)——Set、WeakSet、Map、WeakMap
一.Set的基本使用 在ES6之前,我们存储数据的结构主要有两种:数组.对象. 在ES6中新增了另外两种数据结构:Set.Map,以及它们的另外形式WeakSet.WeakMap. Set是一个新增的 ...
- set和map去重调用什么方法_你真的了解ES6的Set,WeakSet,Map和WeakMap吗?
之前在学习 ES6 的时候,看到 Set 和 Map,不知道其应用场景有哪些,只觉得很多时候会用在数组去重和数据存储,后来慢慢才领悟到 Set 是一种叫做集合的数据结构,Map 是一种叫做字典的数据结 ...
最新文章
- 关于javascript中私有作用域的预解释
- dotnetCore增加MiddleWare的Run,Use Map MapThen四个扩展方法
- Android之AIDL使用详解
- 推荐系统——矩阵分解FM
- python+OpenCV检测条形码
- 利用python进行数据分析之准备工作(1)
- redis——redis持久化处理
- 使用内部类或者外部类
- 一种基于flex的可视化多层流量切分界面的实现
- 解决 Error:No suitable device found: no device found for connection System eth0
- python中提交post表单_python接口自动化二(发送post请求)
- 惠普电脑u盘重装系统步骤_惠普笔记本u盘系统安装步骤 惠普u盘启动系统安装...
- texstudio 使用方法_Texstudio使用技巧——基于个人
- 联想服务器td340安装精简版win10
- mulesoft MCIA 破釜沉舟备考 2023.04.29.27 (易错题)
- centOS6使用NAT方式联网
- 离散数学与组合数学-05树
- ubuntu18.04下pass-through直通realteck PCI设备到qemu-kvm虚拟机实践
- python换行符是什么?
- 三面美团Java岗,java电子书下载百度云
热门文章
- 互联网日报 | 京东数科科创板IPO获受理;美团点评回应更名为“美团”;中通快递通过港交所上市聆讯...
- echarts 大屏可视化_看似复杂炫酷的数据可视化设计,用这波神器轻松搞定!
- 作者:洪文兴(1980-),男,厦门大学自动化系副教授,厦门信息产业与信息化研究院执行院长。...
- 作者:李大中(1976-),男,中国联合网络通信集团有限公司信息化事业部数据中心工程师...
- 2015年《大数据》高被引论文Top10文章No.3——我国政府数据开放现状和保障机制...
- 【Navicat】查看1000行以后的内容
- VMware 即使克隆解析
- 看完后,别再说自己不懂用户画像了
- nodjs npm 报错:Segmentation fault: 11
- 网络管理命令ping和arping