console.log() 对象时默认惰性求值，展开查看时显示的是当前状态而非打印时刻的值；需用 structuredClone() 或 JSON.stringify() 深拷贝确保日志内容定格在调用瞬间。
`console.log()` 对象时默认惰性求值，展开查看时显示的是当前状态而非打印时刻的值；需用 `structuredclone()` 或 `json.stringify()` 深拷贝确保日志内容定格在调用瞬间。
在前端调试中，你可能遇到这样一种“反直觉”现象：
reset: () => {
console.log("FIRST", world.bodies); // ✅ 期望记录此时的数组（含5个对象）
setTimeout(() => {
for (let i = 0; i <p>当你点击重置按钮后未立即打开控制台，5秒后再展开 "FIRST" 日志——却发现它也显示空数组，与 "SECOND" 完全一致。这不是代码逻辑错误，而是 console.log() <strong>对引用类型（如数组、对象）的特殊行为所致</strong>。</p><h3>? 根本原因：惰性求值（Lazy Evaluation）</h3><p>根据 <a href="https://www.php.cn/link/ae9066afb0cdd2d8ab5788407e422c35" rel="nofollow" target="_blank">MDN 官方说明</a>，浏览器控制台对对象/数组的序列化是<strong>延迟执行</strong>的： </p>
- console.log(obj) 仅存储对该对象的引用，而非深拷贝其值；
- 真正的属性读取发生在你在 DevTools 中首次展开该日志项时；
- 因此，无论你何时查看，看到的都是该对象当前最新状态（即被 removeRigidBody 清空后的 world.bodies）。
这解释了为何“未及时打开控制台 → 展开时两个日志都为空”——因为 world.bodies 已被修改，而控制台始终按需读取最新快照。
✅ 正确解决方案：强制记录“时间点快照”
方案一：使用 structuredClone()（推荐，现代标准）
reset: () => {
console.log("FIRST", structuredClone(world.bodies)); // ✅ 深拷贝，定格此刻状态
setTimeout(() => {
for (let i = 0; i <p>✅ 优势：支持 Map、Set、Date、RegExp、嵌套对象等复杂结构，且保留原型链（部分环境）。<br>
⚠️ 兼容性：Chrome 98+、Firefox 94+、Safari 15.4+；旧版可加 polyfill 或降级。</p><h4>方案二：JSON.stringify() + JSON.parse()（兼容性兜底）</h4><pre class="brush:php;toolbar:false;">reset: () => {
try {
const snapshot = JSON.parse(JSON.stringify(world.bodies));
console.log("FIRST", snapshot);
} catch (e) {
console.warn("无法 JSON 序列化 world.bodies，尝试 structuredClone", e);
console.log("FIRST", structuredClone?.(world.bodies) ?? world.bodies);
}
setTimeout(() => {
// ... 移除逻辑
console.log("SECOND", JSON.parse(JSON.stringify(world.bodies)));
}, 5000);
}⚠️ 注意：会丢失 undefined、function、Symbol、Date（转为字符串）、RegExp、循环引用等；仅适用于纯数据对象。
方案三：打印关键字段（轻量替代）
若只需验证长度或简单属性，直接输出原始值更可靠：
console.log("FIRST — length:", world.bodies.length, "— ids:", world.bodies.map(b => b.id));⚠️ 重要注意事项
- 不要依赖 console.log(obj) 调试对象变更：尤其在异步、DOM 更新、状态清理等场景；
- 开启 “Preserve log”（控制台右上角图标）：防止页面跳转/刷新清空日志，便于比对；
- 避免在生产环境滥用深拷贝：structuredClone 和 JSON.stringify 均有性能开销，调试专用；
- 验证控制台设置：确保 Safari/Chrome 已启用 Info 级别日志（Safari 需手动勾选“信息”，Chrome 默认开启）。
? 总结
console.log() 的对象惰性求值机制是设计使然，非 Bug。要获得可信赖的调试快照，必须主动深拷贝——优先选用 structuredClone()，兼顾准确性与现代性；兼容旧环境时，用 JSON.stringify() + 类型判断兜底。记住：日志不是时光机，而是快照触发器；你负责按下快门，控制台负责显影。
