Shulou(Shulou.com)06/02 Report--

What is the Set data structure of JavaScript? I believe many inexperienced people don't know what to do about it. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

1.   what is Set

Set can be simply thought of as a mathematical set.

It is a series of unordered data sets with no repeated values.

2.   Set constructor

For the parameters of the constructor of Set, you can pass the following forms.

2.1)   array const s = new Set ([1,2,1]); console.log (s)

An array [1, 2, 1] is passed as a parameter, and since Set is a collection of non-repeating values, the third 1 is automatically deleted.

2.2)   string const s = new Set ("Hello World!"); console.log (s)

2.3)   argumentsfunction fun () {const s = new Set (arguments); console.log (s);} fun (1,2,3)

2.4)   NodeList set

one

two

three

Const s = new Set (document.querySelectorAll ('p')); console.log (s)

Here we put the references of the three p tags into Set s

When we want to use it, we can iterate through the Set, then take out the references to the p tag separately, and then we can modify the p tag.

2.5)   Setconst S1 = new Set ([1,2,3]); const S2 = new Set (S1); console.log (S2)

This is equivalent to copying S1 to S2, but they are not the same Set

Console.log (S1 = = S2)

3. Instance properties and methods of   Set

The property of Set, which has a property size, which stores the number of its members

Const s = new Set ([1,2,3]); console.log (s.size)

Set's method

Add

Add members to Set

Const s = new Set ([1,2,3]); / / its parameters can only pass one s.add (5); console.log (s); / / can be suffixed with adds.add (7) .add (9); console.log (s)

Delete

Used to delete members in Set

Const s = new Set ([1,2,3]); s.delete (2); / / if what you want to delete cannot be found in Set, nothing will happen and there will be no error s.delete (5); console.log (s)

Has

Used to determine whether a Set contains a member

Const s = new Set ([1,2,3]); console.log (s.has (1)); console.log (s.has (5))

Clear

All members of Set will be deleted

Const s = new Set ([1,2,3]); s.clear (); console.log (s)

4. Members of   Set visit

Its member access is realized through the forEach method, traversing the Set, which is traversed in the order in which the members are added.

It has two parameters, the first parameter is the callback function, and the second parameter sets what this points to in the callback function, that is,

S.forEach (callback function, direction of callback function)

Let's first look at the first parameter:

For the first parameter callback function, it has three parameters:

S.forEach (function (value, key, set) {value is a member of Set in Set, value and key are equal set is the previous Set itself, that is, here set = = s})

Understand through an example:

Const s = new Set ([1,2,3]); s.forEach (function (value, key, set) {console.log (value, key, value = key); console.log (set, set = s);})

Let's look at the second parameter:

Const s = new Set ([1,2,3]); s.forEach (function (value, key, set) {console.log (this);}, document)

5. Considerations for   Set

Set basically follows the judgment of strict equality in the judgment of repeated values.

But for NaN, in Set, NaN equals NaN

6. Usage scenarios of   Set

Array deduplication

Let arr = [1,2,1]; const s = new Set (arr); arr = [... s]; / / you can also synthesize a sentence / / arr = [. New Set (arr)]; console.log (arr)

String deduplication

Let str = "11231131242"; const s = new Set (str); str = [... s] .join (""); / / it can also be written as a sentence / / str = [. New Set (str)] .join ("); console.log (str)

Store DOM elements

Set

one

two

three

Const s = new Set (document.querySelectorAll ('p')); s.forEach ((elem) = > {console.log (elem)})

After reading the above, have you mastered the method of JavaScript's Set data structure? If you want to learn more skills or want to know more about it, you are welcome to follow the industry information channel, thank you for reading!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.