Unbekannte Verwendung von Object.entries in JavaScript

Vorwort

Normalerweise verwenden wir häufig statische Methoden für die Object-Klasse, wie z. B. Object.keys, Object.values, Object.assign usw., aber die Object.entries-Methode verwenden wir möglicherweise selten. In diesem Artikel werden zwei Tipps für die Object.entries-Methode erläutert.

Wirkung

Die Methode Object.entries() gibt ein Array von Schlüssel-Wert-Paaren der aufzählbaren Eigenschaften eines bestimmten Objekts zurück, und zwar in derselben Reihenfolge, in der sie von einer for…in-Schleife zurückgegeben würden (der Unterschied besteht darin, dass eine for-in-Schleife auch Eigenschaften in der Prototypkette aufzählt).

Beispiel

const obj = { foo: 'bar', baz: 42 };
console.log(Objekt.Einträge(Objekt)); // [ ['foo', 'bar'], ['baz', 42] ]

// Array-ähnliches Objekt
const obj = { 0: 'a', 1: 'b', 2: 'c' };
console.log(Objekt.Einträge(Objekt)); // [ ['0', 'a'], ['1', 'b'], ['2', 'c'] ]

// Array-ähnliches Objekt mit zufälliger Schlüsselreihenfolge
const anObj = { 100: 'a', 2: 'b', 7: 'c' };
console.log(Objekt.Einträge(einObjekt)); // [ ['2', 'b'], ['7', 'c'], ['100', 'a'] ]

// getFoo ist eine Eigenschaft, die nicht aufzählbar ist
const myObj = Object.create({}, { getFoo: { value() { return this.foo; } } });
myObj.foo = "Leiste";
console.log(Objekt.Einträge(meinObj)); // [ ['foo', 'bar'] ]

// Nicht-Objekt-Argumente werden in ein Objekt umgewandelt
console.log(Objekt.Einträge('foo')); // [ ['0', 'f'], ['1', 'o'], ['2', 'o'] ]

// Schlüssel-Werte elegant durchgehen
const obj = { a: 5, b: 7, c: 9 };
für (const [Schlüssel, Wert] von Object.entries(obj)) {
  console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"
}

// Oder mit Array-Extras
Object.entries(obj).forEach(([Schlüssel, Wert]) => {
console.log(`${key} ${value}`); // "a 5", "b 7", "c 9"

1. Verwenden Sie for...of, um über allgemeine Objekte zu iterieren

Viele Front-End-Anfänger haben möglicherweise den folgenden Code geschrieben:

lass obj = {
  ein: 1,
  b: 2
}

für (let Wert von obj) {
  // ...
}

Aber wenn ich es ausführe, stelle ich fest, dass ein Fehler gemeldet wird:

Nicht abgefangener TypeError: obj ist nicht iterierbar

Daher wird das Durchlaufen gewöhnlicher Objekte zu einer einheitlichen Durchlaufmethode. Da for ... in jedoch nicht nur die Eigenschaften des Objekts selbst durchläuft, sondern auch den Prototyp des Objekts, müssen wir bei der Verwendung auch einen Filter hinzufügen, zum Beispiel:

für (let key in obj) {
  wenn (Object.prototype.hasOwnProperty.call(obj, key)) {
    // ...
  }
}

Sie sehen, das ist nicht sehr elegant. Der Grund, warum gewöhnliche Objekte nicht mit for...of durchlaufen werden können, liegt darin, dass gewöhnliche Objekte die Iteratorschnittstelle nicht implementieren (ich werde einen speziellen Artikel über JS-Iteratoren schreiben). JS-Arrays implementieren die Iteratorschnittstelle, sodass das über Object.entries erhaltene Schlüssel-Wert-Array mit for...of durchlaufen werden kann:

für (let [Schlüssel, Wert] von Object.entries(obj)) {
  // ...
}

Object.entries gibt ein Array von Schlüssel-Wert-Paaren der aufzählbaren Eigenschaften des Objekts zurück, ausgenommen Eigenschaften des Prototyps.

2. Konvertierung zwischen gewöhnlichen Objekten und Map-Objekten

Ich habe gesehen, dass das Projekt gewöhnliche Objekte in Map-Objekte konvertiert und diese weiterhin für ... die Durchquerung verwendet:

lass obj = {
  ein: 1,
  b: 2
}

lass map = neue Map();

für (let key in obj) {
  wenn (Object.prototype.hasOwnProperty.call(obj, key)) {
    map.set(Schlüssel, Objekt[Schlüssel]);
  }
}

Tatsächlich kann der Map-Konstruktor zur Initialisierung ein Array von Schlüssel-Wert-Paaren akzeptieren, was bedeutet, dass Sie Object.entries verwenden können, um gewöhnliche Objekte in Map-Objekte umzuwandeln:

let map = neue Map(Objekt.Einträge(Objekt));

Wie konvertiert man also ein Map-Objekt wieder in ein normales Objekt? Verwenden Sie immer noch Traversal? Nein, Sie können die statische Methode Object.fromEntries zum Konvertieren verwenden:

let obj = Objekt.fromEntries(map);

An diesem Punkt verstehen viele Freunde möglicherweise immer noch nicht die Konvertierungsbeziehung zwischen gewöhnlichen Objekten, Schlüssel-Wert-Paar-Arrays und Map-Objekten. Ich werde es mit einem Bild zusammenfassen:

Object.entries und Object.fromEntries sind zwei entgegengesetzte Operationen

Zusammenfassen

Dies ist das Ende dieses Artikels über die Verwendung von Object.entries in JavaScript, den Sie nicht kennen. Weitere relevante Inhalte zur Verwendung von Object.entries in JavaScript finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!

siehe

• Object.entries() – MDN-Dokumentation
• Map()-Konstruktor – MDN-Dokumentation