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

How to use javascript set

PHPz
Release: 2023-05-22 09:56:07
Original
3075 people have browsed it

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();
Copy after login

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}
Copy after login

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")
Copy after login

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")
Copy after login

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()
Copy after login

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);
}
Copy after login

The output result is:

1
2
3
Copy after login

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);
});
Copy after login

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
Copy after login
  1. size attribute: Returns the number of elements in the Set.
const set = new Set([1, 2, 3]);
console.log(set.size); //输出 3
Copy after login
  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}
Copy after login
  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}
Copy after login
  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] }
Copy after login

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]
Copy after login
  1. Convert Array to Set:
const arr = [1, 2, 3];
const set = new Set(arr);
console.log(set); //输出 Set(3) {1, 2, 3}
Copy after login

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!

source:php.cn
Statement of this Website
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
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template