JavaScript for…in-Schleife erklärt: Syntax, Anwendungsfälle und bewährte Methoden

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

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

1. Einführung｜Welche Probleme kann die for…in‑Anweisung lösen?

JavaScript ist eine der am häufigsten genutzten Programmiersprachen in der Webentwicklung. Unter den vielen Funktionen ist Schleifen essenziell, um Daten wiederholt zu verarbeiten.
Insbesondere ist die for…in‑Anweisung nützlich, um über die Eigenschaften eines Objekts zu iterieren.

Zweck dieses Artikels

In diesem Artikel behandeln wir im Detail folgende Punkte:

• Grundsyntax und Verwendung der JavaScript for…in‑Schleife
• Vorsicht bei der Verwendung mit Arrays
• Unterschiede zu anderen Schleifen‑Konstrukten (for…of und forEach)
• Häufige Fehler und deren Behebung

Was Sie lernen werden

• Wie man Objekt‑Eigenschaften und Array‑Elemente effizient verarbeitet
• Vorsicht und sichere Nutzung der for…in‑Anweisung
• Praktische Code‑Beispiele und Leistungsvergleiche

Der Artikel ist so aufgebaut, dass er sowohl Anfängern als auch fortgeschrittenen JavaScript‑Entwicklern nützliches Wissen vermittelt.
Starten wir im nächsten Abschnitt mit den Grundlagen der for…in‑Anweisung.

2. Was ist die JavaScript for…in‑Anweisung?【Grundlegende Erklärung】

In JavaScript wird die for…in‑Anweisung verwendet, um über die Eigenschaften eines Objekts zu iterieren. Diese Syntax ist besonders für Objekte geeignet und ermöglicht es, jeden Eigenschaftsnamen (Key) einzeln zu verarbeiten.

Grundsyntax

Hier ist die Grundsyntax der for…in‑Schleife:

for (variable in object) {
  // Repeated processing
}

Parameter‑Erklärung:

• variable : Speichert den aktuellen Eigenschaftsnamen (Key).
• object : Das Zielobjekt, das Sie durchlaufen möchten.

Anwendungsbeispiel: Auflisten von Objekteigenschaften

const person = {
  name: "Taro",
  age: 25,
  city: "Tokyo"
};

for (const key in person) {
  console.log(`${key}: ${person[key]}`);
}

Ausgabe:

name: Taro
age: 25
city: Tokyo

Hinweis: Reihenfolge der aufgelisteten Eigenschaften

Die Reihenfolge der Eigenschaften in einer for…in‑Schleife ist nicht garantiert. Laut JavaScript‑Spezifikation kann die Reihenfolge von der Einfügereihenfolge abweichen, wenn die Schlüssel Zeichenketten sind. Wenn Sie eine strikte Reihenfolge benötigen, verwenden Sie Alternativen wie Object.keys().

Zusammenfassung der Merkmale

1. Einfaches Abrufen von Objekt‑Keys: Nützlich, wenn Eigenschaftsnamen dynamisch benötigt werden.
2. Nur aufzählbare Eigenschaften werden berücksichtigt: Nicht‑aufzählbare Eigenschaften (enumerable: false) werden ausgeschlossen.
3. Auch von Prototypen geerbte Eigenschaften werden aufgelistet: Das kann zu Problemen führen, die im nächsten Abschnitt erklärt werden.

3. Arrays und die for…in‑Anweisung｜Wichtige Punkte

Die JavaScript for…in‑Anweisung ist dafür gedacht, Objekteigenschaften zu enumerieren, kann aber auch mit Arrays verwendet werden. Dabei gibt es mehrere Fallstricke. Wir betrachten ihr Verhalten und die Fallstricke im Detail.

Grundlegendes Verhalten mit Arrays

Betrachten Sie folgendes Beispiel:

const fruits = ["Apple", "Banana", "Orange"];

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Ausgabe:

0 Apple  
1 Banana  
2 Orange

Hinweis 1: Prototyp‑Eigenschaften können aufgelistet werden

Array.prototype.newMethod = function () {
  return "New Method";
};

for (const index in fruits) {
  console.log(index, fruits[index]);
}

Ausgabe:

0 Apple  
1 Banana  
2 Orange  
newMethod undefined

Lösung:

for (const index in fruits) {
  if (fruits.hasOwnProperty(index)) {
    console.log(index, fruits[index]);
  }
}

Hinweis 2: Reihenfolge ist nicht garantiert

const data = [];
data[10] = "Apple";
data[1] = "Banana";
data[5] = "Orange";

for (const index in data) {
  console.log(index, data[index]);
}

Ausgabe:

1 Banana  
5 Orange  
10 Apple

