Javascript 对物体的怪异行为&;console.log
此代码:Javascript 对物体的怪异行为&;console.log,javascript,google-chrome,object,Javascript,Google Chrome,Object,此代码: 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
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]
小提琴:
这是为什么?通过
控制台检查对象。log
以异步方式进行。控制台同步接收对对象的引用,但在对象展开之前不会显示对象的属性(在某些情况下,取决于浏览器以及日志发生时是否打开了开发工具)。如果在控制台中检查对象之前对其进行了修改,则显示的数据将具有更新的值
例如,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)));
};
正如另一个答案中所述,
JSON.parse(JSON.stringify(obj))
将日志视为JSON对象而不是stringor:console.log(object.assign({},obj));-这将创建对象的新副本。Chrome这样做而不是像记录时那样显示值的原因是什么?这不是更有用吗?@cimak,出于某种原因,当使用console.log(object.assign({},obj))
时,我仍然得到一个显示其属性最后值的对象。使用console.log(JSON.parse(JSON.stringify(obj))
确实显示了输出时的值。@Peter-i有一部分错误,Object.assign
只对包含原语值的对象有效(因为Object.assign
进行浅拷贝,而不是深度拷贝)。如果obj
包含另一个对象,则该嵌套对象的值将被“计算”单独使用。它不太有用,因为在控制台中,它将显示定义此函数的行数,而不是我调用控制台的实际行数。logSee@Bergi您是否强烈反对将链接问题切换为此问题的副本,而不是相反?我认为这里的首要答案显然更好。(简洁,推荐的方法将正确记录深层对象结构。)回答每个问题的投票,每个访问者似乎也同意。如果可以的话,我很乐意在Meta上进行更长时间的讨论,并听取其他人的意见needed@CertainPerformance当前的canonical版本更老,标题更好,问题文本更好(带有简单的示例和屏幕截图)。我同意这里接受的答案给出了更好的解释和解决方案(尽管不是这些问题所涉及的数组的解决方案)。合并这些问题你会有什么感觉?@Bergi不,不要合并。这个问题的标题并不好,但正是这个标题让用户想到了这个问题。与另一个重复问题的链接很好。