for…in schleife

Die for…in loop-Anweisung kann verwendet werden, um über alle nicht-Symbol, aufzählbaren Eigenschaften eines Objekts zu iterieren.

Objekt.keys

Die Object.keys() Methode gibt ein Array von Objektschlüsseln zurück. Dadurch wird ein Array erstellt, das die Eigenschaften des Objekts enthält. Sie können dann das Array durchlaufen, um die benötigten Schlüssel und Werte abzurufen.

Objekt.values

Die Object.values() Methode gibt ein Array von Objektwerten zurück. Dadurch wird ein Array erstellt, das die Eigenschaften des Objekts enthält. Sie können dann das Array durchlaufen, um die benötigten Werte abzurufen.

Objekt.getOwnPropertyNames

Die Object.getOwnPropertyNames() -Methode gibt ein Array aller Eigenschaften (einschließlich nicht aufzählbarer Eigenschaften mit Ausnahme derjenigen, die Symbol verwenden) zurück, die direkt in einem bestimmten Objekt gefunden wurden. Dadurch wird ein Array erstellt, das die Eigenschaften des Objekts enthält. Sie können dann das Array durchlaufen, um die benötigten Schlüssel und Werte abzurufen.

Objekt.einträge

Die Object.entries() Methode gibt ein Array der eigenen aufzählbaren Eigenschaft eines gegebenen Objekts zurück Paare.

Leistungsvergleich

Testen wir nun alle diese Techniken und vergleichen sie anhand ihrer Geschwindigkeit und Leistung, um festzustellen, welche schneller ist.

Die meisten Browser wie Chrome und Firefox implementieren hochauflösendes Timing in performance.now(). Die performance.now() Methode gibt ein DOMHighResTimeStamp zurück, gemessen in Millisekunden.

Verwendung

let start = performance.now();// code to be timed...let duration = performance.now() - start;

Beginnen wir mit dem Testen…

Testergebnisse

Nach unseren Tests sind hier die Ergebnisse in aufsteigender Reihenfolge;

╔═══════════╦════════════════════════════╦═════════════════════════╗
║ Rank ║ Technique ║ Time(ms) ║
╠═══════════╬════════════════════════════╬═════════════════════════╣
║ 1 ║ for...in loop ║ 0.8450000023003668 ms ║
║ 2 ║ Object.keys ║ 1.32499999017 ms ║
║ 3 ║ Object.entries ║ 1.63499999326 ms ║
║ 4 ║ Object.values ║ 2.05499998992 ms ║
║ 5 ║ Object.getOwnPropertyNames ║ 2.12500002817 ms ║
╚═══════════╩════════════════════════════╩═════════════════════════╝

Nach diesen Ergebnissen ist der schnellste Weg, JavaScript-Objekte zu durchlaufen, der for…in schleife. Dies bedeutet nicht, dass die anderen Methoden ungültig oder nutzlos sind, alles hängt von den Anwendungsfällen ab.

Das Problem mit einer for...in Schleife besteht darin, dass sie Eigenschaften in der Prototypkette durchläuft. Es iteriert über Objekteigenschaften. Javascript-Arrays sind nur eine bestimmte Art von Objekt mit einigen praktischen Eigenschaften, die Ihnen helfen, sie als Arrays zu behandeln, aber sie haben immer noch interne Objekteigenschaften und Sie wollen nicht über diese iterieren. for...initeriert auch über alle aufzählbaren Eigenschaften und nicht nur über die Elemente des Arrays. Dies kann auch zu unerwarteten Ergebnissen führen.

Wenn Sie ein Objekt mit der for...in Schleife durchlaufen, müssen Sie überprüfen, ob die Eigenschaft zum Objekt gehört. Sie können dies mit hasOwnProperty .

Eine bessere und effizientere Möglichkeit, Objekte in ES6 zu durchlaufen, besteht darin, das Objekt zuerst mit Object.keys()Object.values()Object.getOwnPropertyNames oder Object.entries() in ein Array zu konvertieren . Dann durchlaufen Sie das Array, um die Schlüssel und Werte abzurufen.