如何使用 History API 的 state 存储间接实现深拷贝-js教程-PHP中文网

History API 的 state 参数通过结构化克隆实现深拷贝，支持循环引用和多种内置类型，但不支持函数、Symbol 和 DOM 节点；可封装为降级方案，兼容 Chrome 4+、Firefox 4+、Safari 10.1+ 等。

如何使用 history api 的 state 存储间接实现深拷贝

History API 的 state 参数本身不是为深拷贝设计的，但它在调用 pushState() 或 replaceState() 时，会自动对传入对象执行结构化克隆（structured clone）——这是一种浏览器原生支持的、比 JSON.parse(JSON.stringify()) 更健壮的深拷贝机制。因此，你可以把它当作一个“副作用可用”的深拷贝工具，尤其适合不能使用 structuredClone()（兼容性不足）或需要处理循环引用的场景。

为什么 state 能间接实现深拷贝

当你调用：

history.pushState(obj, '', '/')
history.replaceState(obj, '', '/')

浏览器会对 obj 执行结构化克隆，生成一份独立副本存入历史栈。这个过程：

支持对象、数组、Map、Set、Date、RegExp、ArrayBuffer、TypedArray 等内置类型
能正确处理循环引用（JSON.stringify 会报错）
是同步、无副作用的（不触发页面跳转或重绘）
但不支持函数、Symbol、DOM 节点、Error 实例等不可序列化值（传入会直接报错）

安全封装一个 structuralClone 函数

利用 replaceState 临时覆盖当前 state，再立即恢复，即可提取克隆体：

function structuralClone(obj) {
  const oldState = history.state;
  history.replaceState(obj, document.title);
  const cloned = history.state;
  history.replaceState(oldState, document.title);
  return cloned;
}

注意：