Hinweis 3: Indizes werden als Zeichenketten behandelt

const numbers = [10, 20, 30];
for (const index in numbers) {
  console.log(typeof index); // "string"
}

Lösung:

for (const index in numbers) {
  const numIndex = parseInt(index, 10);
  console.log(numIndex, numbers[numIndex]);
}

Zusammenfassung

• Die for…in-Anweisung ist besser für Objekte als für Arrays geeignet.
• Für die Reihenfolge und die Behandlung numerischer Indizes wird for…of oder eine traditionelle for-Schleife empfohlen.

4. Unterschiede zwischen for…in und for…of【Vergleichstabelle】

In JavaScript stehen sowohl for…in als auch for…of zum Durchlaufen von Daten zur Verfügung, aber ihre Anwendungsfälle und ihr Verhalten unterscheiden sich.

Syntaxvergleich

for…in:

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

for…of:

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value); // Retrieves values
}

Vergleichstabelle

Praktisches Beispiel｜Array-Verarbeitung

const arr = ['a', 'b', 'c'];

// for...in
for (const index in arr) {
  console.log(index); // Output: 0, 1, 2
}

// for...of
for (const value of arr) {
  console.log(value); // Output: 'a', 'b', 'c'
}

Zusammenfassung

• for…in: Am besten geeignet für die Handhabung von Objektschlüsseln.
• for…of: Am besten geeignet für Arrays und iterierbare Objekte.

5. Praktische Anwendung: Einsatzmöglichkeiten und bewährte Methoden der for…in-Anweisung

Hier untersuchen wir praktische Anwendungen der JavaScript for…in-Anweisung und stellen bewährte Methoden vor, die in der realen Entwicklung nützlich sind.

1. Beispiel 1｜Filtern von Objekteigenschaften

const user = {
  name: "Tanaka",
  age: 30,
  email: "tanaka@example.com",
  password: "secret123"
};

const publicData = {};
for (const key in user) {
  if (key !== "password") {
    publicData[key] = user[key];
  }
}
console.log(publicData);

Ausgabe:

{ name: 'Tanaka', age: 30, email: 'tanaka@example.com' }

2. Beispiel 2｜Verarbeiten verschachtelter Objekte

const data = {
  user: {
    name: "Sato",
    info: {
      age: 28,
      city: "Osaka"
    }
  }
};

function printNested(obj) {
  for (const key in obj) {
    if (typeof obj[key] === "object") {
      printNested(obj[key]);
    } else {
      console.log(`${key}: ${obj[key]}`);
    }
  }
}

printNested(data);

Ausgabe:

name: Sato
age: 28
city: Osaka

3. Bewährte Methode｜Ausschließen von Prototyp-Eigenschaften

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(`${key}: ${obj[key]}`);
  }
}

Ausgabe:

a: 1
b: 2

Zusammenfassung

• Wir haben geeignete Anwendungsfälle zum Filtern und Verarbeiten verschachtelter Objekte vorgestellt.
• Verwenden Sie hasOwnProperty(), um zu verhindern, dass unbeabsichtigte Prototypenvererbung aufgezählt wird.

6. Häufige Fehler und Lösungen mit for…in【Einsteigerfreundlich】

1. Fehlbeispiel 1｜Prototyp-Eigenschaften werden aufgezählt

const obj = { a: 1, b: 2 };
Object.prototype.c = 3;

for (const key in obj) {
  console.log(key, obj[key]);
}

Ausgabe:

a 1
b 2
c 3

Lösung:

for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key, obj[key]);
  }
}

2. Fehlbeispiel 2｜Verwendung von for…in mit Arrays

const arr = [10, 20, 30];
Array.prototype.extra = "Additional Data";

for (const index in arr) {
  console.log(index, arr[index]);
}

Ausgabe:

0 10
1 20
2 30
extra undefined

Lösung:

for (const value of arr) {
  console.log(value);
}

3. Fehlbeispiel 3｜Umgang mit undefinierten Werten

const obj = { a: 1, b: undefined, c: 3 };

for (const key in obj) {
  console.log(key, obj[key]);
}

Lösung:

for (const key in obj) {
  const value = obj[key] ?? "Default Value";
  console.log(key, value);
}

Zusammenfassung

• Probleme mit Prototyp-Eigenschaften: Verwenden Sie hasOwnProperty().
• Array-Verarbeitung: Bevorzugen Sie for…of oder forEach anstelle von for…in.
• Undefinierte Werte: Weisen Sie Standardwerte mit dem Nullish-Coalescing-Operator ( ?? ) zu.

7. Leistungstests und Alternativen zu for…in

1. Leistungsvergleich

