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

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

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

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

---

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

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

c

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

如果将鼠标悬停在蓝色的

i

小图标上，它会解释它所做的工作：

刚才评估了下面的值

---

@吉迪恩·皮泽是对的。在控制台中展开对象后，计算并添加属性

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

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

之前：

之后：

我的一个类似问题是：

---

您可以克隆对象以防止重新计算

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

---

您可以使用此模块获得真正的硬拷贝对象。当您调用它时，它将为您提供对象的快照

---

此代码的可能副本将只在node.js中工作，而node.js不会重新评估对象，因此我不确定这是否有任何用处。OP特别询问了browsersIt是否适用于浏览器。您可以使用webpack将其导入最终的捆绑包js，并将其加载到浏览器中

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

console.log(nestedHardCopy(obj));