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左右无缝滚动(一般方法+面向对象方法)
Aug 17 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript判断字符长度、数字、Email、电话等常用判断函数分享
Apr 01 Javascript
获取JS中网页各种高宽与位置的方法总结
Jul 27 Javascript
javascript使用 concat 方法对数组进行合并的方法
Sep 08 Javascript
字太多用...代替的方法(两种)
Mar 15 Javascript
微信小程序 setData的使用方法详解
Apr 20 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
vue+iview+less 实现换肤功能
Aug 17 Javascript
vue组件开发之用户无限添加自定义填写表单的方法
Aug 28 Javascript
小程序中canvas的drawImage方法参数使用详解
Jul 04 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表单提交表单名称含有点号(.)则会被转化为下划线(_)
2011/12/14 PHP
php加密解密实用类分享
2014/01/07 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
PHP get_html_translation_table()函数用法讲解
2019/02/16 PHP
js中数组Array的一些常用方法总结
2013/08/12 Javascript
利用JQuery和Servlet实现跨域提交请求示例分享
2014/02/12 Javascript
中止javascript执行的方法
2014/02/14 Javascript
jquery列表拖动排列(由项目提取相当好用)
2014/06/17 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
ajax如何实现页面局部跳转与结果返回
2015/08/24 Javascript
Js制作点击输入框时默认文字消失的效果
2015/09/05 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
javascript中的深复制详解及实例分析
2016/12/29 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
2018/05/09 Javascript
详解vue中async-await的使用误区
2018/12/05 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
Python自动化运维和部署项目工具Fabric使用实例
2016/09/18 Python
python爬取个性签名的方法
2018/06/17 Python
kafka-python批量发送数据的实例
2018/12/27 Python
Django 允许局域网中的机器访问你的主机操作
2020/05/13 Python
Python基础教程之输入输出和运算符
2020/07/26 Python
Python confluent kafka客户端配置kerberos认证流程详解
2020/10/12 Python
浅析python字符串前加r、f、u、l 的区别
2021/01/24 Python
英国综合网上购物商城:The Hut
2018/07/03 全球购物
Feelunique德国官方网站:欧洲最大的在线美容零售商
2019/07/20 全球购物
实践单位评语
2014/04/26 职场文书
查摆问题整改措施
2014/10/24 职场文书
2014年学校教学工作总结
2014/12/06 职场文书
爱心募捐通知范文
2015/04/27 职场文书
防震减灾主题班会
2015/08/14 职场文书
《为人民服务》教学反思
2016/02/20 职场文书
安全责任协议书范本
2016/03/23 职场文书
浅谈Go语言多态的实现与interface使用
2021/06/16 Golang
浅谈css实现背景颜色半透明的两种方法
2021/12/06 HTML / CSS