javascript - 对象和 console.log 的奇怪行为

Question

这个问题已经有答案了:

console.log of element.children shows 0 length but has three entries when expanded later [duplicate] (1 个回答)

Is Chrome’s JavaScript console lazy about evaluating objects? (7 个回答)

console.log() async or sync? (3 个回答)

console.log() shows the changed value of a variable before the value actually changes (7 个回答)

已关闭 3 年前。

这段代码:

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

在 Chrome 中产生以下输出:

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]

fiddle :http://jsfiddle.net/2kpnV/

这是为什么？

Answer 1

通过console.log检查对象以异步方式发生。控制台同步接收对象的引用，但在对象展开之前不会显示对象的属性(在某些情况下，取决于浏览器以及日志发生时是否打开了开发工具)。如果在控制台中检查对象之前已对其进行了修改，则显示的数据将具有更新的值。

例如，Chrome 会在一个框中显示一个小 i，当鼠标悬停在该框中时，会显示:

Object value at left was snapshotted when logged, value below was evaluated just now.

让您知道您在看什么。

在这些情况下记录的一个技巧是记录各个值:

console.log(obj.foo, obj.bar, obj.baz);

或者对对象引用进行 JSON 编码:

console.log(JSON.stringify(obj));