for…in statement:

const obj = { a: 1, b: 2, c: 3 };
console.time("for...in");
for (const key in obj) {
  console.log(key, obj[key]);
}
console.timeEnd("for...in");

Object.keys():

console.time("Object.keys");
Object.keys(obj).forEach(key => {
  console.log(key, obj[key]);
});
console.timeEnd("Object.keys");

2. Beispielvergleichsergebnis

for...in: 0.015ms
Object.keys: 0.005ms

3. Empfohlene Alternativen

• Objektbehandlung: Bevorzugen Sie Object.keys() für bessere Leistung und Sicherheit.
• Arraybehandlung: Verwenden Sie for…of oder forEach für schnellere und zuverlässigere Iteration.

Zusammenfassung

• Die for…in-Anweisung ist praktisch, aber wählen Sie die am besten geeignete Schleifenstruktur unter Berücksichtigung von Leistung und Sicherheit.

8. Fazit｜Verständnis der for…in-Anweisung und nächste Schritte

1. Wichtigste Erkenntnisse

1. Grundsyntax und Verwendung von for…in:

• Wird verwendet, um über Objektschlüssel zu iterieren.
• Speziell für Objektschlüssel, nicht für Arrays.

1. Vorsicht bei Verwendung mit Arrays:

• Die Reihenfolge ist nicht garantiert, und Eigenschaften aus der Prototypenkette können einbezogen werden.
• Für Arrays verwenden Sie stattdessen for…of oder forEach().

1. Unterschiede zwischen for…in und for…of:

• for…in: Iteriert über Eigenschaftsnamen (Schlüssel).
• for…of: Iteriert über die tatsächlichen Werte von Arrays oder iterierbaren Objekten.

1. Praktische Anwendungen und bewährte Methoden:

• Umgang mit verschachtelten Objekten mittels Rekursion.
• Ausschluss der Prototypenvererbung mit hasOwnProperty().
• Verbesserung von Leistung und Sicherheit mit Object.keys() oder Object.entries().

1. Leistungsoptimierung:

• Object.keys() + forEach() wird empfohlen, um Reihenfolgegarantien und Effizienz zu gewährleisten, und stellt eine sicherere Alternative zu for…in dar.

2. Antworten auf häufige Fragen

F1. Sollte ich die for…in-Anweisung vermeiden?

• A: Sie ist geeignet, um Objekteigenschaften aufzulisten, aber für Arrays oder leistungskritische Aufgaben sind for…of oder Object.keys() sicherer und effizienter.

F2. Werden Prototypeneigenschaften immer aufgezählt?

• A: Ja. Laut Spezifikation werden geerbte Prototypeneigenschaften ebenfalls einbezogen. Verwenden Sie hasOwnProperty(), um dieses Problem zu vermeiden.

F3. Was ist die beste Schleife für Arrays vs. Objekte?

• Objekte: Verwenden Sie for…in oder Object.keys().
• Arrays: Verwenden Sie for…of oder forEach().

3. Nächste Schritte｜Was Sie als Nächstes lernen sollten

1. Iterierbare und iterierbare Objekte:

• Datenstrukturen wie Map, Set, WeakMap, WeakSet und die zugehörigen Schleifen.

1. Higher-Order-Funktionen für die Datenverarbeitung:

• Praktische Anwendung von map(), filter(), reduce().

1. Fortgeschrittene Objekt- und Array-Techniken:

• Verwendung von Object.values() und Object.entries() für effiziente Datenverarbeitung.

1. Moderne JavaScript-Features:

• ES6+-Features wie der Spread-Operator und Destructuring für saubereren Code.

1. Asynchrone Programmierung mit Promise/Async/Await:

• Anwenden von Schleifen in Echtzeitverarbeitung wie Datenabruf und dynamischer Objektbehandlung.

4. Abschließende Gedanken｜Beherrschung von JavaScript-Schleifen

In diesem Artikel haben wir uns auf die JavaScript for…in-Anweisung konzentriert und deren grundlegende Verwendung, fortgeschrittene Anwendungen, Fallstricke und Alternativen behandelt.

Wichtigste Punkte:

• for…in ist ideal zum Auflisten von Objekteigenschaften, aber für Arrays oder leistungskritische Aufgaben sollten andere Ansätze verwendet werden.
• Befolgen Sie stets bewährte Praktiken und Sicherheitsmaßnahmen, um Fehler und unerwartetes Verhalten in Ihrem Code zu vermeiden.

Nächster Schritt!

Vertiefen Sie Ihr Verständnis alternativer Methoden und Higher-Order-Funktionen, um Ihre JavaScript-Kenntnisse auf das nächste Level zu heben.