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 相关文章推荐
asp 取文本框名称代码
Dec 02 Javascript
通过url查找a元素应用案例
Apr 29 Javascript
jquery用offset()方法获得元素的xy坐标
Sep 06 Javascript
JavaScript跨浏览器获取页面中相同class节点的方法
Mar 03 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
Dec 14 Javascript
用NODE.JS中的流编写工具是要注意的事项
Mar 01 Javascript
在页面中输出当前客户端时间javascript实例代码
Mar 02 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
Apr 07 Javascript
详解前端路由实现与react-router使用姿势
Aug 07 Javascript
vue配置请求本地json数据的方法
Apr 11 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
一个分页的论坛
2006/10/09 PHP
thinkphp连贯操作实例分析
2014/11/22 PHP
使用 PHPStorm 开发 Laravel
2015/03/24 PHP
WampServer搭建php环境时遇到的问题汇总
2015/07/23 PHP
PHP new static 和 new self详解
2017/02/19 PHP
解决laravel资源加载路径设置的问题
2019/10/14 PHP
CI框架简单分页类用法示例
2020/06/06 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
缓动函数requestAnimationFrame 更好的实现浏览器经动画
2012/12/07 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
利用jsonp与代理服务器方案解决跨域问题
2017/09/14 Javascript
webpack中的热刷新与热加载的区别
2018/04/09 Javascript
ES6基础之解构赋值(destructuring assignment)
2019/02/21 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
2019/08/09 Javascript
微信小程序进入广告实现代码实例
2019/09/19 Javascript
node使用mysql获取数据库数据中文乱码问题的解决
2019/12/02 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
[57:29]Alliance vs KG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/17 DOTA
开源软件包和环境管理系统Anaconda的安装使用
2017/09/04 Python
Python中表示字符串的三种方法
2017/09/06 Python
Python设计模式之命令模式简单示例
2018/01/10 Python
Python3.8对可迭代解包的改进及用法详解
2019/10/15 Python
python Tensor和Array对比分析
2020/01/08 Python
HTML5中的Scoped属性使用实例
2014/04/23 HTML / CSS
雅诗兰黛(Estee Lauder)英国官方网站:世界顶级化妆品牌
2016/12/29 全球购物
大学生毕业自我鉴定范文
2013/09/19 职场文书
培训班主持词
2014/03/28 职场文书
施工工地安全标语
2014/06/07 职场文书
爱心捐书活动总结
2014/07/05 职场文书
市贸粮局召开党的群众路线教育实践活动总结大会新闻稿
2014/10/21 职场文书
污染环境建议书
2015/09/14 职场文书
python实现MD5进行文件去重的示例代码
2021/07/09 Python
python周期任务调度工具Schedule使用详解
2021/11/23 Python