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 相关文章推荐
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
重写javascript中window.confirm的行为
Oct 21 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
JavaScript定义变量和变量优先级问题探讨
Oct 11 Javascript
javascript比较两个日期的先后示例代码
Dec 31 Javascript
JavaScript实现获取dom中class的方法
Feb 09 Javascript
深入探讨javascript函数式编程
Oct 11 Javascript
JS动态改变浏览器标题的方法
Apr 06 Javascript
Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
Dec 31 Javascript
jQuery实现给input绑定回车事件的方法
Feb 09 Javascript
数组Array的排序sort方法
Feb 17 Javascript
微信小程序组件传值图示过程详解
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学习笔记 [预定义数组(超全局数组)]
2011/06/09 PHP
php导出word文档与excel电子表格的简单示例代码
2014/03/08 PHP
PHP中4个加速、缓存扩展的区别和选用建议
2014/03/12 PHP
PHP命名空间(Namespace)简明教程
2014/06/11 PHP
php通过PHPExcel导入Excel表格到MySQL数据库的简单实例
2016/10/29 PHP
JavaScript XML操作 封装类
2009/07/01 Javascript
网页图片延时加载的js代码
2010/04/22 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
jquery利用event.which方法获取键盘输入值的代码
2011/10/09 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
自己动手写的jquery分页控件(非常简单实用)
2015/10/28 Javascript
Bootstrap3.0学习教程之JS折叠插件
2016/05/27 Javascript
H5实现仿flash效果的实现代码
2017/09/29 Javascript
基于ajax和jsonp的原生封装(实例)
2017/10/16 Javascript
js实现点击按钮复制文本功能
2020/07/20 Javascript
[02:30]辉夜杯主赛事第二日胜者组半决赛 CDEC.Y赛后采访
2015/12/26 DOTA
python中使用enumerate函数遍历元素实例
2014/06/16 Python
python中去空格函数的用法
2014/08/21 Python
零基础写python爬虫之抓取百度贴吧并存储到本地txt文件改进版
2014/11/06 Python
使用Python求解最大公约数的实现方法
2015/08/20 Python
Python叠加两幅栅格图像的实现方法
2019/07/05 Python
在django view中给form传入参数的例子
2019/07/19 Python
python中bytes和str类型的区别
2019/10/21 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python startswith()和endswith() 方法原理解析
2020/04/28 Python
Tensorflow之MNIST CNN实现并保存、加载模型
2020/06/17 Python
Under Armour澳大利亚官网:美国知名的高端功能性运动品牌
2018/02/22 全球购物
荷兰电脑专场:Paradigit
2018/05/05 全球购物
英国天然抗衰老护肤品品牌:Nakin Skin Care
2019/04/16 全球购物
巴西最大的玩具连锁店:Ri Happy
2020/06/17 全球购物
世界上最大的皮肤科医生拥有和经营的美容网站:LovelySkin
2021/01/03 全球购物
班组长安全职责
2014/01/05 职场文书
招聘与培训专员岗位职责
2014/01/30 职场文书
高三政治教学反思
2014/02/06 职场文书
2016年小学生新年寄语
2015/08/18 职场文书
2016中秋节问候语
2015/11/11 职场文书