Heim > Web-Frontend > js-Tutorial > Objektiteration in JavaScript verstehen: „for...of' vs. „for...in'.

Objektiteration in JavaScript verstehen: „for...of' vs. „for...in'.

Patricia Arquette
Freigeben: 2024-09-26 15:24:02
Original
399 Leute haben es durchsucht

Understanding Object Iteration in JavaScript: `for...of` vs `for...in`

Das Durchlaufen von Objekten ist eine häufige Aufgabe in JavaScript, aber wenn Sie für jede Situation die richtige Technik kennen, können Sie Ihren Code sauberer und effizienter machen. Dieser Artikel erklärt, warum Sie for...of nicht direkt mit Objekten verwenden können, bietet alternative Ansätze und stellt Best Practices für die Iteration über Objekte bereit.

Inhaltsverzeichnis

  1. Einführung in die Iteration in JavaScript
  2. Warum für...von nicht mit Objekten funktioniert
  3. Techniken zum Iterieren über Objekte
    • Verwenden für...in
    • Verwenden von Object.keys()
    • Verwenden von Object.values()
    • Verwenden von Object.entries()
  4. Vergleich der Objektiterationstechniken
  5. Vergleich zwischen for...in und for...of
  6. Fortgeschrittenes Beispiel: Iterieren über verschachtelte Objekte
  7. Best Practices für die Objektiteration in JavaScript

1. Einführung in die Iteration in JavaScript

In JavaScript ist die Iteration über Datenstrukturen ein wesentlicher Bestandteil der Verarbeitung komplexer Datensätze. Während Arrays und Strings iterierbare Objekte sind, erfordern einfache Objekte (Schlüssel-Wert-Paare) unterschiedliche Methoden zur Iteration. Wenn Entwickler versuchen, for...of für Objekte zu verwenden, stoßen sie häufig auf Probleme.


2. Warum funktioniert for...of nicht mit Objekten?

Die for...of-Schleife wird verwendet, um über iterierbare Objekte wie Arrays, Strings, Maps und Sets zu iterieren. Einfache JavaScript-Objekte sind jedoch standardmäßig nicht iterierbar.

Beispiel: Versuchen mit einem Objekt

const user = { name: 'John', age: 30 };

for (const value of user) {
  console.log(value);
}
// TypeError: user is not iterable
Nach dem Login kopieren

Der Versuch, for...of für ein einfaches Objekt zu verwenden, löst einen TypeError aus. Dies liegt daran, dass Objekte in JavaScript keine [Symbol.iterator]-Methode haben, die für die for...of-Schleife erforderlich ist.


3. Techniken zum Iterieren über Objekte

Um über Objekte in JavaScript zu iterieren, stehen mehrere Techniken zur Verfügung:

3.1 Verwendung von for...in

Die for...in-Schleife durchläuft die aufzählbaren Eigenschaften eines Objekts. Es durchläuft die Schlüssel des Objekts.

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30
Nach dem Login kopieren
  • Vorteile: Einfach und direkt.
  • Nachteile: Iteriert über geerbte Eigenschaften, wenn diese aufzählbar sind, was zu unerwartetem Verhalten führen kann.

3.2 Verwendung von Object.keys()

Object.keys() gibt ein Array der eigenen Eigenschaftsschlüssel des Objekts zurück, so dass Sie mit for...of darüber iterieren können.

const user = { name: 'John', age: 30 };

for (const key of Object.keys(user)) {
  console.log(key, user[key]);
}
// Output: 
// name John
// age 30
Nach dem Login kopieren
  • Vorteile: Iteriert nur über die eigenen Eigenschaften des Objekts.
  • Nachteile: Ruft nur die Schlüssel ab, nicht die Werte.

3.3 Verwendung von Object.values()

Object.values() gibt ein Array der Eigenschaftswerte des Objekts zurück, das dann mit for...of.
iteriert werden kann

const user = { name: 'John', age: 30 };

for (const value of Object.values(user)) {
  console.log(value);
}
// Output: 
// John
// 30
Nach dem Login kopieren
  • Vorteile: Direkter Zugriff auf Werte, ohne sich mit Schlüsseln auseinandersetzen zu müssen.
  • Nachteile: Auf die Schlüssel kann nicht direkt zugegriffen werden.

