Zusammenfassung

In dieser Lektion hast du gelernt:

• Arrays haben Methoden, die die häufigsten Schleifen ersetzen. Die meisten nehmen einen Callback entgegen: eine Funktion, meistens eine Pfeilfunktion, die die Methode für jedes Element aufruft, etwa (tier) => tier.alter < 5.
• filter() gibt ein neues Array mit den Elementen zurück, für die der Callback true zurückgibt. Seine length verrät dir, wie viele es sind.
• map() gibt ein neues Array mit dem zurück, was der Callback für jedes Element zurückgibt: tiere.map((tier) => tier.name).
• forEach() ruft den Callback nur für jedes Element auf, wie eine for...of-Schleife.
• find() gibt das erste Element zurück, für das der Callback true zurückgibt, oder undefined, wenn es keines gibt. some() sagt dir, ob mindestens ein Element die Bedingung erfüllt, every(), ob alle sie erfüllen.
• join(", ") verbindet die Elemente zu einem Text, mit ", " dazwischen.
• Methoden lassen sich verketten: tiere.filter(...).map(...).join(", "). Wähle zuerst die Elemente aus, wandle sie dann um.
• sort() sortiert das Array selbst. Ohne Vergleichsfunktion vergleicht es die Elemente als Texte, aus [10, 9, 1] wird also [1, 10, 9]. Zahlen sortierst du mit (a, b) => a - b, oder mit b - a, wenn die größte zuerst kommen soll, und Texte mit (a, b) => a.localeCompare(b, "de").
• Spread, die drei Punkte, kopiert: [...temperaturen] ist ein neues Array, [...vormittags, ...nachmittags] verbindet zwei Arrays, und { ...leo, alter: 7 } ist eine geänderte Kopie eines Objekts. Wenn du auch die ursprüngliche Reihenfolge brauchst, sortiere eine Kopie.
• Die Destrukturierung nimmt Werte über ihre Namen aus einem Objekt heraus, const { name, alter } = leo;, und über ihre Positionen aus einem Array, const [erstes, zweites] = jahre;.

Als Nächstes folgt noch ein kleines Projekt, eine Fußball-Ligatabelle, in dem du Funktionen, Objekte und diese Methoden einsetzt. Danach läuft dein Code in der Lektion „JavaScript auf Webseiten“ auf einer Webseite: Er verändert, was die Seite anzeigt, und reagiert auf Klicks. Und du wirst sehen, dass auch die Teile einer Webseite Objekte sind, mit Eigenschaften, die du lesen und ändern kannst.

Jetzt etwas Übung. Der Zoo im Editor führt eine Liste seiner Tiere.