JavaScript-Sets


Inhaltsverzeichnis

    Inhaltsverzeichnis anzeigen

Ein JavaScript-Set ist eine Sammlung eindeutiger Werte.

Jeder Wert kann in einem Set nur einmal vorkommen.

Wesentliche Set-Methoden

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 im Set ein Wert vorhanden ist

forEach()

Ruft einen Rückruf für jedes Element im Set auf

values()

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

size

Gibt die Anzahl der Elemente 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 new 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 Werte 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 a Set
const letters = new Set();

// Create Variables
const a = "a";
const b = "b";
const c = "c";

// 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 Elements
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 neues Iteratorobjekt 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

// List all Elements
let text = "";
for (const x of letters.values()) {
  text += x;
}

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>