提问人：dan-klasson 提问时间：5/2/2014 最后编辑：Jack Bashforddan-klasson 更新时间：3/28/2023 访问量：79304
对象和控制台 .log [duplicate] 的奇怪行为
Weird behavior with objects & console.log [duplicate]
问：
此代码：
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]
小提琴：http://jsfiddle.net/2kpnV/
为什么？
答：
190赞
zzzzBov
5/2/2014
#1
检查对象的方式是以异步方式进行的。控制台会同步接收对对象的引用，但在展开对象之前不会显示对象的属性（在某些情况下，取决于浏览器以及日志发生时是否打开了开发工具）。如果在控制台中检查对象之前已对其进行修改，则显示的数据将具有更新的值。console.log
例如，Chrome 会在框中显示一点内容，当鼠标悬停时，会显示：i
左边的对象值在记录时是快照的，下面的值是刚才评估的。
让您知道您在看什么。
在这些情况下，记录的一个技巧是记录各个值：
console.log(obj.foo, obj.bar, obj.baz);
或 JSON 对对象引用进行编码：
console.log(JSON.stringify(obj));
评论
25赞
Yasin Okumuş
4/7/2017
如另一个答案所述，将日志视为 json 对象而不是字符串可能会更好JSON.parse(JSON.stringify(obj))
4赞
cimak
7/21/2017
或者： console.log（ Object.assign（{}， obj） ）;- 这将创建一个新的 object 副本。
12赞
ESR
5/31/2018
Chrome 这样做而不是在日志记录时显示值的原因是什么？那不是更有用吗？
3赞
Peter
10/3/2018
@cimak，出于某种原因，我仍然得到一个对象，该对象在使用 .using 确实在输出时显示值。console.log(Object.assign({}, obj))console.log( JSON.parse(JSON.stringify(obj)) )
4赞
cimak
10/4/2018
@Peter - 我错了一部分，仅适用于仅包含原始值的对象（因为进行浅复制，而不是深复制）。如果包含另一个对象，则该嵌套对象的值将被单独“计算”。Object.assignObject.assignobj
1赞
Latpaw
11/7/2016
#2
重新定义将解决问题。console.log
var originalLog = console.log;
console.log = function(obj) {
originalLog(JSON.parse(JSON.stringify(obj)));
};
评论
15赞
Avael Kross
9/4/2017
它不是那么有用，因为在控制台中，它将显示定义此函数的行数，而不是我调用控制台.log的实际行
评论