JavaScript Sets
A JavaScript Set is a collection of unique values.
Each value can only occur once in a Set.
Essential Set Methods
| Method | Description |
|---|
| new Set() | Creates a new Set |
| add() | Adds a new element to the Set |
| delete() | Removes an element from a Set |
| has() | Returns true if a value exists in the Set |
| forEach() | Invokes a callback for each element in the Set |
| values() | Returns an iterator with all the values in a Set |
| Property | Description |
|---|
| size | Returns the number of elements in a Set |
How to Create a Set
You can create a JavaScript Set by:
- Passing an Array to
new Set()
- Create a new Set and use
add() to add values
- Create a new Set and use
add() to add variables
The new Set() Method
Create a new set by passing an array to the new Set() constructor.
Create a Set and add values:
Create a Set and add variables:
The add() Method
When you include identical elements, only the initial one will be retained.
The forEach() Method
Using the forEach() method runs a function for every element in a Set:
The values() Method
Using the values() method gives you a fresh iterator object that holds all the values from a Set.
Now you have the ability to utilize the Iterator object for accessing the elements:
<!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>
HTML
CSS
Javascript
Jquery