js中Map和Set的用法及区别实例详解


Posted in Javascript onFebruary 15, 2022

首先了解一下 Map

Map 是一组键值对的结构,和 JSON 对象类似。

(1) Map数据结构如下

这里我们可以看到的是Map的数据结构是一个键值对的结构

js中Map和Set的用法及区别实例详解

(2) key 不仅可以是字符串还可以是对象

var obj ={name:"小如",age:9}
let map = new Map()
map.set(obj,"111")

打印结果如下

js中Map和Set的用法及区别实例详解

(3) Map常用语法如下

//初始化`Map`需要一个二维数组(请看 Map 数据结构),或者直接初始化一个空`Map` 
let map = new Map();

//添加key和value值
map.set('Amy','女')
map.set('liuQi','男')

//是否存在key,存在返回true,反之为false
map.has('Amy') //true
map.has('amy') //false

//根据key获取value
map.get('Amy') //女

//删除 key为Amy的value
map.delete('Amy')
map.get('Amy') //undefined  删除成功

(4) 一个key只能对应一个value,多次对一个key放入value,后面的值会把前面的值覆盖掉

var map =new Map
map.set('Amy',"女")
map.set('Amy',"男")
console.log(map)

打印结果如下

js中Map和Set的用法及区别实例详解

再来了解一下 Set

Set 对象类似于数组,且成员的值都是唯一的

(1) 打印出的数据结构如下

这里打印出来是一个对象

js中Map和Set的用法及区别实例详解

(2) 最常用来去重使用,去重方法有很多但是都没有它运行的快。

var arr=[1,3,4,2,5,1,4]
// 这里原本是一个对象用了es6的语法 转化成了数组,就是转化数组之前已经过滤掉了重复的元素了
var arr2=[...new Set(arr)] //[1,3,4,2,5]

(3) Set常用语法如下

//初始化一个Set ,需要一个Array数组,要么空Set
var set = new Set([1,2,3,5,6]) 
console.log(set)  // {1, 2, 3, 5, 6}

//添加元素到Set中
set.add(7) //{1, 2, 3, 5, 6, 7}

//删除Set中的元素
set.delete(3) // {1, 2, 5, 6, 7}

//检测是否含有此元素,有为true,没有则为false
set.has(2) //true

总结Map和Set的区别

(1) 这两种方法具有极快的查找速度;那么下面我们来对比一下Map,Set,Array 的执行时间

//首先初始化数据
var lng=100
var arr =new Array(lng).fill(2)
var set =new Set(arr)
let map =new Map()
for(var i=0;i<lng;i++){
arr[i]=i
map.set(i,arr[i])
}

// Array
console.time()
for(var j=0;j<lng;j++){
arr.includes(j)
}
console.timeEnd()  //default: 0.01220703125 ms


// Set
console.time()
for(var j=0;j<lng;j++){
set.has(j)
}
console.timeEnd()  // default: 0.005859375 ms

// Map
console.time()
for(var j=0;j<lng;j++){
map.has(j)
}
console.timeEnd()
// default: 0.007080078125 ms

通过以上几种方法我们可以看到,Set执行时间最短,那么查找速度最快,当然了Set 和 Map的查找速度都很快想差不大,所以说这两种方法具有极快的查找速度。

(2) 初始化需要的值不一样,Map需要的是一个二维数组,而Set 需要的是一维 Array 数组

(3) Map 和 Set 都不允许键重复

(4) Map的键是不能修改,但是键对应的值是可以修改的;Set不能通过迭代器来改变Set的值,因为Set的值就是键。

(5) Map 是键值对的存在,值也不作为健;而 Set 没有 value 只有 key,value 就是 key;

结语:

Map 和 Set 数据结构是ES6语法,最大优点就是运行时间少大大提高了性能。

