深拷贝与浅拷贝详解
JavaScript 中复制对象或数组时，可以选择进行浅拷贝或深拷贝。理解两者差异至关重要，尤其在处理复杂数据结构时。
内存与引用机制
JavaScript 对象和数组是引用类型。将它们赋值给变量时，实际赋值的是内存地址，而非数据本身。
- 原始类型 (例如：字符串、数字、布尔值) 按值存储。
- 引用类型 (例如：对象、数组、函数) 按引用存储。
浅拷贝
浅拷贝仅复制顶层属性，但会引用任何嵌套的对象或数组。修改副本中的嵌套对象会影响原始对象。
工作原理: 浅拷贝只复制对象/数组的第一层级，嵌套的对象/数组共享相同的引用。
潜在问题: 修改副本中的嵌套对象会同时修改原始对象，因为它们指向同一内存地址。
示例:
- 数组的浅拷贝：
const arr = [1, 2, [3, 4]]; const shallowCopy = arr.slice(); // 或 [...arr] shallowCopy[0] = 100; console.log(arr); // [1, 2, [3, 4]] 顶层元素不受影响 shallowCopy[2][0] = 999; console.log(arr); // [1, 2, [999, 4]] 嵌套数组被修改
- 对象的浅拷贝：
const obj = { a: 1, b: { c: 2 } };
const shallowCopy = { ...obj };
shallowCopy.a = 100;
console.log(obj); // { a: 1, b: { c: 2 } } 顶层属性不受影响
shallowCopy.b.c = 999;
console.log(obj); // { a: 1, b: { c: 999 } } 嵌套对象被修改
要点: 顶层属性按值复制，嵌套结构按引用复制。
浅拷贝方法:
-
数组:
Array.prototype.slice()，展开运算符 ([...arr]) -
对象:
Object.assign()，展开运算符 ({...obj})
深拷贝
深拷贝创建原始结构的完全独立副本，包括所有嵌套级别。
工作原理: 递归复制对象或数组的所有层级，嵌套的对象/数组获得独立的副本。
优势: 修改副本不会影响原始对象。
示例:
- 使用
structuredClone()进行深拷贝:
const arr = [1, 2, [3, 4]]; const deepCopy = structuredClone(arr); deepCopy[2][0] = 999; console.log(arr); // [1, 2, [3, 4]] 原数组保持不变 console.log(deepCopy); // [1, 2, [999, 4]]
- 使用
JSON.parse(JSON.stringify())进行深拷贝 (存在限制):
const obj = { a: 1, b: { c: 2 } };
const deepCopy = JSON.parse(JSON.stringify(obj));
deepCopy.b.c = 999;
console.log(obj); // { a: 1, b: { c: 2 } } 原对象保持不变
console.log(deepCopy); // { a: 1, b: { c: 999 } }
JSON.parse(JSON.stringify()) 的限制: 无法处理函数、undefined 值、日期、正则表达式、Map、Set、BigInt 或 Symbol。
总结:
| 特性 | 浅拷贝 | 深拷贝 |
|---|---|---|
| 复制深度 | 仅第一层 | 所有嵌套层 |
| 嵌套修改影响 | 影响原始对象 | 不影响原始对象 |
| 性能 | 对小型对象更快 | 由于递归，较慢 |
| 复杂性 | 简单，使用原生方法 | 复杂，可能需要递归 |
| 方法 |
slice, ..., Object.assign, ...
|
structuredClone(), JSON.parse(JSON.stringify()) (有局限性) |
何时使用何种拷贝方式?
- 浅拷贝: 复制简单对象，没有嵌套结构，或者性能比完整的数据复制更重要时。
-
深拷贝: 复制复杂嵌套对象，需要确保副本与原始对象完全独立时。 推荐使用
structuredClone()，因为它避免了JSON.parse(JSON.stringify())的许多限制。
深拷贝与浅拷贝的机制:
浅拷贝: 创建一个新的对象/数组，原始值按值复制，对象/数组按引用复制。
深拷贝: 递归遍历每个属性，原始值按值复制，对象/数组通过创建新实例进行复制。
性能考量: 深拷贝由于递归遍历嵌套结构，比浅拷贝更耗时和资源。
基准测试: (示例代码略，可自行测试不同方法的性能差异)
结论: 浅拷贝简单快捷，但存在潜在风险；深拷贝安全可靠，但更耗资源。 对于现代应用，建议优先使用 structuredClone() 进行深拷贝。
