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技术技巧大全(五)
Jan 22 Javascript
jquery操作checkbox示例分享
Jul 21 Javascript
jQuery判断指定id的对象是否存在的方法
May 22 Javascript
深入理解angularjs过滤器
May 25 Javascript
jQuery simpleModal插件的使用介绍
Aug 30 Javascript
基于Vue2的移动端开发环境搭建详解
Nov 03 Javascript
jQuery validata插件实现方法
Jun 25 jQuery
ES6 javascript的异步操作实例详解
Oct 30 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
用npm-run实现自动化任务的方法示例
Jan 14 Javascript
微信小程序实现定位及到指定位置导航的示例代码
Aug 20 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&MYSQL分页原理及实现
2007/01/02 PHP
php编写一个简单的路由类
2011/04/13 PHP
如何用PHP实现插入排序?
2013/04/10 PHP
smarty模板引擎中内建函数if、elseif和else的使用方法
2015/01/22 PHP
利用php实现一周之内自动登录存储机制(cookie、session、localStorage)
2016/10/31 PHP
php微信公众号开发之秒杀
2018/10/20 PHP
PHP Include文件实例讲解
2019/02/15 PHP
PHP code 验证码生成类定义和简单使用示例
2020/05/27 PHP
Seajs的学习笔记
2014/03/04 Javascript
使用JavaScript+canvas实现图片裁剪
2015/01/30 Javascript
浅谈JavaScript的内置对象和浏览器对象
2016/06/03 Javascript
node.js cookie-parser之parser.js
2016/06/06 Javascript
AngularJS 模型详细介绍及实例代码
2016/07/27 Javascript
微信小程序 scroll-view实现上拉加载与下拉刷新的实例
2017/01/21 Javascript
Angularjs分页查询的实现
2017/02/24 Javascript
微信小程序实现随机验证码功能
2018/12/20 Javascript
vue中组件的3种使用方式详解
2019/03/23 Javascript
vue项目中播放rtmp视频文件流的方法
2020/09/17 Javascript
解决element-ui的下拉框有值却无法选中的情况
2020/11/07 Javascript
跟老齐学Python之画圈还不简单吗?
2014/09/20 Python
Python Collatz序列实现过程解析
2019/10/12 Python
利用Tensorboard绘制网络识别准确率和loss曲线实例
2020/02/15 Python
Python安装与卸载流程详细步骤(图解)
2020/02/20 Python
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
英国打印机墨水和碳粉商店:Printerinks
2017/06/30 全球购物
毕业生个人的自我评价优秀范文
2013/10/03 职场文书
计算机应用毕业生自荐信
2013/10/23 职场文书
商业活动邀请函
2014/02/04 职场文书
中专自我鉴定
2014/02/05 职场文书
《九寨沟》教学反思
2014/04/08 职场文书
综治维稳工作承诺书
2014/08/30 职场文书
婚前财产协议书范本
2014/10/19 职场文书
大雁塔英文导游词
2015/02/10 职场文书
退休教师欢送会致辞
2015/07/31 职场文书
校园运动会广播稿
2015/08/19 职场文书
python 学习GCN图卷积神经网络
2022/05/11 Python