浅谈es6 javascript的map数据结构


Posted in Javascript onDecember 14, 2017

本文介绍了es6 javascript的map数据结构,分享给大家,具体如下:

Map 结构的目的和基本用法

JavaScript 的对象( Object), 本质上是键值对的集合( Hash 结构), 但是传统上只能用字符串当作键。 这给它的使用带来了很大的限制。

var data = {}; 
var element = document.getElementById('myDiv'); 
data[element] = 'metadata'; 
data['[object HTMLDivElement]'] // "metadata"

上面代码原意是将一个 DOM 节点作为对象data的键, 但是由于对象只接受字符串作为键名, 所以element被自动转为字符串[object HTMLDivElement]。

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

var m = new Map(); 
var o = { 
 p: 'Hello World' 
}; 
m.set(o, 'content') 
m.get(o) // "content" 
m.has(o) // true 
m.delete(o) // true 
m.has(o) // false

上面代码使用set方法, 将对象o当作m的一个键, 然后又使用get方法读取这个键, 接着使用delete方法删除了这个键。
作为构造函数, Map 也可以接受一个数组作为参数。 该数组的成员是一个个表示键值对的数组。

var map = new Map([ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]); 
map.size // 2 
map.has('name') // true 
map.get('name') // " 张三 " 
map.has('title') // true 
map.get('title') // "Author"

上面代码在新建 Map 实例时, 就指定了两个键name和title。

Map 构造函数接受数组作为参数, 实际上执行的是下面的算法。

var items = [ 
 ['name', ' 张三 '], 
 ['title', 'Author'] 
]; 
var map = new Map(); 
items.forEach(([key, value]) => map.set(key, value));

下面的例子中, 字符串true和布尔值true是两个不同的键。

var m = new Map([ 
 [true, 'foo'], 
 ['true', 'bar'] 
]); 
m.get(true) // 'foo' 
m.get('true') // 'bar'

如果对同一个键多次赋值, 后面的值将覆盖前面的值。

let map = new Map(); 
map 
 .set(1, 'aaa') 
 .set(1, 'bbb'); 
map.get(1) // "bbb"

上面代码对键1连续赋值两次, 后一次的值覆盖前一次的值。

如果读取一个未知的键, 则返回undefined。

new Map().get('asfddfsasadf') 
 // undefined

注意, 只有对同一个对象的引用, Map 结构才将其视为同一个键。 这一点要非常小心。

var map = new Map(); 
map.set(['a'], 555); 
map.get(['a']) // undefined

上面代码的set和get方法, 表面是针对同一个键, 但实际上这是两个值, 内存地址是不一样的, 因此get方法无法读取该键, 返回undefined。

同理, 同样的值的两个实例, 在 Map 结构中被视为两个键。

var map = new Map(); 
var k1 = ['a']; 
var k2 = ['a']; 
map 
 .set(k1, 111) 
 .set(k2, 222); 
map.get(k1) // 111 
map.get(k2) // 222

上面代码中, 变量k1和k2的值是一样的, 但是它们在 Map 结构中被视为两个键。

由上可知, Map 的键实际上是跟内存地址绑定的, 只要内存地址不一样, 就视为两个键。 这就解决了同名属性碰撞( clash) 的问题, 我们扩展别人的库的时候, 如果使用对象作为键名, 就不用担心自己的属性与原作者的属性同名。

如果 Map 的键是一个简单类型的值( 数字、 字符串、 布尔值), 则只要两个值严格相等, Map 将其视为一个键, 包括0和 - 0。 另外, 虽然NaN不严格相等于自身, 但 Map 将其视为同一个键。

let map = new Map(); 
map.set(NaN, 123); 
map.get(NaN) // 123 
map.set(-0, 123); 
map.get(+0) // 123

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
兼容多浏览器的iframe自适应高度(ie8 、谷歌浏览器4.0和 firefox3.5.3)
Nov 04 Javascript
用jquery设置按钮的disabled属性的实现代码
Nov 28 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
Nov 06 Javascript
浅析hasOwnProperty方法的应用
Nov 20 Javascript
javascript中HTMLDOM操作详解
Dec 11 Javascript
javascript去掉代码里面的注释
Jul 24 Javascript
BootStrap 图片样式、辅助类样式和CSS组件的实例详解
Jan 20 Javascript
javascript常用的设计模式
Feb 09 Javascript
js实现模糊匹配功能
Feb 15 Javascript
Angular.js中数组操作的方法教程
Jul 31 Javascript
vue中v-for循环给标签属性赋值的方法
Oct 18 Javascript
微信小程序实现点击生成随机验证码
Sep 09 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 #Javascript
vue登录注册及token验证实现代码
Dec 14 #Javascript
基于vue 实现token验证的实例代码
Dec 14 #Javascript
JavaScript实现左侧菜单效果
Dec 14 #Javascript
JavaScript实现全选取消效果
Dec 14 #Javascript
vue.js中引入vuex储存接口数据及调用的详细流程
Dec 14 #Javascript
javascript实现数字配对游戏的实例讲解
Dec 14 #Javascript
You might like
php和jquery实现地图区域数据统计展示数据示例
2014/02/12 PHP
PHP实现对文本数据库的常用操作方法实例演示
2014/07/04 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
Laravel 5框架学习之Eloquent (laravel 的ORM)
2015/04/08 PHP
PHP中session跨子域的三种实现方法
2016/07/25 PHP
php 实现银联商务H5支付的示例代码
2019/10/12 PHP
Prototype源码浅析 String部分(一)之有关indexOf优化
2012/01/15 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
2014/05/04 Javascript
javascript实现的平方米、亩、公顷单位换算小程序
2014/08/11 Javascript
node-webkit打包成exe文件被360误报木马的解决方法
2015/03/11 Javascript
原生JS:Date对象全面解析
2016/09/06 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
vue中datepicker的使用教程实例代码详解
2019/07/08 Javascript
微信小程序 授权登录详解(附完整源码)
2019/08/23 Javascript
npm ci命令的基本使用方法
2020/09/20 Javascript
python列表操作使用示例分享
2014/02/21 Python
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
pygame 精灵的行走及二段跳的实现方法(必看篇)
2017/07/10 Python
numpy中实现二维数组按照某列、某行排序的方法
2018/04/04 Python
使用Python实现一个栈判断括号是否平衡
2018/08/23 Python
Django 导出项目依赖库到 requirements.txt过程解析
2019/08/23 Python
Django1.11配合uni-app发起微信支付的实现
2019/10/12 Python
Python如何使用bokeh包和geojson数据绘制地图
2020/03/21 Python
python实现批量转换图片为黑白
2020/06/16 Python
有关pycharm登录github时有的时候会报错connection reset的问题
2020/09/15 Python
解决Pyinstaller打包软件失败的一个坑
2021/03/04 Python
HTML5 Blob对象的具体使用
2020/05/22 HTML / CSS
中层竞聘演讲稿
2014/01/09 职场文书
公司会计主管岗位责任制
2014/03/01 职场文书
日语专业毕业生自荐书
2014/06/18 职场文书
三八妇女节超市活动方案
2014/08/18 职场文书
我的梦想演讲稿500字
2014/08/21 职场文书
出国签证在职证明范本
2014/11/24 职场文书
水电施工员岗位职责
2015/04/11 职场文书
实操Python爬取觅知网素材图片示例
2021/11/27 Python