到此这篇关于js中Map和Set用法及区别的文章就介绍到这了,更多相关js中Map和Set用法区别内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript编程起步(第三课)
Feb 27 Javascript
js编码之encodeURIComponent使用介绍(asp,php)
Mar 01 Javascript
jQuery焦点图切换特效插件封装实例
Aug 18 Javascript
jquery跨域请求示例分享(jquery发送ajax请求)
Mar 25 Javascript
使用js画图之饼图
Jan 12 Javascript
JS模拟的Map类实现方法
Jun 17 Javascript
jQuery导航条固定定位效果实例代码
May 26 jQuery
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
jquery一键控制checkbox全选、反选或全不选
Oct 16 jQuery
浅谈vue引入css,less遇到的坑和解决方法
Jan 20 Javascript
javascript写一个ajax自动拦截并下载数据代码实例
Sep 07 Javascript
原生js滑动轮播封装
Jul 31 Javascript
canvas实现贪食蛇的实践
Vue自定义铃声提示音组件的实现
Jan 22 #Vue.js
JavaScript实例 ODO List分析
Jan 22 #Javascript
JavaScript ES6的函数拓展
Jan 18 #Javascript
Vue提供的三种调试方式你知道吗
Jan 18 #Vue.js
详解Vue项目的打包方式(生成dist文件)
Jan 18 #Vue.js
html5调用摄像头截图功能
Jan 18 #Javascript
You might like
php更改目录及子目录下所有的文件后缀扩展名的代码
2010/10/12 PHP
PHP生成json和xml类型接口数据格式
2015/05/17 PHP
PHP的伪随机数与真随机数详解
2015/05/27 PHP
PHP substr()函数参数解释及用法讲解
2017/11/23 PHP
Mac下快速搭建PHP开发环境步骤详解
2019/05/05 PHP
javascript 数字格式化输出的实现代码
2013/12/10 Javascript
如何实现chrome浏览器关闭页面时弹出“确定要离开此面吗?”
2015/03/05 Javascript
JS打字效果的动态菜单代码分享
2015/08/21 Javascript
深入分析jQuery的ready函数是如何工作的(工作原理)
2015/12/17 Javascript
基于javascript实现动态显示当前系统时间
2016/01/28 Javascript
限制只能输入数字的实现代码
2016/05/16 Javascript
BootStrap selectpicker
2016/06/20 Javascript
使用JS轻松实现ionic调用键盘搜索功能(超实用)
2016/09/06 Javascript
从零开始学习Node.js系列教程二:文本提交与显示方法
2017/04/13 Javascript
Node+Express+MongoDB实现登录注册功能实例
2017/04/23 Javascript
Angular.JS中select下拉框设置value的方法
2017/06/20 Javascript
Vue实现内部组件轮播切换效果的示例代码
2018/04/07 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
在 Vue-CLI 中引入 simple-mock实现简易的 API Mock 接口数据模拟
2018/11/28 Javascript
jquery.tagsinput.js实现记录checkbox勾选的顺序
2019/09/21 jQuery
零基础写python爬虫之爬虫框架Scrapy安装配置
2014/11/06 Python
Python中使用strip()方法删除字符串中空格的教程
2015/05/20 Python
批处理与python代码混合编程的方法
2016/05/19 Python
Python如何生成树形图案
2018/01/03 Python
python实现给scatter设置颜色渐变条colorbar的方法
2018/12/13 Python
python使用yield压平嵌套字典的超简单方法
2019/11/02 Python
python 将视频 通过视频帧转换成时间实例
2020/04/23 Python
Python调用jar包方法实现过程解析
2020/08/11 Python
在python中对于bool布尔值的取反操作
2020/12/11 Python
用CSS3的box-reflect来制作倒影效果
2016/11/15 HTML / CSS
Weekendesk意大利:探索多种引人入胜的周末主题
2016/10/14 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
遗体告别仪式答谢词
2014/01/23 职场文书
惊天动地观后感
2015/06/10 职场文书
高中历史教学反思
2016/02/19 职场文书
快消品行业营销模式与盈利模式分享
2019/09/27 职场文书