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语法，最大优点就是运行时间少大大提高了性能。

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