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和DOM Interfaces来处理HTML
Oct 09 Javascript
记录几个javascript有关的小细节
Apr 02 Javascript
JavaScript OOP面向对象介绍
Dec 02 Javascript
原生js结合html5制作简易的双色子游戏
Mar 30 Javascript
JavaScript整除运算函数ceil和floor的区别分析
Apr 14 Javascript
BootStrap智能表单实战系列(七)验证的支持
Jun 13 Javascript
Bootstrap 最常用的JS插件系列总结(图片轮播、标签切换等)
Jul 14 Javascript
Google 地图类型详解及示例代码
Aug 06 Javascript
浅谈js键盘事件全面控制
Dec 01 Javascript
详解react如何在组件中获取路由参数
Jun 15 Javascript
关于vuejs中v-if和v-show的区别及v-show不起作用问题
Mar 26 Javascript
Vue ECharts实现机舱座位选择展示功能
May 15 Vue.js
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
2020年4月新番动漫目录 官方宣布4月播出的作品一览
2020/03/08 日漫
PHP 定界符 使用技巧
2009/06/14 PHP
PHP 杂谈《重构-改善既有代码的设计》之四 简化条件表达式
2012/04/09 PHP
PHP中函数gzuncompress无法使用的解决方法
2017/03/02 PHP
PHP开发之归档格式phar文件概念与用法详解【创建,使用,解包还原提取】
2017/11/17 PHP
Codeigniter里的无刷新上传的实现代码
2019/04/14 PHP
JavaScript接口实现代码 (Interfaces In JavaScript)
2010/06/11 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
treepanel动态加载数据实现代码
2012/12/15 Javascript
jquery常用操作小结
2014/07/21 Javascript
用jquery实现动画跳到顶部和底部(这个比较简单)
2014/09/01 Javascript
javascript常用代码段搜集
2014/12/04 Javascript
JS实现的仿东京商城菜单、仿Win右键菜单及仿淘宝TAB特效合集
2015/09/28 Javascript
JS实现合并两个数组并去除重复项只留一个的方法
2015/12/17 Javascript
利用策略模式与装饰模式扩展JavaScript表单验证功能
2017/02/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
微信小程序实现折叠面板
2018/01/31 Javascript
实例详解Node.js 函数
2018/06/10 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
JS实现动态无缝轮播
2020/01/11 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
答题辅助python代码实现
2018/01/16 Python
Python3.5文件读与写操作经典实例详解
2019/05/01 Python
详解Python可视化神器Yellowbrick使用
2019/11/11 Python
Python自动重新加载模块详解(autoreload module)
2020/04/01 Python
keras实现VGG16方式(预测一张图片)
2020/07/07 Python
Python爬虫模拟登陆哔哩哔哩(bilibili)并突破点选验证码功能
2020/12/21 Python
HTML5 新旧语法标记对我们有什么好处
2012/12/13 HTML / CSS
产品销售员岗位职责
2013/12/18 职场文书
致接力运动员广播稿
2014/02/17 职场文书
自愿离婚协议书范本
2014/09/13 职场文书
2015年信访维稳工作总结
2015/04/07 职场文书
教师培训学习心得体会
2016/01/21 职场文书
2016天猫双十一广告语
2016/01/28 职场文书
pytorch 预训练模型读取修改相关参数的填坑问题
2021/06/05 Python
Go 语言中 20 个占位符的整理
2021/10/16 Golang