浅拷贝只复制对象第一层属性，深层仍共享引用，常用方法有Object.assign、扩展运算符；深拷贝则递归复制所有层级，实现方式包括JSON.parse(JSON.stringify())、递归函数和structuredClone()，后者支持更多数据类型但不兼容函数与DOM节点。
在JavaScript中，对象和数组的复制并不是简单的赋值操作。由于引用类型的特性，直接赋值只会复制引用，导致原对象和复制对象共享同一块内存空间。为了解决这个问题，就需要使用深拷贝或浅拷贝。下面介绍它们的区别与实现方式。
浅拷贝：只复制第一层属性
浅拷贝会创建一个新对象，并将原对象的可枚举属性复制过来，但这些属性如果是对象或数组，仍然只是复制了引用。
常见的浅拷贝方法有：
- Object.assign()：适用于普通对象的一层复制
- 扩展运算符（...）：语法简洁，常用于对象和数组的浅拷贝
- Array.prototype.slice()：对数组进行浅拷贝
const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj };
copy.b.c = 3;
console.log(obj.b.c); // 输出 3，说明内部对象是共享的
深拷贝：完全独立的新对象
深拷贝会递归复制对象的所有层级，确保新对象与原对象彻底分离，修改互不影响。
实现深拷贝的常见方式包括：
- JSON.parse(JSON.stringify(obj))：简单有效，但有局限性，如无法处理函数、undefined、Symbol、循环引用等
- 递归实现：手动遍历对象属性，对每个引用类型进行递归复制
- structuredClone()：现代浏览器支持的新API，能较好处理多数数据类型（包括日期、正则、嵌套对象等）
function deepClone(obj, visited = new WeakMap()) {
if (obj === null || typeof obj !== 'object') return obj;
if (visited.has(obj)) return visited.get(obj); // 处理循环引用
const clone = Array.isArray(obj) ? [] : {};
visited.set(obj, clone);
for (let key in obj) {
if (Object.prototype.hasOwnProperty.call(obj, key)) {
clone[key] = deepClone(obj[key], visited);
}
}
return clone;
}
不同方法对比与适用场景
选择哪种拷贝方式取决于具体需求：
- 需要快速复制一层结构时，用扩展运算符或Object.assign
- 数据结构较深且不含特殊类型，可用JSON方法
- 要求完整支持内置对象、循环引用等复杂情况，推荐使用structuredClone或自定义递归函数
注意：structuredClone目前不支持函数复制，也不能克隆DOM节点。
基本上就这些。根据项目环境和数据特点选合适的方法，避免不必要的性能开销或兼容性问题。