3.4 Verwendung von Object.entries()

Object.entries() gibt ein Array der Schlüssel-Wert-Paare des Objekts zurück, was es perfekt für die Iteration über Schlüssel und Werte macht.

const user = { name: 'John', age: 30 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// Output: 
// name John
// age 30
Nach dem Login kopieren
  • Vorteile: Einfacher Zugriff auf Schlüssel und Werte in einer Iteration.
  • Nachteile: Etwas komplexere Syntax.

4. Vergleich der Objektiterationstechniken

Technique Access to Keys Access to Values Inherited Properties Simplicity
for...in Yes Yes Yes (if enumerable) Simple
Object.keys() for...of Yes No No Moderate
Object.values() for...of No Yes No Moderate
Object.entries() for...of Yes Yes No Slightly complex
Technik Zugriff auf Schlüssel Zugang zu Werten Geerbte Eigenschaften Einfachheit für...in Ja Ja Ja (falls aufzählbar) Einfach Object.keys() für...von Ja Nein Nein Mäßig Object.values() für...von Nein Ja Nein Mäßig Object.entries() für...von Ja Ja Nein Etwas komplex

5. Comparison Between for...in and for...of

5.1 for...in Loop

The for...in loop is used to iterate over the enumerable properties (keys) of an object, including properties that may be inherited through the prototype chain.

Example: for...in with an Object

const user = { name: 'John', age: 30 };

for (const key in user) {
  console.log(key, user[key]);
}
// Output:
// name John
// age 30
Nach dem Login kopieren
  • Explanation: The for...in loop iterates over the keys (name and age) and allows you to access the corresponding values (John and 30).

Example: for...in with an Array (Not Recommended)

const colors = ['red', 'green', 'blue'];

for (const index in colors) {
  console.log(index, colors[index]);
}
// Output:
// 0 red
// 1 green
// 2 blue
Nach dem Login kopieren
  • Explanation: The for...in loop iterates over the indices (0, 1, 2) of the array, not the values themselves. This behavior is usually less desirable when working with arrays.

5.2 for...of Loop

The for...of loop is used to iterate over iterable objects like arrays, strings, maps, sets, and other iterables. It loops over the values of the iterable.

Example: for...of with an Array

const colors = ['red', 'green', 'blue'];

for (const color of colors) {
  console.log(color);
}
// Output:
// red
// green
// blue
Nach dem Login kopieren
  • Explanation: The for...of loop directly iterates over the values of the array (red, green, blue), which is ideal for array iteration.

Example: for...of with a String

const name = 'John';

for (const char of name) {
  console.log(char);
}
// Output:
// J
// o
// h
// n
Nach dem Login kopieren
  • Explanation: The for...of loop iterates over each character of the string (J, o, h, n), making it useful for string manipulation.

Summary: Key Differences Between for...in and for...of

Feature for...in for...of
Purpose Iterates over object keys (including inherited properties) Iterates over iterable values (arrays, strings, etc.)
Works with Objects Yes No (objects are not iterable)
Works with Arrays Yes, but not ideal (returns indices) Yes, ideal (returns values)
Use Case Best for iterating over object properties Best for arrays, strings, maps, sets, etc.

6. Advanced Example: Iterating Over Nested Objects

Sometimes, objects are nested, and you need to iterate through all levels of the object. Here's an example that uses recursion to handle nested objects.

const user = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York',
    zip: 10001
  }
};

// Recursively iterate through the object
function iterate(obj) {
  for (const [key, value] of Object.entries(obj)) {
    if (typeof value === 'object' && !Array.isArray(value)) {
      console.log(`Entering nested object: ${key}`);
      iterate(value); // Recursively call for nested objects
    } else {
      console.log(key, value); // Output key-value pair
    }
  }
}

iterate(user);
// Output: 
// name John
// age 30
// Entering nested object: address
// city New York
// zip 10001
Nach dem Login kopieren
  • Explanation: The function checks if the value is an object, then recursively iterates through it.

7. Best Practices for Object Iteration in JavaScript

Use the Right Technique for the Right Task

  1. Use for...in cautiously: It may iterate over properties inherited from the prototype chain,

Das obige ist der detaillierte Inhalt vonObjektiteration in JavaScript verstehen: „for...of' vs. „for...in'.. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:dev.to
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage