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 相关文章推荐
js函数般调用正则
Apr 08 Javascript
Prototype使用指南之selector.js说明
Oct 26 Javascript
一个分享按钮的插件使用介绍(可扩展,内附开发制作流程)
Sep 19 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
jquery中ajax函数执行顺序问题之如何设置同步
Feb 28 Javascript
js控制输入框获得和失去焦点时状态显示的方法
Jan 30 Javascript
Bootstrap入门书籍之(一)排版
Feb 17 Javascript
ES6新特性之模块Module用法详解
Apr 01 Javascript
vue单页面打包文件大?首次加载慢?nginx带你飞,从7.5M到1.3M蜕变过程(推荐)
Jan 16 Javascript
js序列化和反序列化的使用讲解
Jan 19 Javascript
js瀑布流布局的实现
Jun 28 Javascript
微信小程序实现多张图片上传功能
Nov 18 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
php设计模式 Proxy (代理模式)
2011/06/26 PHP
PHP在线生成二维码代码(google api)
2013/06/03 PHP
php求今天、昨天、明天时间戳的简单实现方法
2016/07/28 PHP
PHP实现将MySQL重复ID二维数组重组为三维数组的方法
2016/08/01 PHP
Javascript实例教程(19) 使用HoTMetal(3)
2006/12/23 Javascript
js怎么终止程序return不行换jfslk
2013/05/30 Javascript
JavaScript设计模式学习之“类式继承”
2015/03/12 Javascript
如何根据百度地图计算出两地之间的驾驶距离(两种语言js和C#)
2015/10/29 Javascript
jQuery基本选择器(实例及表单域value的获取方法)
2016/05/20 Javascript
vue+axios新手实践实现登陆的示例代码
2018/06/06 Javascript
vue给对象动态添加属性和值的实例
2019/09/09 Javascript
Vue(定时器)解决mounted不能获取到data中的数据问题
2020/07/30 Javascript
Openlayers+EasyUI Tree动态实现图层控制
2020/09/28 Javascript
Python定时器实例代码
2017/11/01 Python
linux查找当前python解释器的位置方法
2019/02/20 Python
Python爬取知乎图片代码实现解析
2019/09/17 Python
python如何从文件读取数据及解析
2019/09/19 Python
python使用openCV遍历文件夹里所有视频文件并保存成图片
2020/01/14 Python
python用opencv 图像傅里叶变换
2021/01/04 Python
阿里巴巴国际站:Alibaba.com
2016/07/21 全球购物
欧缇丽英国官方网站:Caudalie英国
2016/08/17 全球购物
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
Otticanet美国:最顶尖的世界名牌眼镜, 能得到打折季的价格
2019/03/10 全球购物
Camper鞋西班牙官方网上商店:西班牙马略卡岛的鞋类品牌
2019/03/14 全球购物
澳大利亚家庭花园和DIY工具网店:VidaXL
2019/05/03 全球购物
澳大利亚有机化妆品网上商店:The Well Store
2020/02/20 全球购物
家长写给老师的建议书
2014/03/13 职场文书
人事经理岗位职责
2014/04/28 职场文书
庆国庆活动总结
2014/08/28 职场文书
庆祝新中国成立65周年“向国旗敬礼”网上签名寄语
2014/09/27 职场文书
英语读书笔记
2015/07/02 职场文书
初中生物教学随笔
2015/08/15 职场文书
详解Apache SkyWalking 告警配置指南
2021/04/22 Servers
分析Python感知线程状态的解决方案之Event与信号量
2021/06/16 Python
SQL Server查询某个字段在哪些表中存在
2022/03/03 SQL Server
三星 3nm 芯片将于第二季度开始量产
2022/04/29 数码科技