Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung

Detaillierte Erläuterung der Reihenfolge der JS-Objektdurchquerung

Einige von Ihnen haben vielleicht gehört, dass die Reihenfolge der Objektdurchlauf in JavaScript nicht festgelegt ist. Tatsächlich ist diese Aussage nicht besonders zutreffend.

Das Objekt verfügt über einen eigenen Satz von Regeln für die Durchlaufreihenfolge. Nach diesen Regeln wird die Durchlaufreihenfolge des Objekts durch die Reihenfolge beeinflusst, in der die Elemente eingefügt werden, jedoch nicht vollständig durch die Reihenfolge, in der die Elemente eingefügt werden. Wenn Sie ein Szenario haben, in dem Sie die Elemente in der Reihenfolge durchlaufen müssen, in der sie eingefügt werden, sollten Sie die Verwendung von Map in Erwägung ziehen.
Es gibt viele Möglichkeiten, Objekte zu durchlaufen. Wir verwenden häufig for...in. Darüber hinaus gibt es:

  • Objekt.Schlüssel
  • Objekt.Einträge
  • Object.getOwnerProPertyNames
  • Reflect.ownKeys
  • ......

Die oben aufgeführten Methoden folgen alle denselben Regeln zum Durchlaufen von Objekten. Die tatsächlichen Durchquerungsregeln variieren je nach Schlüsselwerttyp.
In einem Objekt ist unser Schlüsselwert eine Zeichenfolge im Format einer positiven Ganzzahl wie „1“ oder „200“. Die Durchlaufreihenfolge richtet sich nach der Größe des Schlüsselwerts.
Schauen wir uns beispielsweise Folgendes an:

const obj = {}

Objekt['10'] = 'ein';
obj['9'] = 'b';
obj[8] = 'c';
Objekt[7] = "d";

konsole.log(Objekt.keys(obj)) // ["7", "8", "9", "10"]

Unsere endgültige Durchlaufreihenfolge ignoriert die Einfügereihenfolge vollständig. Es ist erwähnenswert, dass im Objekt das Endergebnis implizit in eine Zeichenfolge konvertiert wird, selbst wenn der Indexwert beim Hinzufügen des Attributs vom Typ „Zahl“ ist.

Als Objektart entsprechen Arrays ebenfalls den oben genannten Regeln. Oder vielleicht ist das obige Verhalten auf die Kompatibilität mit Arrays zurückzuführen. Darüber hinaus können wir durch die obigen Regeln auch schließen, dass die Durchquerung arrayähnlicher Objekte (Schlüsselwerte sind positive Ganzzahlen und haben Längenattribute) ebenfalls in Indexreihenfolge erfolgt.
Wenn unser Schlüsselwert außerdem eine Zeichenfolge ist, die nicht in eine positive Ganzzahl konvertiert werden kann, umfasst dies Zeichenfolgen, die in negative Zahlen (wie „-1“), Dezimalzeichenfolgen (wie „1,0“) und andere Zeichenfolgen konvertiert werden können. Ihre Durchlaufreihenfolge ist intuitiver, d. h. die Reihenfolge, in der die Objekte eingefügt werden:

const obj2 = {}

obj2['1.1'] = 'ein';
obj2['1.0'] = 'b';
obj2['-1'] = 'c';
obj2['Buchse'] = 'd'

Konsole.log(Objekt.Schlüssel(Obj2)); // ["1.1", "1.0", "-1", "Buchse"]

Tatsächlich kann der Typ des Indexwerts des Objekts nicht nur eine Zeichenfolge, sondern auch ein Symboltyp sein. Beim Symboltyp basiert die Durchlaufreihenfolge einfach auf der Reihenfolge, in der die Objekte eingefügt werden.

