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 相关文章推荐
Prototype 学习 工具函数学习($A方法)
Jul 12 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
JavaScript中奇葩的假值示例应用
Mar 11 Javascript
JS实现网页表格自动变大缩小的方法
Mar 09 Javascript
javascript数组去重的方法汇总
Apr 14 Javascript
jquery计算鼠标和指定元素之间距离的方法
Jun 26 Javascript
JavaScript实现可拖拽的拖动层Div实例
Aug 05 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
基于js中style.width与offsetWidth的区别(详解)
Nov 12 Javascript
js实现通过开始结束控制的计时器
Feb 25 Javascript
微信小程序template模版的使用方法
Apr 13 Javascript
微信小程序多列表渲染数据开关互不影响的实现
Jun 05 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 curl 登录163邮箱并抓取邮箱好友列表的代码(经测试)
2011/04/07 PHP
PHP实现的折半查找算法示例
2017/12/19 PHP
Windows服务器中PHP如何安装redis扩展
2019/09/27 PHP
TNC vs BOOM BO3 第二场2.13
2021/03/10 DOTA
JavaScript 判断浏览器是否支持SVG的代码
2013/03/21 Javascript
jQuery实现弹出窗口中切换登录与注册表单
2015/06/05 Javascript
JavaScript+html5 canvas实现图片破碎重组动画特效
2016/02/22 Javascript
如何消除inline-block属性带来的标签间间隙
2016/03/31 Javascript
详细探究ES6之Proxy代理
2016/07/22 Javascript
浅谈jQuery效果函数
2016/09/16 Javascript
js原生跨域_用script标签的简单实现
2016/09/24 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
折叠菜单及选择器的运用
2017/02/03 Javascript
javascript连接mysql与php通过odbc连接任意数据库的实例
2017/12/27 Javascript
js点击时关闭该范围下拉菜单之外的菜单方法
2018/01/11 Javascript
浅谈vue中改elementUI默认样式引发的static与assets的区别
2018/02/03 Javascript
原生js实现Flappy Bird小游戏
2018/12/24 Javascript
vue实现简单瀑布流布局
2020/05/28 Javascript
如何使用 JavaScript 操作浏览器历史记录 API
2020/11/24 Javascript
Python中的yield浅析
2014/06/16 Python
在Python程序中操作文件之isatty()方法的使用教程
2015/05/24 Python
Python3编程实现获取阿里云ECS实例及监控的方法
2017/08/18 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python 同时运行多个程序的实例
2019/01/07 Python
python tkinter实现界面切换的示例代码
2019/06/14 Python
简单了解python filter、map、reduce的区别
2020/01/14 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
PyQt5 界面显示无响应的实现
2020/03/26 Python
Python3+selenium配置常见报错解决方案
2020/08/28 Python
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
回门宴答谢词
2014/01/13 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
500字小学生检讨书
2015/02/19 职场文书
Django实现聊天机器人
2021/05/31 Python
使用kubeadm命令行工具创建kubernetes集群
2022/03/31 Servers