JavaScript Sets
A JavaScript Set is a group of distinct values.
Every number or item can only be in a set once.
A set can store values of various data types.
Set Methods
| Method | Description |
|---|
| new Set() | Generates a fresh Set. |
| add() | Inserts a fresh item into the Set. |
| delete() | Deletes an item from a Set. |
| has() | Indicates whether a value is present. |
| clear() | Clears all items from a Set. |
| forEach() | Triggers a function for every element. |
| values() | Produces an Iterator containing all the values from a Set. |
| keys() | Similar to the values() method. |
| entries() | Generates an Iterator containing pairs of [value, value] retrieved from a Set. |
| Property | Description |
|---|
| size | Shows how many items are in a Set. |
How to Create a Set
You can make a JavaScript Set by:
- Sending a list to the
new Set() method.
- Make a fresh set and employ the
add() function to include values.
- Generate a fresh set and employ the
add() method to include variables.
The new Set() Method
Send an array to the new Set() constructor.
Make a collection and include specific values:
Make a collection and include variables:
The add() Method
If you include identical elements, only the initial one will be retained:
The forEach() Method
The forEach() method calls a function for every element in a Set.
The values() Method
The values() method gives back an Iterator object that has all the values present in a Set.
You can now utilize the Iterator object to reach the elements.
The keys() Method
A set doesn't have any keys.
The function keys() gives the same result as values().
This allows Sets to work well with Maps.
The entries() Method
A set does not have any keys.
The function entries() gives back pairs like [value, value], not like [key, value].
This allows Sets to work well with Maps:
Sets are Objects
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Create a Set from an Array:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a", "b", "c"]);
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add values to a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set();
// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Add variables to a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set();
// Create Variables
const a = "a";
const b = "b";
const c = "c";
// Add the Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding new elements to a Set:</p>
<p id="demo"></p>
<script>
// Create a new Set
const letters = new Set(["a", "b", "c"]);
// Add a new Element
letters.add("d");
letters.add("e");
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Adding equal elements to a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set();
// Add values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
// Display set.size
document.getElementById("demo").innerHTML = letters.size;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>forEach() calls a function for each element:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a", "b", "c"]);
// List all Elements
let text = "";
letters.forEach(function(value) {
text += value + " <br> ";
})
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.values() returns a Set Iterator:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a", "b", "c"]);
// Display set.size
document.getElementById("demo").innerHTML = letters.values();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Iterating Set values:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a", "b", "c"]);
// List all Elements
let text = "";
for (const x of letters.values()) {
text += x + " <br> ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>Set.keys() returns a Set Iterator:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a", "b", "c"]);
// Display set.size
document.getElementById("demo").innerHTML = letters.keys();
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>entries() Returns an Iterator with [value,value] pairs from a Set:</p>
<p id="demo"></p>
<script>
// Create a Set
const letters = new Set(["a", "b", "c"]);
// List all entries
const iterator = letters.entries();
let text = "";
for (const entry of iterator) {
text += entry + " <br> ";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets Objects</h2>
<p>The typeof operator returns object:</p>
<p id="demo"></p>
<script>
// Create a new Set
const letters = new Set(["a", "b", "c"]);
// Display typeof
document.getElementById("demo").innerHTML = typeof letters;
</script>
</body>
</html>
HTML
CSS
Javascript
Jquery