JavaScript-Sets


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

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.

Methoden festlegen

new Set()

Erstellt ein neues Set

add()

Fügt dem Set ein neues Element hinzu

delete()

Entfernt ein Element aus einem Set

has()

Gibt true zurück, wenn ein Wert vorhanden ist

clear()

Entfernt alle Elemente aus einem Set

forEach()

Ruft für jedes Element einen Rückruf auf

values()

Gibt einen Iterator mit allen Werten in einem Set zurück

keys()

Identisch mit value()

entries()

Gibt einen Iterator mit den [Wert,Wert]-Paaren aus einem Set zurück

size

Gibt die Zahlenelemente in einem Set zurück


So erstellen Sie ein Set

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


Die neue Set()-Methode

Übergeben Sie ein Array an den Konstruktor new Set():

Beispiel

// 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:

Beispiel

// 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:

Beispiel

// 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>

Die add()-Methode

Beispiel

letters.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:

Beispiel

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>


Die forEach()-Methode

Die Methode forEach() ruft eine Funktion für jedes Set-Element auf:

Beispiel

// 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>

Die values()-Methode

Die Methode values() gibt ein Iterator-Objekt zurück, das alle Werte in einem Set enthält:

Beispiel

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:

Beispiel

// 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>

Die keys()-Methode

Ein Set hat keine Schlüssel.

keys() gibt dasselbe zurück wie values().

Dadurch sind Sets mit Maps kompatibel.

Beispiel

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>

Die Methode 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:

Beispiel

// 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>

Mengen sind Objekte

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>