14. Unterrichtsblock

JavaScript Sets

Ein JavaScript-Set ist eine Sammlung eindeutiger Werte. Jeder Wert darf in einem Set nur einmal vorkommen.

HINWEIS: Sets, Maps und Arrays sind sogenannte Iterable. Iterable sind iterierbare Objekte. Auf Iterable kann mit einfachem und effizientem Code zugegriffen werden. Iterable können mit for..of-Schleifen iteriert werden.

Set-Methoden & Eigenschaften:

So erstellet man ein Set

Man kann ein JavaScript-Set erstellen, indem:

• Man ein Array an new Set() übergibt
• Man add()verwendet, um Werte hinzuzufügen
• Man add() verwendet, um Variablen hinzuzufügen

Die new Set()-Methode

Hier wird ein Array an den new Set()-Konstruktor übergeben:

Beispiel

// Neues Set erstellen
const buchstaben = new Set(["a","b","c"]);

Set erstellen und Werte hinzufügen:

Beispiel

// Erstelle das Set
const buchstaben = new Set();

// Füge dem Set Werte hinzu
buchstaben.add("a");
buchstaben.add("b");
buchstaben.add("c");

Set erstellen und Variablen hinzufügen:

Beispiel

// Erstelle das Set
const buchstaben = new Set();

// Erstelle die Variablen
const a = "a";
const b = "b";
const c = "c";

// Füge die Variablen zum Set hinzu
buchstaben.add(a);
buchstaben.add(b);
buchstaben.add(c);
buchstaben.add(c); // Wenn man zwei gleiche Werte hinzufügt, wird nur der erste Wert gespeichert

Die forEach()-Methode

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

Beispiel

// Erstelle das Set
const buchstaben = new Set(["a","b","c"]);

// Liste alle Elemente auf
let text = "";
buchstaben.forEach (function(nameWert) {
  text += nameWert + "<br>";
})

Die values() Methode

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

buchstaben.values()   // Gibt den [object Set Iterator] zurück

Somit kann das Iterator-Objekt verwendet werden, um auf die Elemente im Set zuzugreifen:

Beispiel

// Liste alle Elemente auf
let text = "";
for (const x of buchstaben.values()) {
  text += x;
}

JavaScript Maps

Eine Map enthält Schlüssel-Wert-Paare, wobei die Schlüssel einen beliebigen Datentyp haben können. Eine Map merkt sich auch die ursprüngliche Einfügungsreihenfolge der Schlüssel.

Map Methoden

So wird eine Map erstellt

Man kann JavaScript-Maps erstellen, indem man:

• Man ein Array an new Map()übergibt
• Eine Map mit Map.set()erstellt

Die new Map()-Methode

Man kann eine Map erstellen, indem man ein Array an den new Map()-Konstruktor übergibt:

Beispiel

// Erstelle eine Map
const obst = new Map([
  ["Äpfel", 500],
  ["Bananen", 300],
  ["Orangen", 200]
]);

Die set()-Methode

Man kann weitere Elemente zu einer Map mit der set()Methode hinzufügen:

Beispiel

// Erstelle eine Map
const obst = new Map();

// Werte festlegen
obst.set("Äpfel", 500);
obst.set("Bananen", 300);
obst.set("Orangen", 200);

Die set()Methode kann auch verwendet werden, um bestehende Map-Werte zu ändern:

Beispiel

obst.set("Äpfel", 200);

Die get()-Methode

Die get()Methode erhält den Wert eines Schlüssels in einer Map:

Beispiel

obst.get("Orangen");    // Gibt 200 zurück

Die size-Eigenschaft

Die size-Eigenschaft gibt die Anzahl der Elemente in einer Map zurück:

Beispiel

obst.size;   // Gibt 3 zurück

Die delete() Methode

Die delete()Methode entfernt ein Map-Element:

Beispiel

obst.delete("Äpfel");

Die has()-Methode

Die has()Methode gibt true zurück, wenn ein Schlüssel in einer Map vorhanden ist:

Beispiel

obst.has("Äpfel");     // Gibt true zurück

obst.delete("Äpfel");
obst.has("Äpfel");     // Probiere diesen Code aus, was wird ausgegeben?

JavaScript-Objekte & Maps

Unterschiede zwischen JavaScript-Objekten und Maps:

Die forEach()-Methode

Die forEach()Methode ruft eine Funktion für jedes Schlüssel/Wert-Paar in einer Map auf:

Beispiel

// Liste alle Einträge auf
let text = "";
obst.forEach (function(wert, schluessel) {
  text += schluessel + ' = ' + wert;
})

Die Methode entries()

