什么是TS中的浅副本和深拷贝

深拷贝与浅拷贝详解

JavaScript 中复制对象或数组时，可以选择进行浅拷贝或深拷贝。理解两者差异至关重要，尤其在处理复杂数据结构时。

内存与引用机制

JavaScript 对象和数组是引用类型。将它们赋值给变量时，实际赋值的是内存地址，而非数据本身。

• 原始类型 (例如：字符串、数字、布尔值) 按值存储。
• 引用类型 (例如：对象、数组、函数) 按引用存储。

浅拷贝

浅拷贝仅复制顶层属性，但会引用任何嵌套的对象或数组。修改副本中的嵌套对象会影响原始对象。

工作原理: 浅拷贝只复制对象/数组的第一层级，嵌套的对象/数组共享相同的引用。

潜在问题: 修改副本中的嵌套对象会同时修改原始对象，因为它们指向同一内存地址。

示例:

1. 数组的浅拷贝：

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]] 嵌套数组被修改

2. 对象的浅拷贝：

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})

深拷贝

深拷贝创建原始结构的完全独立副本，包括所有嵌套级别。

工作原理: 递归复制对象或数组的所有层级，嵌套的对象/数组获得独立的副本。

优势: 修改副本不会影响原始对象。

示例:

1. 使用 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]]

2. 使用 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。

总结:

何时使用何种拷贝方式?

• 浅拷贝: 复制简单对象，没有嵌套结构，或者性能比完整的数据复制更重要时。
• 深拷贝: 复制复杂嵌套对象，需要确保副本与原始对象完全独立时。 推荐使用 structuredClone()，因为它避免了 JSON.parse(JSON.stringify()) 的许多限制。

深拷贝与浅拷贝的机制:

浅拷贝: 创建一个新的对象/数组，原始值按值复制，对象/数组按引用复制。

深拷贝: 递归遍历每个属性，原始值按值复制，对象/数组通过创建新实例进行复制。

性能考量: 深拷贝由于递归遍历嵌套结构，比浅拷贝更耗时和资源。

基准测试: (示例代码略，可自行测试不同方法的性能差异)

结论: 浅拷贝简单快捷，但存在潜在风险；深拷贝安全可靠，但更耗资源。 对于现代应用，建议优先使用 structuredClone() 进行深拷贝。

以上就是什么是TS中的浅副本和深拷贝的详细内容，更多请关注php中文网其它相关文章！