Home >Web Front-end >Front-end Q&A >How to use javascript set

How to use javascript set

PHPz
PHPzOriginal
2023-05-22 09:56:073076browse

JavaScript is a dynamic language that, along with HTML and CSS, has become one of the three most basic elements in web development due to its flexibility. In JavaScript, set is a very commonly used data structure that can store unique values ​​of any type. Next, we will discuss the usage and functions of JavaScript sets.

1. Create a Set

In JavaScript, we can use the following method to create a Set:

const set = new Set();

This will create an empty Set. We can also convert an array into a set:

const arr = [1, 2, 3, 3, 4];
const set = new Set(arr); //这将创建一个唯一的值集合:{1, 2, 3, 4}

2. Add values ​​to the Set

In a Set, we use the add() method to add a unique element to it. If the added element already exists in the Set, it will not be added.

const set = new Set();
set.add("hello");
set.add("world");
console.log(set); //输出Set("hello", "world")

3. Delete a value from a Set

To delete a value from a Set, we can use the delete() method. If the value does not exist, the delete() method will also return false.

const set = new Set();
set.add("hello");
set.add("world");
set.delete("world");
console.log(set); //输出 Set("hello")

We can also clear the entire Set through the clear() method:

const set = new Set();
set.add("hello");
set.add("world");
set.clear();
console.log(set); //输出 Set()

4. Traverse the Set

In JavaScript, we can use the for-of loop to traverse the Set. Since duplicate values ​​are not allowed in Set, the for-of loop will automatically skip duplicate values.

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

The output result is:

1
2
3

In addition to the for-of loop, we can also use the forEach() method to traverse the Set. This will iterate through each element in the set and execute the callback function on it.

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

5. Common methods of Set

In JavaScript, Set has many commonly used methods. Here are some commonly used methods:

  1. has() method : Check whether the Set contains a certain value.
const set = new Set([1, 2, 3]);
console.log(set.has(2)); //输出 true
console.log(set.has(4)); //输出 false
  1. size attribute: Returns the number of elements in the Set.
const set = new Set([1, 2, 3]);
console.log(set.size); //输出 3
  1. keys() method: Returns the key names of all elements in the Set.
const set = new Set([1, 2, 3]);
console.log(set.keys()); //输出 SetIterator {1, 2, 3}
  1. values() method: Returns the values ​​of all elements in the Set.
const set = new Set([1, 2, 3]);
console.log(set.values()); //输出 SetIterator {1, 2, 3}
  1. entries() method: Returns the key-value pairs of all elements in the Set.
const set = new Set([1, 2, 3]);
console.log(set.entries()); //输出 SetIterator { [1, 1], [2, 2], [3, 3] }

6. Conversion between Set and Array

In JavaScript, we can convert Set to array or array to Set. The following are two conversion methods:

  1. Convert Set to Array:
const set = new Set([1, 2, 3]);
const arr = Array.from(set);
console.log(arr); //输出 [1, 2, 3]
  1. Convert Array to Set:
const arr = [1, 2, 3];
const set = new Set(arr);
console.log(set); //输出 Set(3) {1, 2, 3}

7. Usage scenarios of Set

Set can be used to remove duplicate values, which is very useful when processing data. For example, when retrieving results from a database, since the results may contain duplicate values, we can use Set to remove duplicate values.

Set can also store any type of data. This allows it to be used in many scenarios. For example, when we need to store a large number of values, we can use Set to store values.

In short, Set is a very useful data structure in JavaScript, which can play a role in many scenarios. By learning the basic usage of Set, we can better use JavaScript for web development.

The above is the detailed content of How to use javascript set. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article:JavaScript settings loginNext article:JavaScript settings login