Wenn unser Objekt alle oben genannten Situationen kombiniert, das heißt, alle Typen (verschiedene Formen von Zeichenfolgen, Symboltypen) im Indexwert eines Objekts erscheinen, wird es:

  • Zuerst durchlaufen wir den positiven ganzzahligen Teil gemäß den oben genannten Regeln für positive ganzzahlige Zahlen.
  • Durchlaufen Sie die verbleibenden Zeichenfolgen in der Reihenfolge, in der sie als nächstes eingefügt werden
  • Schließlich durchlaufen Sie den Symboltyp in der Reihenfolge der Einfügung

Ich glaube, dass mittlerweile jeder die Durchlaufreihenfolge von Objekten vollständig verstanden hat. Schließlich gibt es noch einen Punkt, der Ihre Aufmerksamkeit verdient, nämlich die Durchlaufreihenfolge von for...in.

Am Anfang gab es keinen einheitlichen Standard für die Durchlaufreihenfolge von for...in, und die Browserhersteller legten die Durchlaufreihenfolge von for...in nach ihren Wünschen fest. Wenn Sie Anforderungen an die Durchlaufreihenfolge haben und Kompatibilität mit älteren Browserversionen wünschen, wird empfohlen, diese nicht zu verwenden. Später wurde dieses Phänomen durch einen Vorschlag in ES 2019 standardisiert, und nun folgt auch die Reihenfolge von for…in den oben genannten Regeln.

Obwohl es den oben genannten Regeln folgt, iteriert for...in auch über die Eigenschaften des Prototyps. Daher besteht die Regel für die variablen Elemente von for...in darin, zuerst das variable Objekt selbst gemäß der oben genannten Objektdurchquerungsregel zu durchlaufen und dann den Prototyp des Objekts gemäß dieser Regel zu durchlaufen und so weiter, bis die Durchquerung die Spitze erreicht.

Außer der letzten Anmerkung zu for...in gibt es nichts weiter. Tatsächlich gibt es nicht viel Inhalt.

Dies ist das Ende dieses Artikels mit der detaillierten Erklärung der Reihenfolge der JS-Objektdurchquerung. Weitere relevante Inhalte zur Reihenfolge der JS-Objektdurchquerung finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen!

Das könnte Sie auch interessieren:
  • js-Objekt, um einen Daten-Paging-Effekt zu erzielen
  • Beispiele und Vergleich von 3 Methoden zur Deduplizierung von JS-Objekt-Arrays
  • Wann sollte man Map anstelle einfacher JS-Objekte verwenden?
  • Kopieren von JS-Objekten (Deep Copy und Shallow Copy)
  • Beispielcode zum Konvertieren von Camel Case in Unterstreichung im Attributnamen eines JS-Objekts
  • Detailliertes Beispiel der Lesegeschwindigkeit von JS-Objekten

<<:  Schritte zur Installation von MySQL 5.7 im Binärmodus und zur Optimierung des Systems unter Linux

>>:  So installieren und konfigurieren Sie den SSH-Dienst in Ubuntu 18.04

Artikel empfehlen

Anfänger lernen einige HTML-Tags (1)

Anfänger können HTML lernen, indem sie einige HTM...

Installieren Sie MySQL offline mit RPM unter CentOS 6.4

Verwenden Sie das RPM-Installationspaket, um MySQ...

Detaillierte Erläuterung der Winkel-Zweiwegebindung

Inhaltsverzeichnis Bidirektionales Bindungsprinzi...

Lösung für das MySQL Master-Slave-Verzögerungsproblem

Heute werden wir uns ansehen, warum es zu Master-...

Detaillierte Schritte zur Verwendung von AES.js in Vue

Verwendung der AES-Verschlüsselung Verschlüsselun...

Sequentielles und zufälliges Schreiben auf Linux-Festplatten

1. Einleitung ● Zufälliges Schreiben führt dazu, ...

Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.17 winx64

Ich habe die vorherigen Hinweise zur Installation...

Verwenden von jQuery zum Implementieren des Karusselleffekts

Was ich Ihnen heute zeige, ist die Verwendung von...