JavaScript for…of-Schleife erklärt: Syntax, Beispiele und bewährte Methoden

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

.## 1. Einführung

Beim Arbeiten mit Daten in JavaScript ist Wiederholung unerlässlich. Um Daten wie Arrays und Strings der Reihe nach zu verarbeiten, stellt JavaScript mehrere Schleifensyntaxen bereit. Unter ihnen sticht die for…of‑Anweisung als eine einfache, aber leistungsstarke Option hervor.

In diesem Artikel erklären wir die for…of‑Anweisung von JavaScript im Detail – von den Grundlagen bis zu fortgeschritteneren Anwendungsfällen. Wir beginnen mit einsteigerfreundlichen Beispielen und gehen dann zu praktischen Mustern über, die in der mittleren und realen Entwicklung verwendet werden. Nach dem Lesen werden Sie die for…of‑Anweisung selbstbewusst einsetzen können, ohne beim Schreiben von Schleifen stecken zu bleiben.

2. Was ist die for…of‑Anweisung von JavaScript? Grundlegende Verwendung

2.1 Überblick über die for…of‑Anweisung

Die for…of‑Anweisung von JavaScript ist eine Syntax, die es Ihnen ermöglicht, iterierbare Objekte sauber und einfach zu durchlaufen. Sie ist dafür ausgelegt, Datenstrukturen wie Arrays, Strings, Map und Set effizient zu handhaben.

2.2 Grundsyntax der for…of‑Anweisung

Verwenden Sie die folgende Syntax, um jedes Element eines iterierbaren Objekts der Reihe nach zu verarbeiten.

for (const element of arrayOrObject) {
  // 반복 처리
}

Diese Syntax ist nützlich, wenn Sie jedes Element aus einem Array oder String leicht abrufen möchten.

2.3 Praktische Code‑Beispiele

Beispiel 1: Array‑Elemente in Reihenfolge ausgeben

const fruits = ['Apple', 'Banana', 'Orange'];
for (const fruit of fruits) {
  console.log(fruit);
}

Ausgabe:

Apple  
Banana  
Orange

Beispiel 2: Jeden Buchstaben eines Strings ausgeben

const word = 'JavaScript';
for (const char of word) {
  console.log(char);
}

Ausgabe:

J  
a  
v  
a  
S  
c  
r  
i  
p  
t

2.4 Unterstützte Datentypen

Die for…of‑Anweisung kann mit den folgenden iterierbaren Objekten verwendet werden:

1. Arrays (Array)
2. Strings (String)
3. Map‑Objekte
4. Set‑Objekte
5. Das arguments‑Objekt (ein Objekt, das als Funktionsargumente übergeben wird)
6. NodeList‑Objekte (eine Sammlung von HTML‑Elementen)

Hinweis: Sie können sie nicht direkt auf Objekt‑Literals anwenden (die Lösung werden wir später erklären).

3. Unterschiede und Vergleiche mit anderen Schleifensyntaxen

3.1 Unterschiede zwischen for…of und for…in

Beispiel: Verwendung von for…in

const obj = { a: 1, b: 2, c: 3 };
for (const key in obj) {
  console.log(key); // a, b, c
}

Wichtiger Hinweis:
Da for…in Eigenschaften aus der Prototypenkette aufzählen kann, sollten Sie vorsichtig sein – besonders beim Durchlaufen von Objekten.

3.2 Unterschiede zwischen for…of und forEach

Beispiel: Verwendung von forEach

const arr = [1, 2, 3];
arr.forEach(num => {
  console.log(num);
});

Wichtiger Hinweis:
Da forEach die Schleife nicht vorzeitig beenden kann, wird die for…of‑Anweisung empfohlen, wenn die Steuerung des Ablaufs wichtig ist.

4. Praktische Beispiele und fortgeschrittene Techniken

4.1 Filtern eines Arrays

Das folgende Beispiel gibt nur gerade Zahlen aus.

const numbers = [1, 2, 3, 4, 5];
for (const num of numbers) {
  if (num % 2 === 0) console.log(num); // Output only even numbers
}

Ausgabe:

2  
4

4.2 Schlüssel und Werte aus einer Map erhalten

Dieses Beispiel zeigt, wie man Schlüssel und Werte mit einem Map‑Objekt abruft.

const map = new Map([
  ['name', 'Taro'],
  ['age', 25]
]);
for (const [key, value] of map) {
  console.log(`${key}: ${value}`);
}

Ausgabe:

name: Taro  
age: 25

4.3 Kombination mit asynchroner Verarbeitung

Unten finden Sie ein Beispiel für die Handhabung asynchroner Vorgänge mit der for…of‑Anweisung.

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

In diesem Beispiel wird jede API‑Anfrage nacheinander ausgeführt, sodass Sie Daten abrufen können, während die Ausführungsreihenfolge erhalten bleibt.

5. Hinweise und Fehlersuche

5.1 Wenn Sie einen Fehler mit Objekten erhalten

Die for…of-Anweisung kann nicht mit Objektliteralen verwendet werden. Verwenden Sie stattdessen Object.entries().

Beispiel: Verarbeitung mit Object.entries()

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Ausgabe:

a 1  
b 2

Mit diesem Ansatz können Sie effizient durch die Schlüssel und Werte eines Objekts iterieren.

