🟦 浅拷贝(只复制第一层)
1. Object.assign()(仅对象)
const obj = { a: 1, b: { c: 2 } };
const copy = Object.assign({}, obj); // 浅拷贝
2. 展开运算符(对象/数组)
const obj = { a: 1, b: { c: 2 } };
const copy = { ...obj }; // 浅拷贝
const arr = [1, [2, 3]];
const copyArr = [...arr]; // 浅拷贝
🟩 深拷贝(完全复制,不共享引用)
✅ 方法 1:结构简单时用 JSON
const deepCopy = JSON.parse(JSON.stringify(obj));
📌 缺点:无法拷贝 函数、Symbol、undefined、循环引用、Date、Map、Set 等。
✅ 方法 2:structuredClone(现代浏览器支持)
const copy = structuredClone(obj);
✔️ 拷贝包括:对象、数组、Date、Blob、File、Map、Set,但不支持函数。
❗ 不支持 IE、旧版本 Node.js。
✅ 方法 3:使用第三方库(推荐 lodash)
import cloneDeep from 'lodash/cloneDeep';
const copy = cloneDeep(obj);
✔️ 支持大部分复杂结构,稳定可靠。
🔴 不推荐的做法:
const copy = eval(JSON.stringify(obj)); // ❌ 有安全风险
🔚 总结一张表:
| 方法 | 类型 | 是否深拷贝 | 备注 |
|---|---|---|---|
Object.assign() |
对象 | ❌浅拷贝 | 仅一层 |
{ ...obj } |
对象/数组 | ❌浅拷贝 | 常用写法 |
JSON |
对象/数组 | ✅深拷贝 | 不支持函数、循环引用等 |
structuredClone |
多种 | ✅深拷贝 | 新标准,支持多结构 |
lodash.cloneDeep |
多种 | ✅深拷贝 | 工程中最稳 |