Die entries()Methode gibt ein Iterator-Objekt mit den [Schlüsseln, Werten] in einer Map zurück:

Beispiel

// Liste alle Einträge auf
let text = "";
for (const x of obst.entries()) {
  text += x + "<br>";
}

Die => Pfeil-Funktion

Pfeilfunktionen ermöglichen es uns, eine kürzere Funktionssyntax zu schreiben:

let meineFunktion = (a, b) => a * b;

Ohne Pfeil:

hallo = function() {
  return "Servus!";
}

Mit Pfeilfunktion:

hallo = () => {
  return "Servus!";
}

Es wird noch kürzer! Wenn die Funktion nur eine Anweisung hat und die Anweisung einen Wert zurückgibt, kann man die Klammern und das return Schlüsselwort entfernen:

Standardmäßiger Rückgabewert der Pfeilfunktionen:

hallo = () => "Servus!";

HINWEIS: Dies funktioniert nur, wenn die Funktion nur eine Anweisung hat.

Wenn man Parameter hat, werden Sie diese in den Klammern übergeben:

Pfeilfunktion mit Parametern:

hallo = (wert) => "Servus " + wert;

Wenn man nur einen Parameter hat, kann man die Klammern auch überspringen:

Pfeilfunktion ohne Klammern:

hallo = wert => "Servus " + wert;

let addiere = (a, b) => {
  // Ihr Code hier
};
console.log(addiere(5, 3)); // Sollte 8 ausgeben

let verdopple = // Ihr Code hier;
console.log(verdopple(4)); // Sollte 8 ausgeben

let istGroesserAlsZehn = // Ihr Code hier;
console.log(istGroesserAlsZehn(12)); // Sollte true ausgeben
console.log(istGroesserAlsZehn(8)); // Sollte false ausgeben

Das this Keyword

Auch die Handhabung von this ist bei Pfeilfunktionen anders als bei regulären Funktionen. Kurz gesagt, bei Pfeilfunktionen gibt es keine Bindung von this.

In regulären Funktionen repräsentiert das Schlüsselwort this das Objekt, welches die Funktion, das Fenster, das Dokument, die Schaltfläche oder was auch immer aufgerufen hat.

Bei Pfeilfunktionen repräsentiert das this Schlüsselwort immer das Objekt, das die Pfeilfunktion definiert hat.

Schauen wir uns zwei Beispiele an, um den Unterschied zu verstehen. Beide Beispiele rufen eine Methode zweimal auf, zuerst beim Laden der Seite und noch einmal, wenn der Benutzer auf eine Schaltfläche klickt.

Das erste Beispiel verwendet eine reguläre Funktion und das zweite Beispiel eine Pfeilfunktion.

Das Ergebnis zeigt, dass das erste Beispiel zwei verschiedene Objekte (Fenster und Schaltfläche) zurückgibt und das zweite Beispiel das Fensterobjekt zweimal zurückgibt, da das Fensterobjekt der „Besitzer“ der Funktion ist.

Beispiel

In einer regulären Funktion stellt this das Objekt dar, das die Funktion aufruft :

// Reguläre Funktion:
hallo = function() {
  document.getElementById("demo").innerHTML += this;
}

// Das window-Objekt ruft die Funktion auf:
window.addEventListener("load", hallo);

// Ein Button-Objekt ruft die Funktion auf:
document.getElementById("btn").addEventListener("click", hallo);

Beispiel

Bei einer Pfeilfunktion stellt this den Eigentümer der Funktion dar:

// Pfeilfunktion:
hallo = () => {
  document.getElementById("demo").innerHTML += this;
}

// Das window-Objekt ruft die Funktion auf:
window.addEventListener("load", hello);

// Ein Button-Objekt ruft die Funktion auf:
document.getElementById("btn").addEventListener("click", hallo);

An diese Unterschiede ist zu denken, wenn man mit Funktionen arbeiten. Manchmal ist das Verhalten regulärer Funktionen das, was man möchte. Wenn nicht, verwendet man Pfeilfunktionen.

let person = {
  name: 'Max',
  begruessung: function() {
    // Ihr Code hier
  }
};
console.log(person.begruessung()); // Sollte 'Hallo, ich bin Max' ausgeben

function Auto(modell, farbe) {
  // Ihr Code hier
}

let meinAuto = new Auto('Golf', 'blau');
console.log(meinAuto.modell); // Sollte 'Golf' ausgeben
console.log(meinAuto.farbe); // Sollte 'blau' ausgeben

function zeigeThis() {
  console.log(this);
}

zeigeThis(); // Direkter Aufruf

let objekt = {
  methode: zeigeThis
};
objekt.methode(); // Aufruf als Methode eines Objekts