5.2 Leistungsüberlegungen

Die for…of-Anweisung bietet im Allgemeinen ausreichende Leistung für typische Anwendungsfälle, aber Sie sollten vorsichtig sein, wenn Sie mit großen Datensätzen arbeiten. Bei Bedarf sollten Sie eine indexbasierte for‑Schleife oder eine while‑Schleife in Betracht ziehen.

Beispiel: Indexbasierte for‑Schleife

const largeArray = Array(1000000).fill(1);
for (let i = 0; i < largeArray.length; i++) {
  // Performance-focused processing
  console.log(largeArray[i]);
}

5.3 Fehlerbehandlung hinzufügen

Wenn Sie asynchrone Verarbeitung mit der for…of-Anweisung kombinieren, stellen Sie sicher, dass Sie eine ordnungsgemäße Fehlerbehandlung einbinden.

Beispiel: Fehlerbehandlung mit try…catch

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    try {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    } catch (error) {
      console.error('An error occurred:', error);
    }
  }
}
fetchData();

6. FAQ-Bereich

Q1: Funktioniert die for…of-Anweisung in allen Browsern?

A1:
Die for…of-Anweisung wurde in ES6 (ECMAScript 2015) eingeführt. Sie wird in modernen Browsern unterstützt, funktioniert jedoch nicht in Internet Explorer.

Unterstützte Browser:

• Google Chrome 38 oder neuer
• Firefox 36 oder neuer
• Safari 7.1 oder neuer
• Edge 12 oder neuer

Wenn Sie ältere Browser unterstützen müssen, verwenden Sie Babel, um Ihren Code zu transpilieren, oder wählen Sie eine andere Schleifen‑Syntax.

Q2: Wie kann ich den Index erhalten, wenn ich for…of verwende?

A2:
Mit for…of können Sie nicht direkt auf Indizes zugreifen, aber Sie können die entries()‑Methode verwenden, um sowohl den Index als auch den Wert gleichzeitig zu erhalten.

Beispiel:

const fruits = ['Apple', 'Banana', 'Orange'];
for (const [index, fruit] of fruits.entries()) {
  console.log(index, fruit);
}

Ausgabe:

0 Apple  
1 Banana  
2 Orange

Q3: Kann ich for…of mit Objektliteralen verwenden?

A3:
Nein. Die for…of-Anweisung ist nur für iterierbare Objekte gedacht. Objektliterale sind nicht iterierbar, aber Sie können mit Object.entries() über Schlüssel und Werte iterieren.

Beispiel:

const obj = { a: 1, b: 2 };
for (const [key, value] of Object.entries(obj)) {
  console.log(key, value);
}

Ausgabe:

a 1  
b 2

Q4: Kann ich for…of mit asynchronen Vorgängen verwenden?

A4:
Ja. Sie können es zusammen mit async/await verwenden.

Beispiel:

const urls = ['url1', 'url2', 'url3'];

async function fetchData() {
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}
fetchData();

Q5: Was ist der Unterschied zwischen for…of und forEach?

A5:
Die nachstehende Tabelle fasst die Unterschiede zusammen.

7. Zusammenfassung

In diesem Artikel haben wir die folgenden wichtigsten Punkte zur JavaScript‑for…of-Anweisung behandelt.

• Wie man die grundlegende Syntax und Anwendungsbeispiele versteht und sie zum Durchlaufen von Arrays und Zeichenketten anwendet
• Die Unterschiede und besten Anwendungsfälle im Vergleich zu anderen Schleifen‑Syntaxen wie for…in und forEach
• Fortgeschrittene Beispiele einschließlich Map‑ und Set‑Objekten sowie deren Kombination mit asynchroner Verarbeitung
• Ein praktischer FAQ‑Abschnitt zur Beantwortung häufiger Fragen

7.1 Vorteile der for…of-Anweisung

• Einfach und sehr lesbar
• Flexible Unterstützung für iterierbare Objekte
• Einfache Schleifensteuerung, da sie break und continue unterstützt

8. Was als Nächstes zu Lernen

Sobald du die for…of-Schleife beherrschst, ist es eine gute Idee, als nächsten Schritt die folgenden Features zu lernen.

1. Spread-Syntax (…)

• Ein nützliches Feature zum Erweitern und Zusammenführen von Arrays und Objekten.

1. Destrukturierende Zuweisung

• Eine Technik zum einfachen Extrahieren von Werten aus Arrays und Objekten.

1. Promises und async/await im Detail

• Lerne effiziente Wege, asynchronen Code zu schreiben.

Durch die Kombination dieser Features wirst du in der Lage sein, fortgeschrittenere JavaScript-Programme zu erstellen.

Abschließende Gedanken

Dieser Artikel bot eine vollständige Anleitung zur for…of-Schleife von JavaScript, die alles von den Grundlagen bis zu praktischen Anwendungsfällen für die reale Entwicklung abdeckt.

Beispielaktionen für deinen nächsten Schritt:

• Implementiere die for…of-Schleife in deinem eigenen Code und experimentiere damit.
• Versuche, Arrays, Map und Set zu verarbeiten, um dein Verständnis zu vertiefen.
• Fordere dich mit fortgeschritteneren ES6-Features heraus, um deine Fähigkeiten zu verbessern.