ES6新数据结构Map功能与用法示例


Posted in Javascript onMarch 31, 2017

本文实例讲述了ES6新数据结构Map功能与用法。分享给大家供大家参考,具体如下:

新数据结构Map

JavaScript中对象的本质是键值对的集合,但是键只能是字符串。为了弥补这种缺憾,ES6带来了一种新的数据结构Map。Map也是键值对的集合,只是键不仅可以是字符串还可以是其他数据类型,比如:对象(是不是很神奇)。请看下面例子。

var m = new Map();
var ul = document.getElementsByTagName('ul');
m.set(ul,'hi');
console.log(m.get(ul)); //hi

对于Map的操作有以下几个:

m.set(ul,'content'); //为Map增加成员
m.get(ul);//获取键 ul对应的值
m.has(ul);//返回布尔值,判断是否含有键 ul
m.delete(ul);//删除键 ul,成功返回true,失败返回false
m.size //返回m长度
m.clear(); //清除m所有成员

直接为Map赋初值的方法:

var m = new Map([[li_1,'hello'],[li_2,'world']]);

接受的参数为一个数组,数组内的成员是表示一个一个键值对的数组。如果你蒙了,请看上行代码的实际执行情况:

var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
console.log(m.get(li_1)); //hello

如果对一个键多次赋值,后面的值会覆盖前面的值。值得注意的是,当键是对象时,必须是引用相同,才认为键是相同的。下面介绍Map的遍历方法。

var ul = document.getElementsByTagName('ul');
var li_1 = document.getElementsByTagName('li')[0];
var li_2 = document.getElementsByTagName('li')[1];
var list = [ [li_1,'hello'] , [li_2,'world'] ];
var m = new Map();
list.forEach( ([key,value]) => m.set(key,value) );
for ( let key of m.keys() ){
  console.log(key);
}
for ( let val of m.values() ){
  console.log(val);
}
for ( let item of m.entries() ){
  console.log(item[0],item[1]);
}
for ( let [key,val] of m.entries() ){
  console.log(key,val);
}
m.forEach( function( val , key , ul ){
  console.log( this ); //ul
  console.log( val , key);
} , ul ); // forEach的第二个参数用于改变匿名函数中this指向

Map与其他数据类型的转换

Map转数据的最简单方式是使用 ... 扩展运算符。例如:

console.log( ...m ); //[li, "hello"] [li, "world"]

Map转对象时,必须所有键都是字符串,使用Object.create()函数。Map转JSON时,要求也要求所有键都是字符串,使用JSON.Stringify()函数。

希望本文所述对大家ECMAScript程序设计有所帮助。

Javascript 相关文章推荐
jQuery 位置插件
Dec 25 Javascript
JS判断表单输入是否为空(示例代码)
Dec 23 Javascript
浅析jQuery中调用ajax方法时在不同浏览器中遇到的问题
Jun 11 Javascript
jQuery打印图片pdf、txt示例代码
Jul 22 Javascript
jQuery实现鼠标滑过Div层背景变颜色的方法
Feb 17 Javascript
jQuery实例—选项卡的简单实现(js源码和jQuery)
Jun 14 Javascript
解决微信浏览器Javascript无法使用window.location.reload()刷新页面
Jun 21 Javascript
基于JavaScript实现的希尔排序算法分析
Apr 14 Javascript
JavaScript Canvas编写炫彩的网页时钟
Oct 16 Javascript
vue 解决路由只变化参数页面组件不更新问题
Nov 05 Javascript
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 Javascript
基于AGS JS开发自定义贴图图层
Mar 31 #Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 #Javascript
ES6使用let命令更简单的实现块级作用域实例分析
Mar 31 #Javascript
JS解决移动web开发手机输入框弹出的问题
Mar 31 #Javascript
详解使用JS如何制作简单的ASCII图与单极图
Mar 31 #Javascript
Angularjs中使用指令绑定点击事件的方法
Mar 30 #Javascript
Angualrjs和bootstrap相结合实现数据表格table
Mar 30 #Javascript
You might like
php上传文件的增强函数
2010/07/21 PHP
ie与session丢失(新窗口cookie丢失)实测及解决方案
2013/07/15 PHP
thinkphp的c方法使用示例
2014/02/24 PHP
PHP输出缓冲控制Output Control系列函数详解
2015/07/02 PHP
Yii2创建控制器(createController)方法详解
2016/07/23 PHP
PHP实现判断数组是一维、二维或几维的方法
2017/02/06 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
完美解决Thinkphp3.2中插入相同数据的问题
2017/08/01 PHP
利用php操作memcache缓存的基础方法示例
2017/08/02 PHP
Laravel框架自定义公共函数的引入操作示例
2019/04/16 PHP
PHP实现文件上传后台处理脚本
2020/03/04 PHP
基于jQuery的固定表格头部的代码(IE6,7,8测试通过)
2010/05/18 Javascript
Jqyery中同等与js中windows.onload的应用
2011/05/10 Javascript
IE8对JS通过属性和数组遍历解析不一样的地方探讨
2013/05/06 Javascript
jquery队列函数用法实例
2014/12/16 Javascript
JQuery使用index方法获取Jquery对象数组下标的方法
2015/05/18 Javascript
JQuery.Ajax()的data参数类型实例详解
2015/11/20 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
值得学习的bootstrap fileinput文件上传工具
2016/11/08 Javascript
swiper移动端轮播插件(触碰图片之后停止轮播)
2017/12/28 Javascript
Layui tree 下拉菜单树的实例代码
2019/09/21 Javascript
[02:58]献给西雅图的情书_高清
2014/05/29 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Pycharm无法使用已经安装Selenium的解决方法
2018/10/13 Python
使用 Python 快速实现 HTTP 和 FTP 服务器的方法
2019/07/22 Python
PyTorch里面的torch.nn.Parameter()详解
2020/01/03 Python
python文件和文件夹复制函数
2020/02/07 Python
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
网吧收银员岗位职责
2013/12/14 职场文书
导游的职业规划书范文
2013/12/27 职场文书
普通简短的个人自我评价
2014/02/15 职场文书
外贸英文求职信范文
2015/03/19 职场文书
田径运动会通讯稿
2015/07/18 职场文书
Nginx+SpringBoot实现负载均衡的示例
2021/03/31 Servers
Python爬虫基础之简单说一下scrapy的框架结构
2021/06/26 Python
低门槛开发iOS、Android、小程序应用的前端框架详解
2021/10/16 Javascript