- Overview
- Transcript
3.3 Sets
Sets are JavaScript objects that store unique values of any type. Set
is one of the collection classes recently added to JavaScript.
Syntax
new Set()
size
add
delete
clear
has
1.Introduction2 lessons, 07:42
1.1Introduction02:12
1.2Setup05:30
2.Language Fundamentals8 lessons, 1:00:53
2.1Variables06:33
2.2Data Types11:28
2.3Arithmetic, Assignment, and Comparison Operators10:24
2.4Unary, Logical, Comma, and Spread Operators09:02
2.5Operator Precedence03:50
2.6Reserved Words04:17
2.7Strict Mode04:34
2.8Functions10:45
3.Data Structures5 lessons, 22:52
3.1Arrays04:29
3.2Objects04:30
3.3Sets04:57
3.4Maps04:21
3.5Weak Maps and Weak Sets04:35
4.Controlling Program Execution7 lessons, 37:06
4.1Conditionals07:49
4.2Switch Statements04:41
4.3The For Loop06:39
4.4The `for .. in` Loop05:17
4.5The `for .. of` Loop04:02
4.6Iterators05:03
4.7While Loops03:35
5.Using JavaScript13 lessons, 1:44:36
5.1Working With Strings09:32
5.2Template Literals05:46
5.3Working With Numbers06:57
5.4Working With Arrays12:53
5.5Iterating and Transforming Arrays07:33
5.6Working With the Object Type13:55
5.7Object Literal Extensions06:45
5.8Working With Object Instances06:45
5.9Getters and Setters05:00
5.10Custom Objects11:28
5.11The `Math` API04:54
5.12Working With Dates and Times08:10
5.13The `Array` Constructor04:58
6.Functions8 lessons, 56:07
6.1The `this` Object06:15
6.2Working With Functions10:11
6.3Scope07:37
6.4Arrow Functions06:59
6.5Generator Functions08:13
6.6Closures05:00
6.7Prototypes06:26
6.8Default and Rest Parameters05:26
7.Miscellaneous6 lessons, 52:39
7.1Destructuring Assignments08:09
7.2AJAX08:30
7.3Regular Expressions10:51
7.4More About Regular Expressions08:38
7.5Classes06:48
7.6ES Modules09:43
8.Working With the DOM6 lessons, 37:39
8.1Selecting HTML Elements05:02
8.2Manipulating HTML Elements07:40
8.3DOM Traversal05:25
8.4Adding and Removing Elements04:45
8.5Creating Elements and Other Nodes04:39
8.6DOM Events10:08
9.Web APIs4 lessons, 17:41
9.1The Selector API03:03
9.2Geolocation05:29
9.3Web Storage05:24
9.4Web Workers03:45
10.Asynchronous JavaScript5 lessons, 26:23
10.1Promises09:52
10.2Promise Chaining05:11
10.3The async Keyword03:21
10.4The await Keyword04:04
10.5More About async and await03:55
11.Conclusion1 lesson, 00:43
11.1Conclusion00:43
3.3 Sets
Hi folks, in this lesson we're going to look at a data structure called a set. A set is similar to an array, but in a set you can only store unique values inside it. The values can be of any type, but they must all be unique. To create a set, we use the set constructor. At this point in time, there is no literal form of sets. We can optionally provide an interable object as an argument to the constructor, and all of the values will be added to the set. An array is an interable object. And we'll look at iterators and iterable objects later in the course. For now, just understand that an array is also an iterable object. So in this case, we declare an array called an Array. And we give it some non-unique values, in this case they're all numbers. And then we create a set called mySet2, and we pass the array to the new set. So, using a set is a great way to de-duplicate an array. So let's just log my set to the console. And let's take a look at that in a browser. And we can see that the set just contains the unique values 1, 2, and 3. It doesn't contain all of the values from the array, because not all of the values were unique. To see how many values there were inside a set, we can use the size property of the set. Now in this case we should see the value 3 and indeed we do. We also have a range of different methods that we can use to work with sets. We can add or remove values from the sets using the add and delete methods respectively. And let's just log the set once again so we can see what changes have happened to it. And we can see that in this case, it now contains the values 2, 3 and 4, instead of 1, 2 ,and 3. Because the values are unique, with the delete method, we pass the value that we want to remove. Not the index of the value that we want to remove. We can only add a single value at a time. But the method returns the set itself. So we can chain it, like this. When we use the delete method this method will return true if the value was deleted, or false if we try to delete a value that doesn't exist. So, if we were to change this expression to this. It would simply return force. It wouldn't throw an error, wven though the value 6 is not contained within the set. If we wanted to determine whether a particular value exists in a set. We can use the has method In this case we should see the value true because my set 2 does have a value of 3 inside it. There are a couple of different ways that we can iterate through the values inside a set. We can use the entries or values methods, which both return an iterator. We'll look at iterators in much more detail later on the course. While a set may seem conceptually similar to an array, we should remember that it isn't. They are completely different data types. The values inside a set don't have an index or a key, so we can't pull out individual values using bracket notation, like we can with arrays. So in this lesson we looked at the new set object, which was introduced in ES 2015. So fairly recently we saw that it is a data structure that allows us to store unique values. We saw that we can get the number of values in the set using the size property, and we look to some of that methods that we can use to work with the sets, including add, delete and has. We also learned that sets are similar to arrays, but they are fundamentally different. In the next lesson, we'll be looking at the map objects. Thanks for watching.