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 相关文章推荐
event.keyCode键码值表 附只能输入特定的字符串代码
May 15 Javascript
extjs 的权限问题 要求控制的对象是 菜单,按钮,URL
Mar 09 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
Jun 14 Javascript
超详细的JS弹出窗口代码大全
Apr 18 Javascript
Vue.js系列之vue-router(上)(3)
Jan 03 Javascript
浅谈原生JS实现jQuery的animate()动画示例
Mar 08 Javascript
canvas实现环形进度条效果
Mar 23 Javascript
React通过父组件传递类名给子组件的实现方法
Nov 13 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
JS实现简单随机3D骰子
Oct 24 Javascript
javascript异常处理实现原理详解
Feb 17 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 curl模拟登录带验证码的网站
2015/11/30 PHP
PHP实现webshell扫描文件木马的方法
2017/07/31 PHP
Laravel路由研究之domain解决多域名问题的方法示例
2019/04/04 PHP
PHP使用JpGraph绘制折线图操作示例【附源码下载】
2019/10/18 PHP
用CSS+JS实现的进度条效果效果
2007/06/05 Javascript
JS 页面内容搜索,类似于 Ctrl+F功能的实现代码
2007/08/13 Javascript
json 定义
2008/06/10 Javascript
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架
2013/04/08 Javascript
JS字符串处理实例代码
2013/08/05 Javascript
从零学jquery之如何使用回调函数
2014/05/16 Javascript
jQuery+PHP打造滑动开关效果
2014/12/16 Javascript
jquery分页插件jquery.pagination.js使用方法解析
2016/04/01 Javascript
Javascript字符串拼接小技巧(推荐)
2016/06/02 Javascript
浅析$.getJSON异步请求和同步请求
2016/06/06 Javascript
jquery插件ContextMenu设置右键菜单
2017/03/13 Javascript
微信小程序商城项目之购物数量加减(3)
2017/04/17 Javascript
javascript实现非常简单的小数取整功能示例
2017/06/13 Javascript
js实现敏感词过滤算法及实现逻辑
2018/07/24 Javascript
Vue中实现权限控制的方法示例
2019/06/07 Javascript
JavaScript 斐波那契数列 倒序输出 输出100以内的质数代码实例
2019/09/11 Javascript
[01:00:11]DOTA2-DPC中国联赛 正赛 CDEC vs DLG BO3 第一场 2月7日
2021/03/11 DOTA
python如何实现反向迭代
2018/03/20 Python
python3实现随机数
2018/06/25 Python
Python中logging.NullHandler 的使用教程
2018/11/29 Python
对python中的装包与解包实例详解
2019/08/24 Python
Python3 A*寻路算法实现方式
2019/12/24 Python
Python3.7黑帽编程之病毒篇(基础篇)
2020/02/04 Python
PyQt 如何创建自定义QWidget
2021/03/24 Python
医药工作岗位求职信分享
2013/12/31 职场文书
户籍证明格式
2014/09/15 职场文书
婚前财产协议书范本
2014/10/19 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
岗位职责范本大全
2015/02/26 职场文书
心术观后感
2015/06/11 职场文书
实习证明格式范文
2015/06/16 职场文书
开学第一天的感想
2015/08/10 职场文书