JavaScript之Map和Set_动力节点Java学院整理


Posted in Javascript onJune 29, 2017

JavaScript的默认对象表示方式{}可以视为其他语言中的MapDictionary的数据结构,即一组键值对。
但是JavaScript的对象有个小问题,就是键必须是字符串。但实际上Number或者其他数据类型作为键也是非常合理的。
为了解决这个问题,最新的ES6规范引入了新的数据类型Map。要测试你的浏览器是否支持ES6规范,请执行以下代码,如果浏览器报ReferenceError错误,那么你需要换一个支持ES6的浏览器:

'use strict';
var m = new Map();
var s = new Set();
alert('你的浏览器支持Map和Set!');

Map

Map是一组键值对的结构,具有极快的查找速度。

举个例子,假设要根据同学的名字查找对应的成绩,如果用Array实现,需要两个Array:

var names = ['Michael', 'Bob', 'Tracy'];
var scores = [95, 75, 85];

给定一个名字,要查找对应的成绩,就先要在names中找到对应的位置,再从scores取出对应的成绩,Array越长,耗时越长。

如果用Map实现,只需要一个“名字”-“成绩”的对照表,直接根据名字查找成绩,无论这个表有多大,查找速度都不会变慢。用JavaScript写一个Map如下:

var m = new Map([['Michael', 95], ['Bob', 75], ['Tracy', 85]]);
m.get('Michael'); // 95

初始化Map需要一个二维数组,或者直接初始化一个空MapMap具有以下方法:

var m = new Map(); // 空Map
m.set('Adam', 67); // 添加新的key-value
m.set('Bob', 59);
m.has('Adam'); // 是否存在key 'Adam': true
m.get('Adam'); // 67
m.delete('Adam'); // 删除key 'Adam'
m.get('Adam'); // undefined

由于一个key只能对应一个value,所以,多次对一个key放入value,后面的值会把前面的值冲掉:

var m = new Map();
m.set('Adam', 67);
m.set('Adam', 88);
m.get('Adam'); // 88

Set

SetMap类似,也是一组key的集合,但不存储value。由于key不能重复,所以,在Set中,没有重复的key
要创建一个Set,需要提供一个Array作为输入,或者直接创建一个空Set

var s1 = new Set(); // 空Set
var s2 = new Set([1, 2, 3]); // 含1, 2, 3

重复元素在Set中自动被过滤:

var s = new Set([1, 2, 3, 3, '3']);
s; // Set {1, 2, 3, "3"}

注意数字3和字符串'3'是不同的元素。

通过add(key)方法可以添加元素到Set中,可以重复添加,但不会有效果:

>>> s.add(4)
>>> s
{1, 2, 3, 4}
>>> s.add(4)
>>> s
{1, 2, 3, 4}

通过delete(key)方法可以删除元素:

var s = new Set([1, 2, 3]);
s; // Set {1, 2, 3}
s.delete(3);
s; // Set {1, 2}

小结

Map和Set是ES6标准新增的数据类型,请根据浏览器的支持情况决定是否要使用。

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

Javascript 相关文章推荐
innerHTML 和 getElementsByName 在IE下面的bug 的解决
Apr 09 Javascript
js几秒以后倒计时跳转示例
Dec 26 Javascript
jquery 通过name快速取值示例
Jan 24 Javascript
使用js操作css实现js改变背景图片示例
Mar 10 Javascript
javascript操作excel生成报表示例
May 08 Javascript
js日期插件dateHelp获取本月、三个月、今年的日期
Mar 07 Javascript
jQuery实现两个select控件的互移操作
Dec 22 Javascript
Vue分页组件实例代码
Apr 17 Javascript
老生常谈js-react组件生命周期
May 02 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
Aug 17 Javascript
微信小程序自定义组件封装及父子间组件传值的方法
Aug 28 Javascript
vue中的过滤器实例代码详解
Jun 06 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之json_动力节点Java学院整理
Jun 29 #Javascript
JavaScript之RegExp_动力节点Java学院整理
Jun 29 #Javascript
详解微信小程序设置底部导航栏目方法
Jun 29 #Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 #Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 #jQuery
详解vue父子组件间传值(props)
Jun 29 #Javascript
You might like
smarty静态实验表明,网络上是错的~呵呵
2006/11/25 PHP
延长phpmyadmin登录时间的方法
2011/02/06 PHP
php中get_object_vars()方法用法实例
2015/02/08 PHP
php身份证号码检查类实例
2015/06/18 PHP
用javascript编写的第一人称射击游戏
2007/02/25 Javascript
jQuery实现等比例缩放大图片让大图片自适应页面布局
2013/10/16 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
回车直接实现点击某按钮的效果即触发单击事件
2014/02/27 Javascript
javascript监听鼠标滚轮事件浅析
2014/06/05 Javascript
jQuery实现DIV层淡入淡出拖动特效的方法
2015/02/13 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
jQuery实现仿百度首页滑动伸缩展开的添加服务效果代码
2015/09/09 Javascript
JS实现alert中显示换行的方法
2015/12/17 Javascript
jquery mobile 移动web(5)
2015/12/20 Javascript
Javascript中的arguments对象
2016/06/20 Javascript
jQuery回到顶部的代码
2016/07/09 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
AngularJS 最常用的八种功能(基础知识)
2017/06/26 Javascript
jquery判断滚动条距离顶部的距离方法
2018/09/05 jQuery
[03:08]迎霜节狂欢!2018年迎霜节珍藏Ⅰ一览
2018/12/25 DOTA
C#返回当前系统所有可用驱动器符号的方法
2015/04/18 Python
Python中threading模块join函数用法实例分析
2015/06/04 Python
python中的字典使用分享
2016/07/31 Python
CentOS中升级Python版本的方法详解
2017/07/10 Python
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
阿联酋优惠券服务:Living Kool
2019/12/12 全球购物
工作自荐信
2013/12/11 职场文书
优秀毕业生求职信范文
2014/01/02 职场文书
环境工程专业自荐信
2014/03/03 职场文书
公司离职证明样本
2014/09/13 职场文书
资产运营委托书范本
2014/10/16 职场文书
同意报考证明
2015/06/17 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016继续教育培训学习心得体会
2016/01/19 职场文书