JavaScript中Map与Set的用法及区别详解

作者:木棉

时间:2026-10-24

浏览:516

本文详细解析JavaScript ES6中Map和Set数据结构的用法与核心区别。通过代码实例展示Map键值对存储及Set唯一性特性,对比两者在初始化方式、键值处理及查找性能上的差异。测试表明Map和Set均具备极快的查找速度,且Set常用于高效数组去重,帮助开发者根据场景选择合适的数据结构以提升代码性能。

文章目录

首先介绍Map数据结构。

Map是一种键值对集合,其结构类似于JSON对象。

具体数据结构如下所示:

从上述结构可以看出,Map由键值对组成。

首先介绍Map数据结构。

此外,Map的key不仅支持字符串类型,还可以是对象类型。

var obj ={name:"小如",age:9}
let map = new Map()
map.set(obj,"111")

运行结果如下所示:

首先介绍Map数据结构。

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  删除成功

需要注意的是,一个key只能对应一个value。若对同一key多次赋值,后续值将覆盖之前的值。

var map =new Map
map.set('Amy',"女")
map.set('Amy',"男")
console.log(map) 

相关打印结果如下:

首先介绍Map数据结构。

接下来介绍Set数据结构。

Set对象类似于数组,但其成员值具有唯一性。

打印出的数据结构如下:

这里输出的是一个对象形式。

首先介绍Map数据结构。

Set最常用于数组去重,虽然存在多种去重方法,但Set的执行效率通常更高。

var arr=[1,3,4,2,5,1,4]
// 这里原本是一个对象用了es6的语法 转化成了数组,就是转化数组之前已经过滤掉了重复的元素了
var arr2=[...new Set(arr)] //[1,3,4,2,5]

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的主要区别。

这两种数据结构均具备极快的查找速度。下面通过对比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的执行时间最短,查找速度最快。当然,Map和Set的查找速度都非常快且差距不大,这证明了它们均具有极高的查找效率。

两者的初始化参数不同:Map需要二维数组,而Set需要一维Array数组。

Map和Set均不允许键重复。

Map的key不可修改,但其对应的value可以修改;Set无法通过迭代器改变值,因为Set的值即为键。

Map以键值对形式存在,value不作为key;而Set没有value,只有key,且value等同于key。

结语:

Map和Set是ES6引入的数据结构,其最大优势在于运行时间短,能显著提高程序性能。

关于js中Map和Set用法及区别的文章介绍至此,更多相关内容请搜索本站历史文章或继续浏览后续文章,希望大家多多支持本站!

实用工具推荐

电子包浆

绿化、压缩、噪点和虚拟水印,自由调节做旧程度。

使用 ›
图片压缩

选择画质和输出格式,预览压缩前后的大小。

使用 ›
相关文章