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 相关文章推荐
doctype后如何获得body.clientHeight的方法
Jul 11 Javascript
Track Image Loading效果代码分析
Aug 13 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
jQuery实现瀑布流布局
Dec 12 Javascript
JavaScript使用RegExp进行正则匹配的方法
Jul 11 Javascript
再JavaScript的jQuery库中编写动画效果的指南
Aug 13 Javascript
Bootstrap创建可折叠的组件
Feb 23 Javascript
angularjs 的数据绑定实现原理
Jul 02 Javascript
element-ui多文件上传的实现示例
Apr 10 Javascript
vue表单中遍历表单操作按钮的显示隐藏示例
Oct 30 Javascript
node.JS的crypto加密模块使用方法详解(MD5,AES,Hmac,Diffie-Hellman加密)
Feb 06 Javascript
小程序实现文字循环滚动动画
Jun 14 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 xml实例 留言本
2009/03/20 PHP
php数组合并的二种方法
2014/03/21 PHP
yii2.0实现pathinfo的形式访问的配置方法
2016/04/06 PHP
二叉树的非递归后序遍历算法实例详解
2014/02/07 Javascript
自己实现ajax封装示例分享
2014/04/01 Javascript
JS模式之单例模式基本用法
2015/06/30 Javascript
AngularJS基础 ng-cloak 指令简单示例
2016/08/01 Javascript
jquery实现全选、不选、反选的两种方法
2016/09/06 Javascript
微信小程序-消息提示框实例
2016/11/24 Javascript
js时间戳和c#时间戳互转方法(推荐)
2017/02/15 Javascript
详谈innerHTML innerText的使用和区别
2017/08/18 Javascript
vue双花括号的使用方法 附练习题
2017/11/07 Javascript
js判断节假日实例代码
2017/12/27 Javascript
解决使用bootstrap的dropdown部件时报错:error:Bootstrap dropdown require Popper.js问题
2018/08/30 Javascript
vue滚动固定顶部及修改样式的实例代码
2019/05/30 Javascript
JS中实现一个下载进度条及播放进度条的代码
2019/06/10 Javascript
layui表格数据重载
2019/07/27 Javascript
微信小程序开发摇一摇功能
2019/11/22 Javascript
[49:11]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第二场 12.20
2020/12/23 DOTA
python获取当前日期和时间的方法
2015/04/30 Python
Python的Bottle框架中返回静态文件和JSON对象的方法
2015/04/30 Python
python自动发邮件库yagmail的示例代码
2018/02/23 Python
python调用百度语音识别实现大音频文件语音识别功能
2018/08/30 Python
Python面向对象之类和对象实例详解
2018/12/10 Python
pytorch 输出中间层特征的实例
2019/08/17 Python
Python3 JSON编码解码方法详解
2019/09/06 Python
python的faker库用法
2019/11/28 Python
Orvis官网:自1856年以来,优质服装、飞钓装备等
2018/12/17 全球购物
俄罗斯童装网上商店:BebaKids
2020/06/06 全球购物
喜之郎果冻广告词
2014/03/20 职场文书
工作评语大全
2014/04/26 职场文书
会计学自荐信
2014/06/03 职场文书
2016党员党章学习心得体会
2016/01/14 职场文书
教师廉政准则心得体会
2016/01/20 职场文书
《金钱的魔力》教学反思
2016/02/20 职场文书
Python 中random 库的详细使用
2021/06/03 Python