ES6 Map结构的应用实例分析


Posted in Javascript onJune 26, 2019

本文实例讲述了ES6 Map结构的应用。分享给大家供大家参考,具体如下:

Map 数据结构类似于对象,也是键值对的集合,但是“键”的范围不限于字符串,各种类型的值(包括对象)都可以当作键。也就是说,Object 结构提供了“字符串—值”的对应,Map 结构提供了“任何—值”的对应,是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构,Map 比 Object 更合适。

初识map

var obj = {
 'name':'Joh',
 qq:'5222',
 'full name':'Johnny'
};
let map = new Map();
map
 .set(obj, 'Hello map')
 .set('haha', 12)
 .set(52, obj)
 .set(NaN, new Set([1,2,3]));
console.log(map);
console.log(map.size); // 4

Map可以连续set,就像Set可以连续add一样,同样有size的api

map 的delete, has方法

var obj = {
 'name':'Joh',
 qq:'5222',
 'full name':'Johnny'
};
var arr = [1,2];
let map = new Map();
// map 可以连续set
map
 .set(obj,'11')
 .set(11,3)
 .set(12,'H')
 .set(arr,'h');
var delRes = map.delete(obj); // map不可以连续 delete
console.log(delRes); // true
var hasBool1 = map.has(11);
console.log(hasBool1); // true
var hasBool2 = map.has(arr);
console.log(hasBool2); // true
console.log(map.size); // 3

NaN在map上的特殊性与clear方法

let map = new Map();
// map 可以连续set
map
 .set(11,3)
 .set(12,'H')
 .set(NaN,'h1')
 .set(NaN,'h2'); // 覆盖前值
console.log(map.get(NaN)); // h2
map.clear();
console.log(map.size); // 0

和set相同,NaN在map上具有唯一性,clear方法会将集合清空

map 的构造函数参数的传递,取值get方法,keys方法,values方法

let map = new Map([
 ['name','Joh'],
 ['age',10]
]);
let name = map.get('name');
let age = map.get('age');
console.log(name); // Joh
console.log(age); // 10
let keys = map.keys();
for(let k of keys) {
 console.log(k); // 分别输出 name 和 age
}
let values = map.values();
for(let v of values) {
 console.log(v); // 分别输出 Joh 和 10
}

map与set的原型属性比较和map使用entries方法获得数据的实体

let map = new Map([
 ['name','Joh'],
 ['age',10]
]);
console.log(Set.prototype[Symbol.iterator] === Set.prototype.values); // true
console.log(Map.prototype[Symbol.iterator] === Map.prototype.values); // false
console.log(Map.prototype[Symbol.iterator] === Map.prototype.entries); // true
let entries = map.entries();
for (let en of entries) {
 console.log(en); // 分别输出 ['name','Joh'] 和 ['age',10]
}

map内forEach方法和对象传递,以及内部this的使用

let map = new Map([
 ['name','Joh'],
 ['age',10]
]);
var me = {
 name:"Joh"
};
map.forEach(function (val, key) {
 console.log(key, val); // 分别输出 name Joh 和 "age" 10
});
console.log('>>>>>');
map.forEach(function (val, key) {
 // console.log(key, val); // 分别输出 name Joh 和 "age" 10
 console.log(this); // {name: "Joh"} 此处的this就是传递进来的对象
}, me);

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

Javascript 相关文章推荐
cssQuery()的下载与使用方法
Jan 12 Javascript
ExtJS Window 最小化的一种方法
Nov 18 Javascript
初学Jquery插件制作 在SageCRM的查询屏幕隐藏部分行的功能
Dec 26 Javascript
jquery 操作日期、星期、元素的追加的实现代码
Feb 07 Javascript
jquery struts 验证唯一标识(公用方法)
Mar 27 Javascript
jquery ajax中使用jsonp的限制解决方法
Nov 22 Javascript
JavaScript实现的GBK、UTF8字符串实际长度计算函数
Aug 27 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
Oct 16 Javascript
Node.js用readline模块实现输入输出
Dec 16 Javascript
js获取当前周、上一周、下一周日期
Mar 19 Javascript
vue生成token保存在客户端localStorage中的方法
Oct 25 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
vue实现日历备忘录功能
Sep 24 #Javascript
ES6 Array常用扩展的应用实例分析
Jun 26 #Javascript
Vue.js实现备忘录功能
Jun 26 #Javascript
微信小程序数据统计和错误统计的实现方法
Jun 26 #Javascript
Vue移动端右滑屏幕返回上一页附源码下载
Jun 26 #Javascript
微信小程序利用Canvas绘制图片和竖排文字详解
Jun 25 #Javascript
js+html实现周岁年龄计算器
Jun 25 #Javascript
You might like
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
Windows下利用Gvim写PHP产生中文乱码问题解决方法
2011/04/20 PHP
ThinkPHP 3.2.3实现页面静态化功能的方法详解
2017/08/03 PHP
简单通用的JS滑动门代码
2008/12/19 Javascript
表单切换,用回车键替换Tab健(不支持IE)
2011/07/20 Javascript
JavaScript分秒倒计时器实现方法
2015/02/02 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
jQuery使用模式窗口实现在主页面和子页面中互相传值的方法
2016/03/01 Javascript
基于AngularJS实现iOS8自带的计算器
2016/09/12 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
RequireJS 依赖关系的实例(推荐)
2017/01/21 Javascript
关于JavaScript的单双引号嵌套问题
2017/08/20 Javascript
JS闭包原理与应用经典示例
2018/12/20 Javascript
微信小程序实现渐入渐出动画效果
2019/06/13 Javascript
ES6顶层对象、global对象实例分析
2019/06/14 Javascript
JAVA面试题 static关键字详解
2019/07/16 Javascript
jQuery实现动态加载瀑布流
2020/09/01 jQuery
three.js中多线程的使用及性能测试详解
2021/01/07 Javascript
[01:05:40]VG vs Newbee 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/20 DOTA
python中的多重继承实例讲解
2014/09/28 Python
Python中的字典与成员运算符初步探究
2015/10/13 Python
关于Python正则表达式 findall函数问题详解
2018/03/22 Python
TensorFlow 读取CSV数据的实例
2020/02/05 Python
Python3 filecmp模块测试比较文件原理解析
2020/03/23 Python
keras绘制acc和loss曲线图实例
2020/06/15 Python
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
html5借用repeating-linear-gradient实现一把刻度尺(ruler)
2019/09/09 HTML / CSS
资产经营总监岗位职责范文
2013/12/01 职场文书
商务考察邀请函模板
2015/02/02 职场文书
大连导游词
2015/02/12 职场文书
研究生简历自我评
2015/03/11 职场文书
工作态度恶劣检讨书
2015/05/06 职场文书
《我在为谁工作》:工作的质量往往决定生活的质量
2019/12/27 职场文书
学会用Python实现滑雪小游戏,再也不用去北海道啦
2021/05/20 Python
Oracle 触发器trigger使用案例
2022/02/24 Oracle
SpringCloud Feign请求头删除修改的操作代码
2022/03/20 Java/Android