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 相关文章推荐
JavaScript 创建对象
Jul 17 Javascript
基于jquery的不规则矩形的排列实现代码
Apr 16 Javascript
javascript firefox 自动加载iframe 自动调整高宽示例
Aug 27 Javascript
JS实现倒计时和文字滚动的效果实例
Oct 29 Javascript
javascript基于DOM实现省市级联下拉框的方法
May 14 Javascript
javascript 分号总结及详细介绍
Sep 24 Javascript
前端编码规范(3)JavaScript 开发规范
Jan 21 Javascript
Angular1.x自定义指令实例详解
Mar 01 Javascript
JavaScript高阶函数_动力节点Java学院整理
Jun 28 Javascript
vue音乐播放器插件vue-aplayer的配置及其使用实例详解
Jul 10 Javascript
详解key在Vue列表渲染时究竟起到了什么作用
Apr 20 Javascript
详解微信小程序轨迹回放实现及遇到的坑
Feb 02 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
PHP的mysqli_query参数MYSQLI_STORE_RESULT和MYSQLI_USE_RESULT的区别
2014/09/29 PHP
Thinkphp多文件上传实现方法
2014/10/31 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
thinkphp3.2实现在线留言提交验证码功能
2017/07/19 PHP
js 小数取整的函数
2010/05/10 Javascript
Iframe实现跨浏览器自适应高度解决方法
2014/09/02 Javascript
javascript中的遍历for in 以及with的用法
2014/12/22 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
2015/05/15 Javascript
chrome下判断点击input上标签还是其余标签的实现方法
2016/09/18 Javascript
Javascript 创建类并动态添加属性及方法的简单实现
2016/10/20 Javascript
easyUI实现(alert)提示框自动关闭的实例代码
2016/11/07 Javascript
原生的强大DOM选择器querySelector介绍
2016/12/21 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
vue下使用nginx刷新页面404的问题解决
2019/08/02 Javascript
vue 使用饿了么UI仿写teambition的筛选功能
2021/03/01 Vue.js
NodeJS和浏览器中this关键字的不同之处
2021/03/03 NodeJs
[48:39]Ti4主赛事胜者组第一天 EG vs NEWBEE 2
2014/07/19 DOTA
用python分割TXT文件成4K的TXT文件
2009/05/23 Python
python中self原理实例分析
2015/04/30 Python
Python3实现将文件树中所有文件和子目录归档到tar压缩文件的方法
2015/05/22 Python
python带参数打包exe及调用方式
2019/12/21 Python
解决python replace函数替换无效问题
2020/01/18 Python
解决pycharm不能自动补全第三方库的函数和属性问题
2020/03/12 Python
贝斯特韦斯特酒店集团官网:Best Western
2019/01/03 全球购物
Lentiamo比利时:便宜的隐形眼镜
2020/02/14 全球购物
技术学校毕业生求职信分享
2013/12/02 职场文书
英语专业个人求职信范文
2014/02/01 职场文书
企业宣传标语
2014/06/09 职场文书
我的中国梦演讲稿800字
2014/08/19 职场文书
证券公司客户经理岗位职责
2015/04/09 职场文书
个人催款函范文
2015/06/23 职场文书
浅谈MySQL next-key lock 加锁范围
2021/06/07 MySQL
Nginx stream 配置代理(Nginx TCP/UDP 负载均衡)
2021/11/17 Servers
vue项目proxyTable配置和部署服务器
2022/04/14 Vue.js