`console.log`显示修改后对象值异常的原因

首页 > 编程 > `console.log`显示修改后对象值异常的原因

`console.log`显示修改后对象值异常的原因

发布于2025-04-15

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