revision:
The "Set" constructor lets create Set objects that store unique values of any type, whether primitive values or object references. The prototype of the objects created with the Set constructor have a lot of methods that can be used.
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.
clear() - removes all elements from a set.
forEach() - invokes a callback for each element.
values() - returns an Iterator with all the values in a set.
keys() - same as values().
entries() - returns an Iterator with the [key,value] pairs from a set.
size - returns the number of elements in a set. "set.size" gives the element counts in the Set object.
A JavaScript Set can be created by:
1/ passing an array to a new Set(),
2/ creating a "new Set" and using add() to add values,
3/ creating a "new Set" and using add() to add variables.
- create instance of set using new Set() ; example: let setObject = new Set().
- initialize the set with an array of values ; example: let setObject = new Set(["Audi","Bentley","BMW"]);.
- initialize the set with an array of variables ; example: let setObject = new Set([ a, b, c, d]);.
Sets are objects.
Examples
create a set : size : ; type : add literal values : new size : ; type : another way to add : new size : ; type :
<div class="spec">
<p>create a set : size : <span id="set-1"></span>; type : <span id="set-2"><span</p>
<p>add literal values : new size : <span id="set-3"></span>; type : <span id="set-4"><span</p>
<p>another way to add : new size : <span id="set-5"></span>; type : <span id="set-6"><span</p>
</div>
<script>
// Create a Set
const letters = new Set(["a","b","c"]);
// Display set.size
document.getElementById("set-1").innerHTML = letters.size;
document.getElementById("set-2").innerHTML = typeof letters;
// add values to set
letters.add("d");
letters.add("e");
letters.add("f");
document.getElementById("set-3").innerHTML = letters.size;
document.getElementById("set-4").innerHTML = typeof letters;
// Create Variables
const g = "g";
const h = "h";
const i = "i";
// Add the Variables to the Set
letters.add(g);
letters.add(h);
letters.add(i);
document.getElementById("set-5").innerHTML = letters.size;
document.getElementById("set-6").innerHTML = typeof letters;
</script>
If the item is already present in the collection,it simply does nothing. That's the main reason why set holds only unique values.This method returns the Set itself. If you add equal elements, only the first will be saved.
Examples
create a set : size : ; type : add literal values : new size : ; type : another way to add : new size : ; type :
<div class="spec">
<p>create a set : size : <span id="set-7"></span>; type : <span id="set-8"><span</p>
<p>add literal values : new size : <span id="set-9"></span>; type : <span id="set-10"><span</p>
<p>another way to add : new size : <span id="set-11"></span>; type : <span id="set-12"><span</p>
<p id="demo"></p>
</div>
<script>
// Create a new Set
const letters_c = new Set(["a","b","c"]);
document.getElementById("set-7").innerHTML = letters_c.size;
document.getElementById("set-8").innerHTML = typeof letters_c;
// Add a new Element
letters_c.add("d");
letters_c.add("e");
letters_c.add("f");
letters_c.add("d");
letters_c.add("g");
// Display set.size
document.getElementById("set-9").innerHTML = letters_c.size;
document.getElementById("set-10").innerHTML = typeof letters_c;
// add more elements
letters_c.add("p");
letters_c.add("a");
letters_c.add("q");
document.getElementById("set-11").innerHTML = letters_c.size;
document.getElementById("set-12").innerHTML = typeof letters_c;
</script>
It returns true if the specified value is successfully deleted from the object, otherwise false.
Examples
size : ; type : new size : ; type :
<div class="spec">
<p> size : <span id="set-13"></span>; type : <span id="set-14"><span</p>
<p> new size : <span id="set-15"></span>; type : <span id="set-16"><span</p>
</div>
<script>
const setMusic = new Set(["Beethoven", "Chopin","Mozart", "Bach", "Me"]);
document.getElementById("set-13").innerHTML = setMusic.size;
document.getElementById("set-14").innerHTML = typeof setMusic;
setMusic.delete("Beethoven")
document.getElementById("set-15").innerHTML = setMusic.size;
document.getElementById("set-16").innerHTML = typeof setMusic;
</script>
Examples
size : ; type : has? : ; type :
<div class="spec">
<p> size : <span id="set-17"></span>; type : <span id="set-18"><span</p>
<p> has? : <span id="set-19"></span>; type : <span id="set-20"><span</p>
</div>
<script>
const setMusicians = new Set(["Beethoven", "Chopin","Mozart", "Bach", "Me"]);
document.getElementById("set-17").innerHTML = setMusicians.size;
document.getElementById("set-18").innerHTML = typeof setMusicians;
res = setMusicians.has("Beethoven");
document.getElementById("set-19").innerHTML = res;
document.getElementById("set-20").innerHTML = typeof setMusicians;
</script>
Examples
set size: ; after delete: clear: ;
<div class="spec">
<p> set size: <span id="set-21"></span>; after delete: <span id="set-22"><span</p>
<p> clear: <span id="set-23"></span>; <span id="set-24"><span</p>
</div>
<script>
let setObject = new Set();
setObject.add("Audi");
setObject.add("Bentley");
setObject.add("BMW");
setObject.add("Audi");
setObject.add("Honda");
setObject.add("RangeRover");
document.getElementById("set-21").innerHTML = setObject.size; //5 , ignores duplicate values
if(setObject.has("BMW")){
setObject.delete("BMW");
document.getElementById("set-22").innerHTML = "object size: " + setObject.size; //4
}
setObject.clear();
document.getElementById("set-23").innerHTML = "object size: " + setObject.size; //0
document.getElementById("set-24").innerHTML = "typeof: " + typeof setObject; //0
</script>
Eexamples
<div class="spec">
<p id="set_d"></p>
</div>
<script>
// Create a Set
const letters_d = new Set(["a","b","c"]);
// List all Elements
let text = "";
letters_d.forEach (function(value) {
text += value + "<br>";
})
document.getElementById("set_d").innerHTML = text;
</script>
<div class="spec">
<p id="set-26"></p>
<p id="set-27"></p>
</div>
<script>
var set11 = new Set();
set11.add(10);
set11.add(20);
set11.add(30).add(40).add(50);
let text_b = "";
set11.forEach (function(value) {
text_b += value + "<br>";
})
document.getElementById("set-26").innerHTML = set11.size;
document.getElementById("set-27").innerHTML = text_b;
</script>
Examples
<div class="spec">
<p id="set-28"></p>
</div>
<script>
// Create a Set
const letters_e = new Set(["a","b","c"]);
// List all Elements
let txt = "";
for (const x of letters_e.values()) {
txt += x + "<br>";
}
document.getElementById("set-28").innerHTML = txt;
</script>
This makes Sets compatible with Maps.
Examples
<div class="spec">
<p id="set-29"></p>
</div>
<script>
// Create a Set
const letters_f = new Set(["a","b","c"]);
// List all entries
const iterator = letters_f.entries();
let text_a = "";
for (const entry of iterator) {
text_a += entry + "<br>";
}
document.getElementById("set-29").innerHTML = text_a;
</script>
We can iterate over "Set" using for..of loop. The iterators methods of Map are also supported by Set:
set.keys(): this method returns an iterable object for values.
set.values(): this method returns the same as set.keys(). Set has this method for maintaining the compatibility with Map.
Set has built in foreach method to iterate over set object.
Examples
<div class="spec">
<p id="four"></p><br>
<p id="five"></p><br>
<p id="six"></p><br>
<p id="seven"></p>
</div>
<script>
let setObject_2 = new Set(["Audi","Bentley","BMW"]);
for(let value of setObject_2) {
document.getElementById("four").innerHTML += value + ", ";
}
let setObject_3 = new Set([1,5,'Audi',"a*1", "b=2"]);
for (let item of setObject_3.keys()) {
document.getElementById("five").innerHTML += item + ", ";
}
for (let item of setObject_3.values()) {
document.getElementById("six").innerHTML += item + ", ";
}
new Set(["Audi","Bentley","BMW"]).
forEach(function(value) {
document.getElementById("seven").innerHTML +=value + ", ";
})
</script>
Example
<div class="spec">
<p id="ex-3"></p>
<p id="ex-4"></p>
</div>
<script>
// Performs intersection operation between called set and otherSet
Set.prototype.intersection = function(otherSet) {
// creating new set to store intersection
var intersectionSet = new Set();
// Iterate over the values
for(var elem of otherSet){
// if the other set contains a similar value as of value[i] then add it to intersectionSet
if(this.has(elem))
intersectionSet.add(elem);
}
// return values of intersectionSet
return intersectionSet;
}
// using intersection function
// Declaring values for set1 and set2
var set1 = new Set([10, 20, 30, 40, 50]);
var set2 = new Set([40, 50, 60, 70, 80]);
// performing union operation and storing the resultant set in intersectionset
var intersectionSet = set1.intersection(set2);
let text_c = "";
intersectionSet.forEach (function(value) {
text_c += value + "<br>";
})
document.getElementById("ex-3").innerHTML = intersectionSet.size;
document.getElementById("ex-4").innerHTML = text_c;
console.log(intersectionSet.values());
</script>
Example
<div class="spec">
<p id="eight"></p><br>
<p id="nine"></p><br>
<p id="ten"></p><br>
<p id="eleven"></p><br>
<p id="twelve"></p><br>
<p id="thirteen"></p><br>
<p id="fourteen"></p><br>
</div>
<script>
const letteren = new Set(["e","f","g"]);
document.getElementById("eight").innerHTML = "array size: " + letteren.size;
letteren.add("h");
letteren.add("i");
letteren.add("j");
document.getElementById("nine").innerHTML = "array size: " + letteren.size;
const aa = "k";
const bb = "l";
const cc = "m";
letteren.add(aa);
letteren.add(bb);
letteren.add(cc);
document.getElementById("ten").innerHTML = "array size: " + letteren.size;
letteren.add("o");
letteren.add("p");
document.getElementById("eleven").innerHTML = "array size: " + letteren.size;
let tekst = "";
letteren.forEach (function(value) {
tekst += value + ", ";
})
document.getElementById("twelve").innerHTML = tekst;
document.getElementById("thirteen").innerHTML = letteren.values();
let tekst_a = "";
for (const x of letteren.values()) {
tekst_a += x + ", ";
}
document.getElementById("fourteen").innerHTML = tekst_a;
</script>
const set1 = new Set();
set1.add(42);
set1.add('forty two');
const iterator1 = set1[Symbol.iterator]();
console.log(iterator1.next().value);
// expected output: 42
console.log(iterator1.next().value);
// expected output: "forty two"
const set1 = new Set();
set1.add(42);
set1.add(42);
set1.add(13);
for (let item of set1) {
console.log(item);
// expected output: 42
// expected output: 13
}
const set1 = new Set();
set1.add(1);
set1.add('foo');
console.log(set1.size);
// expected output: 2
set1.clear();
console.log(set1.size);
// expected output: 0
const set1 = new Set([1, 2, 3, 4, 5]);
console.log(set1.has(1));
// expected output: true
console.log(set1.has(5));
// expected output: true
console.log(set1.has(6));
// expected output: false
const set1 = new Set();
set1.add({ x: 10, y: 20 }).add({ x: 20, y: 30 });
// Delete any point with `x > 10`.
set1.forEach((point) => {
if (point.x > 10) {
set1.delete(point);
}
});
console.log(set1.size);
// expected output: 1
const set1 = new Set();
set1.add(42);
set1.add('forty two');
const iterator1 = set1.entries();
for (let entry of iterator1) {
console.log(entry);
// expected output: [42, 42]
// expected output: ["forty two", "forty two"]
}
function logSetElements(value1, value2, set) {
console.log(`s[${value1}] = ${value2}`);
}
new Set(['foo', 'bar', undefined]).forEach(logSetElements);
// expected output: "s[foo] = foo"
// expected output: "s[bar] = bar"
// expected output: "s[undefined] = undefined"
const set1 = new Set([1, 2, 3, 4, 5]);
console.log(set1.has(1));
// expected output: true
console.log(set1.has(5));
// expected output: true
console.log(set1.has(6));
// expected output: false
const set1 = new Set();
const object1 = {};
set1.add(42);
set1.add('forty two');
set1.add('forty two');
set1.add(object1);
console.log(set1.size);
// expected output: 3
const set1 = new Set();
set1.add(42);
set1.add('forty two');
const iterator1 = set1.values();
console.log(iterator1.next().value);
// expected output: 42
console.log(iterator1.next().value);
// expected output: "forty two"