Javascript 对物体的怪异行为&；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]

小提琴：

---

这是为什么？

通过

控制台检查对象。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不，不要合并。这个问题的标题并不好，但正是这个标题让用户想到了这个问题。与另一个重复问题的链接很好。