JavaScript-Sets: Dein freundlicher Leitfaden für organisierte Daten

Hallo da draußen, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der JavaScript-Sets. Mach dir keine Sorgen, wenn du neu im Programmieren bist – ich werde dein treuer Guide sein, und wir werden dieses Thema Schritt für Schritt erkunden. Am Ende dieses Tutorials wirst du Sets wie ein Profi manipulieren können!

JavaScript - Sets

Was ist ein Set?

Bevor wir uns in den Code stürzen, lassen wir uns mal über das Set unterhalten. Stell dir vor, du hast einen Beutel Murmeln, aber dieser Beutel ist besonders – er permiteirt nur eine Murmel jeder Farbe. Das ist im Wesentlichen, was ein Set in JavaScript ist: eine Sammlung, die nur einzigartige Werte enthalten kann. Keine Duplikate erlaubt!

Syntax: Ein Set erstellen

Lass uns mit den Grundlagen beginnen. So erstellst du ein neues Set:

let mySet = new Set();

Das war's! Du hast gerade ein leeres Set erstellt. Aber was ist, wenn du ein Set mit einigen Anfangswerten erstellen möchtest? Kein Problem:

let fruitSet = new Set(['apple', 'banana', 'orange']);

Jetzt hast du ein Set mit drei Früchten. Denke daran, dass selbst wenn du versucht, ein weiteres 'apple' hinzuzufügen, es nicht inkludiert wird, weil Sets nur einzigartige Werte behalten.

Parameter: Was kannst du in ein Set einfügen?

Sets in JavaScript sind sehr flexibel. Du kannst verschiedene Arten von Werten hinzufügen:

Zahlen
Strings
Objekte
Arrays
Sogar andere Sets!

Schauen wir uns ein Beispiel an:

let mixedSet = new Set([1, 'two', {three: 3}, [4, 5]]);
console.log(mixedSet);

Wenn du diesen Code ausführst, wirst du sehen, dass unser Set alle diese verschiedenen Arten von Werten enthält.

Beispiele: Mit Sets spielen

Jetzt, wo wir die Grundlagen kennen, lassen's uns ein bisschen Spaß mit Sets haben!

Hinzufügen und Löschen von Elementen

let colorSet = new Set();

// Hinzufügen von Elementen
colorSet.add('red');
colorSet.add('blue');
colorSet.add('green');

console.log(colorSet); // Ausgabe: Set(3) { 'red', 'blue', 'green' }

// Versuchen, ein Duplikat hinzuzufügen
colorSet.add('red');
console.log(colorSet); // Ausgabe: Set(3) { 'red', 'blue', 'green' }

// Ein Element löschen
colorSet.delete('blue');
console.log(colorSet); // Ausgabe: Set(2) { 'red', 'green' }

Wie du siehst, blieb das Set unverändert, als wir versucht haben, 'red' erneut hinzuzufügen. Das ist die Schönheit der Sets – sie behandeln Duplikate automatisch für uns!

Überprüfen von Elementen

Möchtest du wissen, ob ein Set einen bestimmten Wert enthält? Verwende die has()-Methode:

let animalSet = new Set(['dog', 'cat', 'bird']);

console.log(animalSet.has('dog')); // Ausgabe: true
console.log(animalSet.has('fish')); // Ausgabe: false

Größe eines Sets

Um herauszufinden, wie viele einzigartige Elemente in deinem Set sind, verwende die size-Eigenschaft:

let numberSet = new Set([1, 2, 3, 4, 5, 5, 5]);
console.log(numberSet.size); // Ausgabe: 5

Obwohl wir dreimal die 5 hinzugefügt haben, zählt das Set sie nur einmal!

Mathematische Set-Operationen

Jetzt setzen wir unsere Matematikhüte auf und schauen uns einige Operationen an, die wir mit Sets durchführen können.

Vereinigung (Union)

Eine Vereinigung kombiniert zwei Sets und behält alle einzigartigen Elemente beider bei:

let set1 = new Set([1, 2, 3]);
let set2 = new Set([3, 4, 5]);

let unionSet = new Set([...set1, ...set2]);
console.log(unionSet); // Ausgabe: Set(5) { 1, 2, 3, 4, 5 }

Schnittmenge (Intersection)

Eine Schnittmenge behält nur die Elemente bei, die in beiden Sets existieren:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let intersectionSet = new Set([...set1].filter(x => set2.has(x)));
console.log(intersectionSet); // Ausgabe: Set(2) { 3, 4 }

Differenz

Eine Differenz behält die Elemente aus dem ersten Set bei, die nicht im zweiten Set sind:

let set1 = new Set([1, 2, 3, 4]);
let set2 = new Set([3, 4, 5, 6]);

let differenceSet = new Set([...set1].filter(x => !set2.has(x)));
console.log(differenceSet); // Ausgabe: Set(2) { 1, 2 }

JavaScript Set Referenz

Hier ist eine praktische Tabelle aller Methoden und Eigenschaften, die wir besprochen haben, plus ein paar mehr:

Methode/Eigenschaft	Beschreibung
`new Set()`	Erzeugt ein neues Set
`add(value)`	Fügt ein neues Element zum Set hinzu
`delete(value)`	Entfernt ein Element aus dem Set
`has(value)`	Gibt true zurück, wenn der Wert im Set existiert
`clear()`	Entfernt alle Elemente aus dem Set
`size`	Gibt die Anzahl der Elemente im Set zurück
`forEach(callback)`	Ruft eine Funktion für jedes Element im Set auf
`values()`	Gibt einen Iterator mit allen Werten im Set zurück
`keys()`	Das gleiche wie values()
`entries()`	Gibt einen Iterator mit den [value, value]-Paaren aus dem Set zurück

Und da hast du es, Leute! Du hast gerade deinen Crashkurs in JavaScript Sets abgeschlossen. Denke daran, Sets sind wie diese Freunde, die immer Dinge einzigartig und organisiert halten – sie sind großartig, wenn du mit Daten arbeitest, die keine Duplikate haben dürfen.

Übe das Erstellen und Manipulieren von Sets und bald wirst du sie natürlich in deinen编码-Abenteuern verwenden. Wer weiß? Vielleicht beginnst du sogar, Sets überall zu sehen – wie in diesem einen Sockenschrank, in dem keine zwei Socken gleich sind!

Weiter codieren, bleib neugierig und erinner dich daran: In der Welt der Sets ist Einzigartigkeit das Spiel des Lebens!

Credits: Image by storyset