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系列(11) 执行上下文(Execution Contexts)
Jan 15 Javascript
Jquery获得控件值的三种方法总结
Feb 13 Javascript
jquery中checkbox全选失效的解决方法
Dec 26 Javascript
JS简单实现仿百度控制台输出信息效果
Sep 04 Javascript
JS只能输入正整数的简单实例
Oct 07 Javascript
js记录点击某个按钮的次数-刷新次数为初始状态的实例
Feb 15 Javascript
详解angularjs中如何实现控制器和指令之间交互
May 31 Javascript
浅析Visual Studio Code断点调试Vue
Feb 27 Javascript
移动端H5页面返回并刷新页面(BFcache)的方法
Nov 06 Javascript
微信小程序实现跳转的几种方式总结(推荐)
Apr 24 Javascript
一文快速详解前端框架 Vue 最强大的功能
May 21 Javascript
Vue 实现从文件中获取文本信息的方法详解
Oct 16 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
使用sockets:从新闻组中获取文章(一)
2006/10/09 PHP
php防止站外远程提交表单的方法
2014/10/20 PHP
php调用新浪短链接API的方法
2014/11/08 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
简单的自定义php模板引擎
2016/08/26 PHP
php使用PDO执行SQL语句的方法分析
2017/02/16 PHP
详解json在php中的应用
2018/09/30 PHP
判断控件是否已加载完成的代码
2010/02/24 Javascript
javascript 星级评分效果(手写)
2012/12/24 Javascript
让低版本浏览器支持input的placeholder属性(js方法)
2013/04/03 Javascript
Jquery中$.get(),$.post(),$.ajax(),$.getJSON()的用法总结
2013/11/14 Javascript
JavaScript判断FileUpload控件上传文件类型
2015/09/28 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
Node.js返回JSONP详解
2016/05/18 Javascript
关于JavaScript和jQuery的类型判断详解
2016/10/08 Javascript
让编辑器支持word复制黏贴、截屏的js代码
2016/10/17 Javascript
bootstrap监听滚动实现头部跟随滚动
2016/11/08 Javascript
关于vue单文件中引用路径的处理方法
2018/01/08 Javascript
js动态添加表格逐行添加、删除、遍历取值的实例代码
2018/01/25 Javascript
vue如何引入sass全局变量
2018/06/28 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
JavaScript 声明私有变量的两种方式
2021/02/05 Javascript
[01:31:02]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第一场
2019/08/22 DOTA
Python2.x与Python3.x的区别
2016/01/14 Python
举例讲解Python面相对象编程中对象的属性与类的方法
2016/01/19 Python
python 数据分析实现长宽格式的转换
2020/05/18 Python
python matplotlib工具栏源码探析二之添加、删除内置工具项的案例
2021/02/25 Python
老板电器官方购物商城:老板油烟机、燃气灶、消毒柜、电烤箱
2018/05/30 全球购物
SQL SERVER面试资料
2013/03/30 面试题
经销商年会策划方案
2014/05/29 职场文书
库房管理员岗位职责
2015/02/12 职场文书
公司停电通知
2015/04/15 职场文书
婚礼男方父母答谢词
2015/09/29 职场文书
建国70周年的心得体会(2篇)
2019/09/20 职场文书
Python音乐爬虫完美绕过反爬
2021/08/30 Python
postgresql中如何执行sql文件
2023/05/08 PostgreSQL