JavaScript 控制台日志中对象引用导致的显示异常问题解析-js教程-PHP中文网

JavaScript 控制台日志中对象引用导致的显示异常问题解析

控制台打印对象时显示的是展开时的实时状态，而非日志调用时刻的快照；修改后续对象会动态更新已打印对象的展开视图，造成“预期不符”的错觉。使用 structuredClone() 可获取调用时刻的深拷贝快照。

控制台打印对象时显示的是展开时的实时状态，而非日志调用时刻的快照；修改后续对象会动态更新已打印对象的展开视图，造成“预期不符”的错觉。使用 `structuredclone()` 可获取调用时刻的深拷贝快照。

在 JavaScript 开发中，尤其是实现图（Graph）等动态数据结构时，开发者常依赖 console.log() 调试中间状态。但你可能遇到一种看似“诡异”的现象：两次 console.log(obj) 输出在控制台中看起来内容一致，即使 obj 已被修改——这并非代码逻辑错误，而是浏览器控制台的延迟求值与对象引用机制所致。

例如，在你的 Graph 类中：

class Graph {
  constructor() {
    this.adjacencyList = {};
  }
  addVertex(vertex) {
    if (!this.adjacencyList[vertex]) this.adjacencyList[vertex] = [];
  }
  addEdge(v1, v2) {
    this.adjacencyList[v1].push(v2);
    this.adjacencyList[v2].push(v1);
  }
  removeEdge(v1, v2) {
    this.adjacencyList[v1] = this.adjacencyList[v1].filter(el => el !== v2);
    this.adjacencyList[v2] = this.adjacencyList[v2].filter(el => el !== v1);
  }
}

执行以下调试序列：

Java注释规范Skills

当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。

下载

let graph = new Graph();
graph.addVertex("tokyo");
graph.addVertex("dallas");
graph.addVertex("aspen");
graph.addEdge("tokyo", "dallas");
graph.addEdge("dallas", "aspen");

console.log(graph.adjacencyList); // ? 日志①：期望看到 { tokyo: ["dallas"], dallas: ["tokyo","aspen"], aspen: ["dallas"] }

graph.removeEdge("dallas", "tokyo"); // ✅ 实际已修改 adjacencyList

console.log(graph.adjacencyList); // ? 日志②：期望看到 tokyo: [], dallas: ["aspen"], aspen: ["dallas"]

问题根源：
Chrome、Firefox 等现代浏览器的控制台对对象采用惰性展开（lazy evaluation）。当你调用 console.log(graph.adjacencyList) 时，控制台仅保存对该对象的引用，而非立即序列化其当前状态。当你点击 ▶ 展开对象时，控制台才读取此时 adjacencyList 的最新值——而此时 removeEdge 已执行完毕，因此两次展开都显示修改后的结果（如 tokyo: []），造成“第一次日志也变空”的错觉。

✅ 解决方案：强制捕获快照
使用 structuredClone() 创建结构化深拷贝，确保日志记录的是调用时刻的确切状态：

console.log(structuredClone(graph.adjacencyList)); // ✅ 快照①：含完整初始边
graph.removeEdge("dallas", "tokyo");
console.log(structuredClone(graph.adjacencyList)); // ✅ 快照②：精确反映移除后状态

⚠️ 注意事项：

structuredClone() 是较新的 API（Chrome 98+、Firefox 94+、Safari 15.4+ 支持），旧环境可降级使用 JSON.parse(JSON.stringify(obj))（仅适用于纯 JSON 数据，不支持函数、undefined、Date、Map/Set 等）；

对于复杂图结构（含循环引用或自定义类实例），建议结合 console.table() 查看顶点关系，或在关键节点添加 console.debug("Step X:", {...graph.adjacencyList}) 辅助定位；

更健壮的调试方式是配合断点（Debugger）或使用 console.log("Before:", {...graph.adjacencyList}) 的展开语法 {...obj}（浅拷贝，适合简单对象）。