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 相关文章推荐
动态载入/删除/更新外部 JavaScript/Css 文件的代码
Jul 03 Javascript
jquery 全局AJAX事件使用代码
Nov 05 Javascript
javascript中IE浏览器不支持NEW DATE()带参数的解决方法
Mar 01 Javascript
JS阻止用户多次提交示例代码
Mar 26 Javascript
jQuery使用andSelf()来包含之前的选择集
May 19 Javascript
谈谈JavaScript自定义回调函数
Oct 18 Javascript
JS实现点击网页判断是否安装app并打开否则跳转app store
Nov 18 Javascript
深入理解ES7的async/await的用法
Sep 09 Javascript
看看“疫苗查询”小程序有温度的代码
Jul 31 Javascript
javascript面向对象三大特征之多态实例详解
Jul 24 Javascript
Vue事件处理原理及过程详解
Mar 11 Javascript
vue+elementui通用弹窗的实现(新增+编辑)
Jan 07 Vue.js
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
用PHP创建PDF中文文档
2006/10/09 PHP
PHP中危险的file_put_contents函数详解
2017/11/04 PHP
JS 的应用开发初探(mootools)
2009/12/19 Javascript
Js中使用hasOwnProperty方法检索ajax响应对象的例子
2014/12/08 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
基于JavaScript实现回到页面顶部动画代码
2016/05/24 Javascript
EasyUI加载完Html内容样式渲染完成后显示
2016/07/25 Javascript
js数组与字符串常用方法总结
2017/01/13 Javascript
node.js平台下的mysql数据库配置及连接
2017/03/31 Javascript
Node.js实现发送邮件功能
2017/11/06 Javascript
JavaScript判断变量名是否存在数组中的实例
2017/12/28 Javascript
JS实现的雪花飘落特效示例
2019/12/03 Javascript
Openlayers3实现车辆轨迹回放功能
2020/09/29 Javascript
Vue中inheritAttrs的使用实例详解
2020/12/31 Vue.js
[02:04]2014DOTA2国际邀请赛 BBC小组赛第三天总结
2014/07/12 DOTA
python使用PyV8执行javascript代码示例分享
2013/12/04 Python
Python做文本按行去重的实现方法
2016/10/19 Python
Python 爬虫图片简单实现
2017/06/01 Python
python在每个字符后添加空格的实例
2018/05/07 Python
python 用lambda函数替换for循环的方法
2018/06/09 Python
python读取文本中的坐标方法
2018/10/14 Python
python 获取微信好友列表的方法(微信web)
2019/02/21 Python
Ubuntu18.04中Python2.7与Python3.6环境切换
2019/06/14 Python
python getpass实现密文实例详解
2019/09/24 Python
Python list与NumPy array 区分详解
2019/11/06 Python
Python判断变量是否是None写法代码实例
2020/10/09 Python
python爬虫爬取淘宝商品比价(附淘宝反爬虫机制解决小办法)
2020/12/03 Python
python实现学生通讯录管理系统
2021/02/25 Python
党员2014两会学习心得体会
2014/03/17 职场文书
党务公开方案
2014/05/06 职场文书
民事诉讼代理委托书
2014/10/08 职场文书
2016大学自主招生推荐信范文
2015/03/23 职场文书
2016年社会主义核心价值观心得体会
2016/01/21 职场文书
tensorflow中的数据类型dtype用法说明
2021/05/26 Python
html实现弹窗的实例
2021/06/09 HTML / CSS
Nginx动静分离配置实现与说明
2022/04/07 Servers