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查看html源文件
Nov 08 Javascript
input 和 textarea 输入框最大文字限制的jquery插件
Oct 27 Javascript
通过$(this)使用jQuery包装后的方法或属性
May 18 Javascript
javascript的switch用法注意事项分析
Feb 02 Javascript
JavaScript通过事件代理高亮显示表格行的方法
May 27 Javascript
javascript中递归函数用法注意点
Jul 30 Javascript
javascript回调函数的概念理解与用法分析
May 27 Javascript
jQuery实现的简单对话框拖动功能示例
Jun 05 jQuery
jQuery实现的导航条点击后高亮显示功能示例
Mar 04 jQuery
Vue实现表格批量审核功能实例代码
May 28 Javascript
微信小程序吸底区域适配iPhoneX的实现
Apr 09 Javascript
Ant Design Pro 之 ProTable使用操作
Oct 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中使用Oracle数据库(2)
2006/10/09 PHP
php实现rc4加密算法代码
2012/04/25 PHP
PHP中ob_start函数的使用说明
2013/11/11 PHP
PHP+Mysql无刷新问答评论系统(源码)
2016/12/20 PHP
iOS+PHP注册登录系统 PHP部分(上)
2016/12/26 PHP
php 三大特点:封装,继承,多态
2017/02/19 PHP
JavaScript效率调优经验
2009/06/04 Javascript
javascript静态页面传值的三种方法分享
2013/11/12 Javascript
JQuery判断radio(单选框)是否选中和获取选中值方法总结
2015/04/15 Javascript
js实现跨域访问的三种方法
2015/12/09 Javascript
BootStrap智能表单实战系列(八)表单配置json详解
2016/06/13 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
2016/12/26 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
微信小程序 弹幕功能简单实例
2017/02/14 Javascript
js登录滑动验证的实现(不滑动无法登陆)
2018/01/03 Javascript
微信小程序实现图片预览功能
2018/01/31 Javascript
浅谈VUE监听窗口变化事件的问题
2018/02/24 Javascript
jQuery滑动效果实现方法分析
2018/09/05 jQuery
Vue项目引发的「过滤器」使用教程
2019/03/12 Javascript
详解将微信小程序接口Promise化并使用async函数
2019/08/05 Javascript
[02:01]BBC DOTA2国际邀请赛每日综述:八强胜者组鏖战,中国队喜忧参半
2014/07/19 DOTA
在Python中实现贪婪排名算法的教程
2015/04/17 Python
使用Python3 编写简单信用卡管理程序
2016/12/21 Python
python简单实现操作Mysql数据库
2018/01/29 Python
python如何为被装饰的函数保留元数据
2018/03/21 Python
使用实现XlsxWriter创建Excel文件并编辑
2018/05/04 Python
Python3模拟登录操作实例分析
2019/03/12 Python
scrapy框架携带cookie访问淘宝购物车功能的实现代码
2020/07/07 Python
英文商务邀请信
2014/01/22 职场文书
护士实习求职信
2014/06/22 职场文书
励志演讲稿大全
2014/08/21 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
运动会200米广播稿
2015/08/19 职场文书
护士心得体会范文
2016/01/25 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
Mybatis是这样防止sql注入的
2021/12/06 Java/Android