`console.log`顯示修改後對象值異常的原因

首頁 > 程式設計 > `console.log`顯示修改後對象值異常的原因

`console.log`顯示修改後對象值異常的原因

發佈於2025-06-14

Why Does `console.log` Show Unexpected Object Values After Modification? foo = [{id：1}，{id：2}，{id：3}，{id：4}，{id：id：5}，]，]; console.log（'foo1'，foo，foo.length）; foo.splice（2，1）; console.log('foo2', foo, foo.length);

In Chrome, this produces the unexpected output:foo1 [對象，對象，對象，對象，對象] 5 0：對象 1：對象 2：對象 3：對象長度：4 __proto__：數組[0] 5（索引）：23 foo2 [對象，對象，對象，對象] 4 0：對象 1：對象 2：對象 3：對象長度：4 __proto__：array [0]

理解此行為的關鍵在於通過console.log的對象檢查的異步性質。儘管控制台同步接收對對象的引用，但直到您手動將其展開後才顯示其屬性。

在修改後展開對像後，您會看到更新值，而不是原始狀態。 This occurs asynchronously, leading to the seemingly illogical output.

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);

Debugging Techniques

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);

To avoid this inconsistency, consider these debugging techniques:

Log individual values:

Log the object's properties separately (e.g., console.log(obj.foo, obj.bar, obj.baz);)

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 JSON編碼（例如Console.Log（JSON.PARSE（JSON.STRINGIFY（obj））））;）