Object & console. log 的奇怪行为

这个代码:

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/

为什么？

73191 次浏览
小开
最佳答案

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

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

左边的对象值在记录时被快照，下面的值刚刚被计算。

让你知道你在看什么。

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

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

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

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

重新定义 console.log将解决这个问题。

var originalLog = console.log;
console.log = function(obj) {
originalLog(JSON.parse(JSON.stringify(obj)));
};

提交答案