js中set的使用

转载已于 2023-07-14 22:07:48 修改 · 1.7k 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://blog.csdn.net/m0_51636525/article/details/125236334

文章标签：

#javascript #前端 #开发语言

于 2023-07-14 22:05:47 首次发布

文章介绍了JavaScript中的Set数据结构，强调了其不允许重复元素的特点，并通过示例展示了Set与Array的区别。接着，讨论了如何创建和添加元素到Set中，以及如何利用Set进行数组去重。此外，还提到了WeakSet，它是只存储对象且具有弱引用特性的数据结构。

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

1.Set数据的特点
Set有点类似于Array数组，但是和数组的区别是Set的元素不能重复。

先不考虑Set的创建方法，通过案例来演示Set和Array数组的区别。

分别给Set和数组添加4个元素，其中元素10重复

const set = new Set([10, 10, 12, 14])
console.log(set)

const array = [10, 10, 12, 14]
console.log(array)

可以看到Set中只有3个值互不相同的元素，而Array数组中有4个元素。

2.Set的创建和添加元素

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

可以先创建一个空的Set对象，随后使用add方法添加元素；
也可以直接添加元素；
// 方式一：创建Set对象，使用add方法添加元素

const obj = {name: "aaa"}
const set1 = new Set()
set1.add(10)
set1.add(10)
set1.add(12)
set1.add(14)
set1.add(obj)
console.log(set1)

// 方式二：直接添加元素

const set2 = new Set([10, 10, 12, 14, {name: "zzz"}])
console.log(set2)

可以看到两种方法都创建了4个元素的Set，并且对象也是可以作为元素的。

3.Set常用功能之数组去重

如果一个数组有重复的元素，使用Set就能很快去除重复的元素。当然，用之前的方法也是可以去重的，先看之前怎么实现去重的，再学习使用Set怎么去重。

3.1.普通方法数组去重
使用普通方法去除一个数组中重复的元素，代码也不会很多，但会稍微麻烦一点点。

const array = [10, 10, 12, 12, 12, 15, 17] //有几个重复的元素
const ordinaryArray = []
for(let item of array){
if(!ordinaryArray.includes(item)){
ordinaryArray.push(item)
}
}

console.log(ordinaryArray)
创建一个新的数组 ordinaryArray 用来存放元素
使用for...of遍历array
判断在ordinaryArray数组中是否包含array元素，如果没有包含就把array元素放到ordinaryArray数组里面
3.2.Set方法数组去重
普通方法去重好像也可以接受，不是很麻烦，下面看一下使用Set怎么去重。

const array = [10, 10, 12, 12, 12, 15, 17]
const set = new Set(array)
const newArray = Array.from(set)
const newArray1 = [...set]
console.log(set)
console.log(newArray)
console.log(newArray1)
创建一个array为参数的Set对象
将创建的Set对象实例转为数组

Array.from()和展开运算符（...）都可以将Set转化成数组