对象和 console.log 的奇怪行为 [重复]

Posted 2023-02-14

【中文标题】对象和 console.log 的奇怪行为 [重复]

【英文标题】：Weird behavior with objects & console.log [duplicate]

【发布时间】：2022-01-13 20:31:58

【问题描述】：

这段代码：

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/

这是为什么呢？

【问题讨论】：

另见console.log() async or sync?

@Bergi 您是否强烈反对将链接的问题切换为该问题的副本，而不是相反？我认为这里的最佳答案明显更好。 （简洁，推荐正确记录深层对象结构的方法。）每个问题投票和每个访问者的回答投票似乎也同意。如果需要，我很乐意在 Meta 上进行更长时间的讨论和其他人的意见

@CertainPerformance 当前的规范更老，有更好的标题和更好的问题文本（带有简单的示例，包括屏幕截图）。我同意这里接受的答案给出了更好的解释和解决方案（尽管不是这些问题所涉及的数组的解决方案）。您对合并这些问题有何感想？

@Bergi 不，不要合并它。问题的标题不是很好，但正是标题将用户带到了这个问题。另一个重复问题的链接很好。

【参考方案1】：

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

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

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

让你知道你在看什么。

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

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

或 JSON 编码对象引用：

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

【讨论】：

如另一个答案所述，JSON.parse(JSON.stringify(obj)) 将日志视为 json 对象而不是字符串可能会更好

或：console.log(Object.assign(, obj)); - 这将创建一个新的对象副本。

Chrome 这样做的原因是什么，而不是显示记录时的值？那不是更有用吗？

@cimak，由于某种原因，当使用console.log(Object.assign(, obj)) 时，我仍然得到一个显示其属性最后值的对象。使用console.log( JSON.parse(JSON.stringify(obj)) ) 确实会显示输出时的值。

@Peter - 我错了，Object.assign 仅适用于仅包含原始值的对象（因为Object.assign 进行浅拷贝，而不是深拷贝）。如果obj 包含另一个对象，则该嵌套对象的值将被单独“评估”。

【参考方案2】：

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

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

【讨论】：

它不是那么有用，因为在控制台中它将显示定义此函数的行数，而不是我调用 console.log 的实际行