同一次console.log打印中对象值变动的原因及解决方法

问题原因 #

浏览器控制台的console.log打印引用类型（对象、数组等）时，默认保存的是该对象的内存引用，而非打印执行时刻的对象快照。控制台仅会先展示对象的折叠预览内容，等你手动点击展开对象层级时，才会读取对象当前最新的属性值，因此如果对象在打印完成后被后续代码修改，展开后看到的就是修改后的值，和打印执行时刻的实际值不符。

解决方案 #

下面是几种常用的固定打印时刻值的方案，按需选择即可：

• 方案1：JSON序列化快照（适配绝大多数普通对象）
  利用JSON.stringify将对象序列化为打印时刻的字符串快照，或者反序列化为新对象后打印，避免引用关联。注意该方案不支持包含循环引用、函数、Symbol、undefined、BigInt等特殊类型的对象。
  示例代码：

  // 直接打印格式化后的JSON字符串，可直接看到完整内容
  console.log(JSON.stringify(yourObject, null, 2))
  // 反序列化为新对象打印，展开后也是快照值
  console.log(JSON.parse(JSON.stringify(yourObject)))
  

• 方案2：结构化克隆快照（支持更多复杂类型）
  用浏览器原生的structuredClone方法对对象做深拷贝，支持Date、正则、二进制数据、数组等JSON序列化不支持的类型，比方案1适用范围更广，同样不支持循环引用、函数等特殊类型。
  示例代码：

  console.log(structuredClone(yourObject))
  

• 方案3：断点调试（最准确的取值方式）
  直接在打印语句所在行添加断点，代码执行到断点处会暂停，此时在调试面板查看的变量值就是执行到该位置的实时准确值，完全不会受到后续代码修改的影响。
• 方案4：自定义递归打印（适配包含特殊类型的对象）
  如果你的对象包含函数、Symbol等特殊类型，可以自己写递归遍历函数，逐层打印对象的所有属性原始值，直接输出固定的文本内容，不会发生后续变更。

内容的提问来源于stack exchange，提问作者cfoxy17