Ein JavaScript-Set ist eine Sammlung eindeutiger Werte.
Jeder Wert kann in einem Set nur einmal vorkommen.
Ein Set kann jeden Wert eines beliebigen Datentyps enthalten.
Erstellt ein neues Set
Fügt dem Set ein neues Element hinzu
Entfernt ein Element aus einem Set
Gibt true zurück, wenn ein Wert vorhanden ist
Entfernt alle Elemente aus einem Set
Ruft für jedes Element einen Rückruf auf
Gibt einen Iterator mit allen Werten in einem Set zurück
Identisch mit value()
Gibt einen Iterator mit den [Wert,Wert]-Paaren aus einem Set zurück
Gibt die Zahlenelemente in einem Set zurück
Sie können ein JavaScript-Set erstellen, indem Sie:
Übergabe eines Arrays an new Set()
Erstellen Sie ein neues Set und verwenden Sie add()
, um Werte hinzuzufügen
Erstellen Sie ein neues Set und verwenden Sie add()
, um Variablen hinzuzufügen
Set()
-MethodeÜbergeben Sie ein Array an den Konstruktor new Set()
:
// Create a Set
const letters = new Set(["a","b","c"]);
Probieren Sie es selbst aus →
<!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>
Erstellen Sie einen Satz und fügen Sie Literalwerte hinzu:
// Create a Set
const letters = new Set();
// Add Values to the Set
letters.add("a");
letters.add("b");
letters.add("c");
Probieren Sie es selbst aus →
<!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>
Erstellen Sie ein Set und fügen Sie Variablen hinzu:
// Create Variables
const a = "a";
const b = "b";
const c = "c";
// Create a Set
const letters = new Set();
// Add Variables to the Set
letters.add(a);
letters.add(b);
letters.add(c);
Probieren Sie es selbst aus →
<!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>
add()
-Methodeletters.add("d");
letters.add("e");
Probieren Sie es selbst aus →
<!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>
Wenn Sie gleiche Elemente hinzufügen, wird nur das erste gespeichert:
letters.add("a");
letters.add("b");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
letters.add("c");
Probieren Sie es selbst aus →
<!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>
forEach()
-MethodeDie Methode forEach()
ruft eine Funktion für jedes Set-Element auf:
// Create a Set
const letters = new Set(["a","b","c"]);
// List all entries
let text = "";
letters.forEach (function(value) {
text += value;
})
Probieren Sie es selbst aus →
<!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>
values()
-MethodeDie Methode values()
gibt ein Iterator-Objekt zurück, das alle Werte in einem Set enthält:
letters.values() // Returns [object Set Iterator]
Probieren Sie es selbst aus →
<!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>
Jetzt können Sie das Iterator-Objekt verwenden, um auf die Elemente zuzugreifen:
// Create an Iterator
const myIterator = letters.values();
// List all Values
let text = "";
for (const entry of myIterator) {
text += entry;
}
Probieren Sie es selbst aus →
<!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>
keys()
-MethodeEin Set hat keine Schlüssel.
keys()
gibt dasselbe zurück wie values()
.
Dadurch sind Sets mit Maps kompatibel.
letters.keys() // Returns [object Set Iterator]
Probieren Sie es selbst aus →
<!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>
entries()
Ein Set hat keine Schlüssel.
entries()
gibt [Wert,Wert]-Paare zurück anstelle von [Schlüssel,Wert]-Paaren.
Dadurch sind Sets mit Maps kompatibel:
// Create an Iterator
const myIterator = letters.entries();
// List all Entries
let text = "";
for (const entry of myIterator) {
text += entry;
}
Probieren Sie es selbst aus →
<!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>
Für einen Satz gibt typeof
das Objekt zurück:
typeof letters; // Returns object
Probieren Sie es selbst aus →
<!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>
Für ein Set gibt instanceof Set
true zurück:
letters instanceof Set; // Returns true
Probieren Sie es selbst aus →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Sets</h2>
<p>The instanceof operator returns true:</p>
<p id="demo"></p>
<script>
// Create a new Set
const letters = new Set(["a","b","c"]);
// Display typeof
document.getElementById("demo").innerHTML = letters instanceof Set;
</script>
</body>
</html>