「这是我参与2022首次更文挑战的第14天，活动详情查看：2022首次更文挑战」
大家好，我是 摸鱼小公举，真正的强者，不会怨天尤人，如果想不被别人看轻，你就只有付出比别人多十倍百倍的努力，才能站的比别人更高。上一篇文章是 vue Cli2与vue Cli3以及vue Cli4的区别 ；今天我们来学习一下js 中 Map 和 Set 的用法以及区别。
首先了解一下 Map
Map 是一组键值对的结构，和 JSON 对象类似。
(1) Map数据结构如下
这里我们可以看到的是Map的数据结构是一个键值对的结构
(2) key 不仅可以是字符串还可以是对象
var obj ={name:"小如",age:9}
let map = new Map()
map.set(obj,"111")
打印结果如下
(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)
打印结果如下
再来了解一下 Set
Set 对象类似于数组，且成员的值都是唯一的
(1) 打印出的数据结构如下
这里打印出来是一个对象
(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语法，最大优点就是运行时间少大大提高了性能。好了文章到此就结束了，欢迎大家( 点赞+评论+关注 ) 有问题可以来互相交流一下。希望这篇文章对大家有帮助,也希望大家多多支持我，今天是我参与2022首次更文挑战的第14天，加油！
