深拷贝与浅拷贝详解
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() 进行深拷贝。
以上就是什么是TS中的浅副本和深拷贝的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1501603.html
微信扫一扫 
支付宝扫一扫 
