1. Characteristics of Set data

Set is somewhat similar to Array array , but the difference with array is that the elements of Set cannot be repeated .

Regardless of the creation method of Set, the difference between Set and Array is demonstrated through a case.

Add 4 elements to Set and array respectively, among which 10 elements are repeated
const set = new Set([10, 10, 12, 14])
console.log(set)

const array = [10, 10, 12, 14]
console.log(array)
It can be seen that there are only 3 elements with different values in the Set, while there are 4 elements in the Array array.

2.Set creation and adding elements

We need to create a Set through the Set constructor (there is no literal way to create it).

You can create an empty Set object first, and then use the add method to add elements;

You can also add elements directly;
// 方式一：创建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)
It can be seen that both methods create a Set of 4 elements, and objects can also be used as elements .

3. Array deduplication for common functions of Set

If an array has duplicate elements, using Set can quickly remove duplicate elements. Of course, it is also possible to deduplicate using the previous method. Let’s first see how to achieve deduplication before, and then learn how to use Set to deduplicate.

3.1. Ordinary method array deduplication

Using ordinary methods to remove duplicate elements in an array does not require a lot of code, but it will be a little more troublesome.

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)
Create a new array ordinaryArray to store elements

Use for...of to traverse array

Determine whether the array element is contained in the ordinaryArray array, and if not, put the array element into the ordinaryArray array

3.2. Set method array deduplication

The common method seems to be acceptable, not very troublesome, let's see how to use Set to remove the duplicate.

      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)
Create a Set object with array as a parameter

Convert the created Set object instance into an array

Both Array.from() and the spread operator (...) can convert Set into an array

4. Common methods of Set

Common properties of Set:

size: returns the number of elements in the Set;

Set commonly used methods:

add(value): Add an element and return the Set object itself;

delete(value): Delete the element equal to this value from the set and return the boolean type;

has(value): Determine whether there is an element in the set, and return the boolean type;

clear(): Clear all elements in the set, no return value;

forEach(callback, [, thisArg]): traverse the set through forEach;

5. WeakSet use

Another data structure similar to set is called WeakSet, which is also a data structure whose internal elements cannot be repeated.

The difference with set

Difference 1: Only object types can be stored in WeakSet , and basic data types cannot be stored;

Difference 2: WeakSet references to elements are weak references . If there are no other references to an object, GC can recycle the object

Common methods of WeakSet

add(value): Add an element and return the WeakSet object itself;

delete(value): Delete the element equal to this value from the WeakSet, and return the boolean type;

has(value): Determine whether there is an element in the WeakSet, and return the boolean type;

The use of Set in JavaScript