Chrome 展开时显示不同的对象内容

Question

为什么 Chrome 显示两个不同的数据集取决于您是否展开了对象视图？

在收缩视图中，我的对象有两个属性：

在展开视图中，我的对象具有三个属性：

Answer 1

您在控制台中看到的对象是该对象在特定时间点（您记录它的时间）的快照。当您展开对象时，它会再次计算属性。

在下面的示例中，我创建了一个具有两个数组属性的对象。我在控制台记录了它，然后我向它添加了第三个属性、c。

只有前两个属性仍然显示，即使我刚刚添加了第三个属性。在控制台中展开对象后，我可以看到第三个。它是对象的最新状态。

如果您将鼠标悬停在小蓝色 i 图标上，它会解释它所做的事情：

Value below was evaluated just now.

Answer 2

@Gideon Pyzer 是对的。属性是在控制台中展开对象后计算和添加的。

只需在调试代码上方添加一行代码，然后重新打开 chrome 开发工具，您就会看到不同之处。

obj = Object.freeze(obj);  //add this line before your console.log
console.log(obj);

之前:

之后：

我的一个类似问题： Why can't I access the attr of the javascript object shown in chrome dev tool

Answer 3

您可以克隆您的对象以防止re-evaluate。

console.log(Object.assign({}, obj));

Answer 4

您可以使用此模块获得真实的硬拷贝对象。它会在您调用它时为您提供对象的快照。

const nestedHardCopy = require('nest-object-deep-copy');

console.log(nestedHardCopy(obj));

Chrome displays different object contents on expand