js高级之｜ES6新增数据结构Set和Map

最新推荐文章于 2025-05-13 17:53:31 发布

安佳233

最新推荐文章于 2025-05-13 17:53:31 发布

阅读量462

点赞数

CC 4.0 BY-SA版权

分类专栏： JS高级文章标签： es6 前端 ecmascript

本文链接：https://blog.youkuaiyun.com/qq_45313933/article/details/128669497

JS高级专栏收录该内容

17 篇文章

订阅专栏

本文介绍了ES6中的新数据结构Set和Map，包括它们的创建、使用方法以及与WeakSet和WeakMap的区别。Set主要用于数组去重，Map则用于存储键值对，而WeakSet和WeakMap则提供了弱引用的特性，有助于内存管理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

数据结构：存放数据的某种方式

在ES6之前，我们存储数据的结构主要有两种：数组、对象。在ES6中新增了另外两种数据结构：Set、Map，以及它们的另外形式WeakSet、WeakMap。

1. Set的基本使用

Set是一个新增的数据结构，可以用来保存数据，类似于数组，但是和数组的区别是元素不能重复。

创建Set我们需要通过Set构造函数（暂时没有字面量创建的方式）：

1.1 创建set结构

// 10, 20, 40, 333
// 1.创建Set结构 set内有add方法
const set = new Set()
set.add(10)
set.add(20)
set.add(40)
set.add(333)

set.add(10)
console.log(set)//Set(4) { 10, 20, 40, 333 }
//set内元素不能重复，所以再加10依旧一个10

// 2.添加对象时特别注意:
// 区别以下2种
//方式一
set.add({})
set.add({})
console.log(set)//Set(6) { 10, 20, 40, 333, {}, {} }
//两个对象是不同的对象地址，所以是两个对象
//方式二：这样不会重复，因为定义的对象是同一个
const obj = {}
set.add(obj)
set.add(obj)
console.log(set)

1.2 给数组去重

我们可以发现Set中存放的元素是不会重复的，那么Set有一个非常常用的功能就是给数组去重。

1.3 Set的方法

Set常见的属性： size：返回Set中元素的个数；

Set常用的方法：

add(value)：添加某个元素，返回Set对象本身； delete(value)：从set中删除和这个值相等的元素，返回boolean类型；
has(value)：判断set中是否存在某个元素，返回boolean类型；
clear()：清空set中所有的元素，没有返回值；
forEach(callback, [ thisArg])：通过forEach遍历set；

另外Set是支持for of的遍历的。

// 5.Set的方法
// add
arrSet.add(100)
console.log(arrSet)

// delete
arrSet.delete(33)
console.log(arrSet)

// has
console.log(arrSet.has(100))

// clear
arrSet.clear()
console.log(arrSet)

// 6.对Set进行遍历
arrSet.forEach(item => {
  console.log(item)
})

for (const item of arrSet) {
  console.log(item)
}

2. WeakSet的使用

和Set类似的另外一个数据结构称之为WeakSet，也是内部元素不能重复的数据结构。

那么和Set有什么区别呢？

区别一：WeakSet中只能存放对象类型，不能存放基本数据类型；
区别二：WeakSet对元素的引用是弱引用，如果没有其他引用对某个对象进行引用，那么GC（垃圾回收器）可以对该对象进行回收；

WeakSet常见的方法：

add(value)：添加某个元素，返回WeakSet对象本身；
delete(value)：从WeakSet中删除和这个值相等的元素，返回boolean类型；
has(value)：判断WeakSet中是否存在某个元素，返回boolean类型；

注意：WeakSet不能遍历

因为WeakSet只是对对象的弱引用，如果我们遍历获取到其中的元素，那么有可能造成对象不能正常的销毁。

所以存储到WeakSet中的对象是没办法获取的；那么这个东西有什么用呢？Stack Overflow上有回答，实际的开发中使用很少。

3. Map的基本使用

另外一个新增的数据结构是Map，用于存储映射关系。

但是我们可能会想，在之前我们可以使用对象来存储映射关系，他们有什么区别呢？

事实上我们对象存储映射关系只能用字符串（ES6新增了Symbol）作为属性名（key）；

某些情况下我们可能希望通过其他类型作为key，比如对象，这个时候会自动将对象转成字符串来作为key，那么我们就可以使用Map：

// 1.JavaScript中对象中是不能使用对象来作为key的
const obj1 = { name: "why" }
const obj2 = { name: "kobe" }

const info = {
  [obj1]: "aaa",
  [obj2]: "bbb"
}

console.log(info)//{ '[object Object]': 'bbb' }
//输出的结果只是对象，达不到需要的结果

使用map：

// 2.Map就是允许我们对象类型来作为key的
// 构造方法的使用
const map = new Map()
map.set(obj1, "aaa")
map.set(obj2, "bbb")
map.set(1, "ccc")
console.log(map)
// Map(3) {
//   { name: 'why' } => 'aaa',
//   { name: 'kobe' } => 'bbb',
//   1 => 'ccc'
// }

//另一种写法：entries
const map2 = new Map([[obj1, "aaa"], [obj2, "bbb"], [2, "ddd"]])
console.log(map2)
// Map(3) {
//   { name: 'why' } => 'aaa',
//   { name: 'kobe' } => 'bbb',
//   2 => 'ddd'
// }
// set

Map常见的属性： size：返回Map中元素的个数；

Map常见的方法：

set(key, value)：在Map中添加key、value，并且返回整个Map对象；
get(key)：根据key获取Map中的value；
has(key)：判断是否包括某一个key，返回Boolean类型；
delete(key)：根据key删除一个键值对，返回Boolean类型；
clear()：清空所有的元素；
forEach(callback, [, thisArg])：通过forEach遍历Map；

Map也可以通过for of进行遍历。

// 3.常见的属性和方法
console.log(map2.size)

map2.set("why", "eee")
console.log(map2)

// get(key)
console.log(map2.get("why"))

// has(key)
console.log(map2.has("why"))

// delete(key)
map2.delete("why")
console.log(map2)

// clear
// map2.clear()
// console.log(map2)

// 4.遍历map
map2.forEach((item, key) => {
  console.log(item, key)
})

for (const item of map2) {
  console.log(item[0], item[1])
}

for (const [key, value] of map2) {
  console.log(key, value)
}