JavaScript - For...of-Schleife

Willkommen, ambitionierte Programmierer! Heute tauchen wir in eine der nützlichsten Funktionen von JavaScript ein: die for...of-Schleife. Als dein freundlicher Nachbarschaftsinformatiklehrer freue ich mich darauf, dich auf dieser Reise zu führen. Also hole dir dein Lieblingsgetränk, setze dich bequem hin, und lasst uns gemeinsam dieses Coding-Abenteuer starten!

Was ist die for...of-Schleife?

Bevor wir ins Detail gehen, lassen wir uns erst einmal anschauen, was die for...of-Schleife überhaupt ist. Stell dir vor, du hast einen Korb voller bunter Früchte und möchtest jede Frucht einzeln untersuchen. Die for...of-Schleife ist wie dein hilfreicher Assistent, der jede Frucht aus dem Korb nimmt und sie dir eine nach der anderen übergibt, bis der Korb leer ist.

In Programmierbegriffen ermöglicht die for...of-Schleife uns, überiterierbare Objekte wie Arrays, Zeichenketten und andere Datenstrukturen, die wir später kennenlernen werden, zu durchlaufen.

Syntax

Nun schauen wir uns an, wie man eine for...of-Schleife schreibt. Keine Sorge, wenn es am Anfang etwas seltsam aussieht – wir werden es gemeinsam auseinandernehmen!

for (variable of iterable) {
// auszuführender Code
}

Lassen wir das auseinandernehmen:

• for: Dieses Schlüsselwort erzählt JavaScript, dass wir eine Schleife starten.
• variable: Hier speichern wir jedes Element, während wir durch das.iterierbare Objekt gehen.
• of: Dieses Schlüsselwort macht aus ihr eine for...of-Schleife.
• iterable: Dies ist das Objekt, das wir durchlaufen (wie unser Fruchtkorb).
• Der Code innerhalb der geschweiften Klammern {} ist das, was wir mit jedem Element machen möchten.

Beispiele

Beispiel 1: Durchlaufen eines Arrays

Lassen wir mit einem einfachen Beispiel beginnen. Wir erstellen ein Array mit Früchten und geben jeden einzelnen aus.

let fruits = ['apple', 'banana', 'cherry', 'date'];

for (let fruit of fruits) {
console.log(fruit);
}

Wenn du dieses Skript ausführst, wirst du sehen:

apple
banana
cherry
date

Was passiert hier? Unsere for...of-Schleife nimmt jede Frucht aus dem fruits-Array und speichert sie in der fruit-Variable. Dann verwenden wir console.log() um jede Frucht auszugeben.

Beispiel 2: Durchlaufen einer Zeichenkette

Wusstest du, dass Zeichenketten ebenfalls durchlauffähig sind? Lassen wir ein Wort buchstabieren:

let word = 'Hello';

for (let letter of word) {
console.log(letter);
}

Dies wird ausgeben:

H
e
l
l
o

Jedes Zeichen in der Zeichenkette wird als ein einzelnes Element behandelt, das wir durchlaufen können. Cool, oder?

Beispiel 3: Verwenden der for...of-Schleife mit Zahlen

Nun werden wir etwas praktischer. Stell dir vor, du bist ein Lehrer (wie ich!) und möchtest den Durchschnitt einer Klasse berechnen:

let scores = [85, 92, 78, 95, 88];
let total = 0;
let count = 0;

for (let score of scores) {
total += score;
count++;
}

let average = total / count;
console.log(`Der Klassen-Durchschnitt ist ${average}`);

Dieses Skript berechnet und gibt den Durchschnitt aus. Wir verwenden die for...of-Schleife, um alle Punkte zusammenzuzählen und die Anzahl der Punkte zu ermitteln.

Beispiel 4: Vorzeitiges Beenden der Schleife

Manchmal möchtest du die Schleife vor dem Ende abbrechen. Wir können dies mit dem break-Schlüsselwort tun. Angenommen, wir suchen nach einer bestimmten Frucht:

let fruits = ['apple', 'banana', 'cherry', 'date'];
let searchFor = 'cherry';

for (let fruit of fruits) {
if (fruit === searchFor) {
console.log(`Gefunden ${searchFor}!`);
break;
}
console.log(`Überprüfe ${fruit}...`);
}

Dieses Skript wird anhalten, sobald es 'cherry' findet, ohne die verbleibenden Früchte zu überprüfen.

Beispiel 5: Überspringen von Elementen mit continue

Was ist, wenn wir bestimmte Elemente überspringen möchten? Wir können das continue-Schlüsselwort verwenden. Lassen wir nur Früchte drucken, die mit 'a' beginnen:

let fruits = ['apple', 'banana', 'apricot', 'cherry', 'avocado'];

for (let fruit of fruits) {
if (!fruit.startsWith('a')) {
continue;
}
console.log(fruit);
}

Dies wird nur 'apple', 'apricot' und 'avocado' ausgeben.

Methodentabelle

Hier ist eine praktische Tabelle der Methoden, die wir in unseren Beispielen verwendet haben:

Methode	Beschreibung	Beispiel
console.log()	Gibt Ausgabe in die Konsole aus	console.log('Hallo, Welt!')
startsWith()	Prüft, ob eine Zeichenkette mit angegebenen Zeichen beginnt	'apple'.startsWith('a') // true
break	Verlässt eine Schleife	if (Bedingung) break;
continue	Springt zur nächsten Schleifeniteration	if (Bedingung) continue;

Schlussfolgerung

Und da hast du es, meine Freunde! Wir haben die for...of-Schleife durchquert, von einfachen Arrays bis hin zu Zeichenketten und haben sogar gelernt, wie man Elemente abbricht oder überspringt. Denke daran, Übung macht den Meister, also habe keine Angst, diese Konzepte auszuprobieren.

In meinen Jahren des Unterrichtens habe ich festgestellt, dass der beste Weg zum Lernen das Tun ist. Also hier ist ein kleines Hausaufgabe für dich: Versuche, deine eigenen for...of-Schleifen mit verschiedenen Datenarten zu erstellen. Vielleicht durchläufst du deine Lieblingsfilme oder die Namen deiner Freunde. Die Möglichkeiten sind endlos!

Frohes Coden und erinner dich daran – in der Welt der Programmierung ist jede Schleife eine Gelegenheit für die Entdeckung!

Credits: Image by storyset