Durchlaufen von Objekten in JavaScript

Hin und wieder müssen Sie möglicherweise Objekte in JavaScript durchlaufen. Die einzige Möglichkeit, dies vor ES6 zu tun, ist mit a for...in Schleife.

Das Problem mit A for...in Schleife besteht darin, dass sie Eigenschaften in der Prototypkette durchläuft. Wenn Sie ein Objekt mit der Schleife durchlaufen for...in -Schleife müssen Sie überprüfen, ob die Eigenschaft zum Objekt gehört. Sie können dies mit tun hasOwnProperty.

for (var property in object) { 
  if (object.hasOwnProperty(property)) { 
    // Do things here 
  }
}

Darauf müssen wir uns nicht mehr verlassen for...in und hasOwnProperty jetzt. Es gibt einen besseren Weg.

Eine bessere Möglichkeit, Objekte zu durchlaufen

Der bessere Weg, Objekte zu durchlaufen, ist zuerst, um das Objekt in ein Array umzuwandeln. Dann durchlaufen Sie das Array.

Sie können ein Objekt mit drei Methoden in ein Array umwandeln:

  1. Object.keys
  2. Object.values
  3. Object.entries

Objekt.Schlüssel

Object.keys erstellt ein Array, das die Eigenschaften eines Objekts enthält. Hier ist ein Beispiel.

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

Objekt.Werte

Object.values erstellt ein Array, das die Werte aller Eigenschaften in einem Objekt enthält. Hier ist ein Beispiel:

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const values = Object.values(fruits)
console.log(values) // [28, 17, 54]

Objekt.Einträge

Object.entries erstellt ein Array von Arrays. Jedes innere Array hat zwei Elemente. Das erste Element ist die Eigenschaft; Das zweite Element ist der Wert.

Hier ist ein Beispiel:

const fruits = {
  apple: 28,
  orange: 17,
  pear: 54,
}

const entries = Object.entries(fruits)
console.log(entries)
// [
//   [apple, 28],
//   [orange, 17],
//   [pear, 54]
// ]

Mein Favorit der drei ist Object.entries da Sie sowohl den Schlüssel als auch die Eigenschaftswerte erhalten.

Schleife durch das Array

Sobald Sie das Objekt in ein Array mit konvertiert haben Object.keys, Object.valuesoder Object.entrieskönnen Sie es durchlaufen, als wäre es ein normales Array.

// Looping through arrays created from Object.keys
const keys = Object.keys(fruits)
for (const key of keys) {
  console.log(keys)
}

// Results:
// apple
// orange
// pear

Wenn du benutzt Object.entries Sie möchten vielleicht destrukturieren das Array in seinen Schlüssel und seine Eigenschaft.

for (const [fruit, count] of entries) {
  console.log(`There are ${count} ${fruit}s`)
}

// Result
// There are 28 apples
// There are 17 oranges
// There are 54 pears

Einpacken

Der bessere Weg, Objekte zu durchlaufen, besteht darin, sie zuerst mit einer dieser drei Methoden in ein Array zu konvertieren.

  1. Object.keys
  2. Object.values
  3. Object.entries

Dann durchlaufen Sie die Ergebnisse wie ein normales Array.

Wenn Ihnen diese Lektion geholfen hat, vielleicht viel Spaß JavaScript lernen, wo Sie lernen, wie Sie alles, was Sie wollen, von Grund auf neu erstellen können. Die Anmeldung für Learn JavaScript beginnt im Juli 2018 (in zwei Wochen!).

Danke fürs Lesen. Dieser Artikel wurde ursprünglich auf veröffentlicht mein Blog. Melden Sie sich an für mein Newsletter wenn Sie weitere Artikel wünschen, die Ihnen dabei helfen, ein besserer Frontend-Entwickler zu werden.

Similar Posts

Leave a Reply

Your email address will not be published.