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 相关文章推荐
jQuery中使用了document和window哪些属性和方法小结
Sep 13 Javascript
关于JavaScript中string 的replace
Apr 12 Javascript
Egret引擎开发指南之创建项目
Sep 03 Javascript
jQuery mobile 移动web(4)
Dec 20 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
基于JQuery实现图片上传预览与删除操作
May 24 Javascript
JS仿hao123导航页面图片轮播效果
Sep 01 Javascript
概述jQuery的元素筛选
Nov 23 Javascript
jquery实现转盘抽奖功能
Jan 06 Javascript
jQuery插件echarts实现的多折线图效果示例【附demo源码下载】
Mar 04 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
微信小程序 生成携带参数的二维码
Oct 23 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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
php下通过POST还是GET来传值
2008/06/05 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
学习php设计模式 php实现建造者模式
2015/12/07 PHP
PHP实现图片不变型裁剪及图片按比例裁剪的方法
2016/01/14 PHP
php获取服务器操作系统相关信息的方法
2016/10/08 PHP
Yii框架批量插入数据扩展类的简单实现方法
2017/05/23 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
laravel框架中视图的基本使用方法分析
2019/11/23 PHP
jQuery之日期选择器的深入解析
2013/06/19 Javascript
js控制table合并具体实现
2014/02/20 Javascript
理解jQuery stop()方法
2014/11/21 Javascript
JQuery radio(单选按钮)操作方法汇总
2015/04/15 Javascript
使用Node.js给图片加水印的方法
2016/11/15 Javascript
移动端脚本框架Hammer.js
2016/12/15 Javascript
JS实现物体带缓冲的间歇运动效果示例
2016/12/22 Javascript
jQuery实现点击关注和取消功能
2017/07/03 jQuery
JS解析url查询参数的简单代码
2017/08/06 Javascript
Vue+Vux项目实践完整代码
2017/11/30 Javascript
详解Webpack多环境代码打包的方法
2018/08/03 Javascript
vue实现与安卓、IOS交互的方法
2018/11/02 Javascript
解决Vue中使用keepAlive不缓存问题
2020/08/04 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
python面向对象_详谈类的继承与方法的重载
2017/06/07 Python
python3+PyQt5 实现Rich文本的行编辑方法
2019/06/17 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
如何清空python的变量
2020/07/05 Python
德国团购网站:Groupon德国
2018/03/13 全球购物
阿联酋彩妆品牌:OUD MILANO
2019/10/06 全球购物
上班睡觉检讨书
2014/01/09 职场文书
校园创业策划书
2014/01/14 职场文书
民主生活会整改措施(党员)
2014/09/18 职场文书
运动会闭幕词
2015/01/28 职场文书
高一数学教学反思
2016/02/18 职场文书
同学联谊会邀请函
2019/06/24 职场文书
Mysql数据库按时间点恢复实战记录
2021/06/30 MySQL