About the operation and application of Set in JavaScript

Operation and application of Set in JavaScript

Set is a new data structure in ES6. It is similar to an array, but the values ​​of the members are unique and there are no duplicate values. Set itself is a constructor that can be used to generate Set data structures.

Basic operations of Set

CreateSet

Sets can be created in the following two ways:

// 通过Set构造函数创建
const set1 = new Set([1, 2, 3]);
console.log(set1); // Set {1, 2, 3}

// 直接创建一个空Set
const set2 = new Set();

add element

Elements can be added to a Set using the add method:

const set = new Set();
set.add(1);
set.add(2);
set.add(3);
console.log(set); // Set {1, 2, 3}

delete element

Elements in a Set can be deleted using the delete method:

const set = new Set([1, 2, 3]);
set.delete(2);
console.log(set); // Set {1, 3}

Determine whether the element exists

You can use the has method to determine whether an element exists in a Set:

const set = new Set([1, 2, 3]);
console.log(set.has(2)); // true
console.log(set.has(4)); // false

Get the length of Set

You can use the size attribute to get the length of the Set:

const set = new Set([1, 2, 3]);
console.log(set.size); // 3

Empty Set

You can use the clear method to clear all elements in the Set:

const set = new Set([1, 2, 3]);
set.clear();
console.log(set); // Set {}

Traversal of Set

Set has four traversal methods, namely:

for...of loop

const set = new Set([1, 2, 3]);
for (const item of set) {
    
    
  console.log(item);
}
// 1
// 2
// 3

forEach method

const set = new Set([1, 2, 3]);
set.forEach(item => {
    
    
  console.log(item);
});
// 1
// 2
// 3

Traversing after converting to an array

const set = new Set([1, 2, 3]);
const arr = [...set];
for (const item of arr) {
    
    
  console.log(item);
}
// 1
// 2
// 3

Traverse using the entries method of Set

const set = new Set([1, 2, 3]);
for (const [key, value] of set.entries()) {
    
    
  console.log(key, value);
}
// 1 1
// 2 2
// 3 3

Application of Set

Array deduplication

Since the values ​​of the elements in Set are all unique, Set can be used to achieve array deduplication:

const arr = [1, 2, 3, 2, 1];
const set = new Set(arr);
const newArr = [...set];
console.log(newArr); // [1, 2, 3]

Determine whether two arrays have duplicate elements

You can convert two arrays into Sets and then determine whether their intersection is empty:

const arr1 = [1, 2, 3];
const arr2 = [2, 3, 4];
const set1 = new Set(arr1);
const set2 = new Set(arr2);
const intersection = new Set([...set1].filter(item => set2.has(item)));
console.log(intersection.size > 0); // true

Implement union, intersection and difference

You can use the Set method to realize the union, intersection and difference of two Sets:

const set1 = new Set([1, 2, 3]);
const set2 = new Set([2, 3, 4]);

// 并集
const union = new Set([...set1, ...set2]);
console.log(union); // Set {1, 2, 3, 4}

// 交集
const intersection = new Set([...set1].filter(item => set2.has(item)));
console.log(intersection); // Set {2, 3}

// 差集
const difference = new Set([...set1].filter(item => !set2.has(item)));
console.log(difference); // Set {1}

Summarize

Set is a new data structure in ES6. It is similar to an array, but the values ​​of the members are unique and there are no duplicate values. Set has basic operations and traversal methods, and can also be used to implement array deduplication, determine whether two arrays have duplicate elements, and implement operations such as union, intersection, and difference.