Warum zeigt „console.log' nach der Änderung in JavaScript veraltete Objektinformationen an?

Enthüllung der Geheimnisse von console.log und Objektmanipulation

Bei der Arbeit mit Arrays und Objekten in JavaScript kann das Verhalten von console.log manchmal rätselhaft sein. Betrachten Sie den folgenden Code:

foo = [{id: 1},{id: 2},{id: 3},{id: 4}, {id: 5}, ];
console.log('foo1', foo, foo.length);
foo.splice(2, 1);
console.log('foo2', foo, foo.length);

In Browsern wie Chrome erzeugt dieser Code die folgende rätselhafte Ausgabe:

foo1 [Object, Object, Object, Object, Object]  5
foo2 [Object, Object, Object, Object]  4

Warum zeigt foo2 die aktualisierte Array-Länge (4) an, wird aber weiterhin angezeigt? fünf Objekte?

Objekte in Console.log untersuchen

Der Grund liegt wie console.log mit Objekten umgeht. Bei der Protokollierung eines Objekts erhält die Konsole synchron eine Referenz darauf. Die tatsächliche Anzeige der Objekteigenschaften erfolgt jedoch asynchron, oft nachdem das Objekt geändert wurde.

Aus diesem Grund werden beim Erweitern des protokollierten Objekts in der Konsole möglicherweise veraltete Informationen angezeigt. Um diese Verwirrung zu vermeiden, zeigt die Konsole ein kleines „i“ in einem Feld an, das darauf hinweist, dass der angezeigte Wert zum Zeitpunkt der Protokollierung als Snapshot erstellt wurde, auch wenn sich das Objekt seitdem möglicherweise geändert hat.

Protokollierungsstrategien

Um dieses Problem zu umgehen, sollten Sie eine der folgenden Techniken verwenden:

• Einzelne Objektwerte protokollieren: console.log(obj.foo, obj.bar, obj.baz);
• JSON kodiert das Objekt als String: console.log(JSON.stringify(obj));
• Re -Codieren Sie das Objekt mit JSON, um die Prüfbarkeit zu gewährleisten: console.log(JSON.parse(JSON.stringify(obj)));

Beachten Sie, dass JSON seine Einschränkungen hat, da es nicht serialisierbare Eigenschaften entfernt und bei Zirkelverweisen fehlschlägt. Erwägen Sie für komplexere Szenarien die Verwendung benutzerdefinierter Deep-Copy-Mechanismen.

Das obige ist der detaillierte Inhalt vonWarum zeigt „console.log' nach der Änderung in JavaScript veraltete Objektinformationen an?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!