如何实现JavaScript中的深拷贝与浅拷贝_JavaScript拷贝对象时需要注意什么_技术教程

浅拷贝只复制第一层引用，如Object.assign()和展开运算符，嵌套对象仍共享引用；深拷贝需递归处理，JSON方法快但丢失类型且不支持循环引用，structuredClone()是现代标准方案，兼容性较好但不支持function等。

浅拷贝只复制第一层引用，`Object.assign()` 和展开运算符都属于这一类

浅拷贝不会递归复制嵌套对象或数组，而是把内部的引用地址直接赋值过去。这意味着修改拷贝后的嵌套属性，原对象也会跟着变。

常见用法：

Object.assign({}, obj) —— 注意第一个参数必须是空对象，否则会污染目标对象
{...obj} —— 仅适用于 plain object，不支持 Date、RegExp、undefined、function 等类型
Array.prototype.slice() 或 [...arr] —— 对数组有效，但对二维数组仍为浅拷贝

const a = { x: 1, y: { z: 2 } };
const b = { ...a };
b.y.z = 99;
console.log(a.y.z); // 输出 99 —— 原对象被意外修改

深拷贝要递归处理所有层级，`JSON.parse(JSON.stringify())` 最快但限制最多

这个组合在大多数简单场景下够用，速度快、写法短，但它会丢失：undefined、function、Symbol、Date、RegExp、Map、Set、循环引用，且 Date 会被转成字符串。

典型失败案例：

JSON.stringify(new Date()) → "2025-01-01T00:00:00.000Z"（变成字符串，不再是 Date 实例）
JSON.stringify(/abc/) → "{}"
JSON.stringify({ x: undefined }) → "{}"
遇到循环引用直接抛错：TypeError: Converting circular structure to JSON

const obj = { d: new Date(), r: /test/, fn: () => {} };
console.log(JSON.parse(JSON.stringify(obj))); 
// { d: "2025-01-01T00:00:00.000Z", r: {}, fn: undefined }

需要可靠深拷贝时，优先用 `structuredClone()`（现代浏览器 & Node.js 17+）

structuredClone() 是目前最接近“开箱即用”的标准方案，支持 Date、RegExp、Map、Set、ArrayBuffer、TypedArray 等，也支持循环引用，且不丢失类型信息。

但注意它不支持：function、undefined、Symbol、Promise、Error、DOM 节点 —— 这些会直接报错或被忽略（取决于环境）。

浏览器兼容性：Chrome 98+、Firefox 94+、Safari 15.4+；Node.js 需 17.0+ 且启用 --experimental-structured-cloning（18.16+ 默认开启）
不能用于跨 Worker 传递函数或私有字段（如 #private）
对含有 function 的对象调用会抛 DataCloneError

const source = { date: new Date(), map: new Map([['a', 1]]), arr: [1, { b: 2 }] };
const clone = structuredClone(source);
clone.map.set('c', 3);
console.log(source.map.size); // 1 —— 没有被影响

兼容老环境或需自定义行为时，手写递归深拷贝要小心栈溢出和循环引用

自己实现深拷贝不是加个 for...in 就完事。核心难点有两个：检测循环引用（避免无限递归）、正确识别并构造各类内置对象（如 RegExp、Date）。

关键处理点：

用 WeakMap 缓存已拷贝的对象，每次进入对象前先查缓存，命中则直接返回对应克隆体
用 Object.prototype.toString.call(x) 判断类型，比 typeof 或 instanceof 更可靠
new x.constructor(...) 不安全（构造函数可能被篡改），应显式用 new Date(x)、new RegExp(x) 等方式重建
避免用 JSON 回退方案混入逻辑——类型丢失问题依然存在