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调用AJAX时Get和post公用的乱码解决方法实例说明
Jun 04 Javascript
JS中判断JSON数据是否存在某字段的方法
Mar 07 Javascript
jquery淡化版banner异步图片文字效果切换图片特效
Apr 08 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
浅谈angular懒加载的一些坑
Aug 20 Javascript
Angular.js通过自定义指令directive实现滑块滑动效果
Oct 13 Javascript
AngularJs的UI组件ui-Bootstrap之Tooltip和Popover
Jul 13 Javascript
vue中利用simplemde实现markdown编辑器(增加图片上传功能)
Apr 29 Javascript
vue elementUI table 自定义表头和行合并的实例代码
May 22 Javascript
vue+element-ui+axios实现图片上传
Aug 20 Javascript
vue 使用 canvas 实现手写电子签名
Mar 06 Javascript
js实现有趣的倒计时效果
Jan 19 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
利用phpExcel实现Excel数据的导入导出(全步骤详细解析)
2013/11/26 PHP
php将access数据库转换到mysql数据库的方法
2014/12/24 PHP
浅谈php错误提示及查错方法
2015/07/14 PHP
laravel 5.4 + vue + vux + element的环境搭配过程介绍
2018/04/26 PHP
php闭包中使用use声明变量的作用域实例分析
2018/08/09 PHP
php中访问修饰符的知识点总结
2019/01/27 PHP
jquery异步跨域访问代码
2013/06/28 Javascript
js检测网络是否具体连接功能的代码
2014/05/23 Javascript
JavaScript中三种常见的排序方法
2017/02/24 Javascript
Vue组件实例间的直接访问实现代码
2017/08/20 Javascript
js中let和var定义变量的区别
2018/02/08 Javascript
vue2.0结合Element-ui实战案例
2019/03/06 Javascript
小程序实现新用户判断并跳转激活的方法
2019/05/20 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
Python Deque 模块使用详解
2014/07/04 Python
Python使用numpy产生正态分布随机数的向量或矩阵操作示例
2018/08/22 Python
python变量赋值方法(可变与不可变)
2019/01/12 Python
python Elasticsearch索引建立和数据的上传详解
2019/08/04 Python
如何获取Python简单for循环索引
2019/11/21 Python
python脚本后台执行方式
2019/12/21 Python
python中如何进行连乘计算
2020/05/28 Python
马来西亚最大的电器网站:Senheng
2017/10/13 全球购物
英国在线定制百叶窗网站:Swift Direct Blinds
2020/02/25 全球购物
介绍一下Python下range()函数的用法
2013/11/07 面试题
学校食堂采购员岗位职责
2013/12/05 职场文书
2014年计算机专业个人自我评价
2014/01/19 职场文书
小学语文教学反思
2014/02/10 职场文书
旺仔牛奶广告词
2014/03/20 职场文书
建房协议书
2014/04/11 职场文书
2014年质量工作总结
2014/11/22 职场文书
三严三实学习心得体会(精选N篇)
2016/01/05 职场文书
导游词之上饶龟峰
2019/10/25 职场文书
nginx处理http请求实现过程解析
2021/03/31 Servers
聊聊SpringBoot自动装配的魔力
2021/11/17 Java/Android
win10拖拽文件时崩溃怎么解决?win10文件不能拖拽问题解决方法
2022/08/14 数码科技
httpclient调用远程接口的方法
2022/08/14 Java/Android