js中set的使用_js set 批量添加

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转化成数组

 

4.Set的常见方法

Set常见的属性：

size：返回Set中元素的个数；

Set常用的方法：

add(value)：添加某个元素，返回Set对象本身；

delete(value)：从set中删除和这个值相等的元素，返回boolean类型；

has(value)：判断set中是否存在某个元素，返回boolean类型；

clear()：清空set中所有的元素，没有返回值；

forEach(callback, [, thisArg])：通过forEach遍历set；

5.WeakSet使用

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

和set的区别

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

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