objets et console.log: une bizarrerie démêlée

lorsque vous travaillez avec des objets et console.log, vous pouvez rencontrer un comportement particulier. Démêlons ce mystère en analysant cet extrait de 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);

dans Chrome, cela produit la sortie inattendue:

foo1 
[Object, Object, Object, Object, Object]  5
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]
     5 (index):23
foo2 
[Object, Object, Object, Object]  4
    0: Object
    1: Object
    2: Object
    3: Object
    length: 4
    __proto__: Array[0]

l'examen asynchrone

La clé pour comprendre ce comportement réside dans la nature asynchrone de l'examen d'objet via console.log. Bien que la console reçoive une référence à l'objet de manière synchrone, elle n'affiche pas ses propriétés jusqu'à ce que vous l'agissiez manuellement. Cela se produit de manière asynchrone, conduisant à la sortie apparemment illogique.

Techniques de débogage

pour éviter cette incohérence, considérez ces techniques de débogage:

log individuals:

JSON encode:
• Transform the object into a string using JSON.stringify(obj)
Intelligent deep copy:
• Use a tailored deep copy function to preserve non-serializable properties and circular references when Encodage JSON (par exemple, console.log (json.parse (json.stringify (obj)));)