浅拷贝只复制对象第一层属性，引用类型共享内存，常用方法有Object.assign、扩展运算符和slice；深拷贝递归复制所有层级，完全独立，可使用JSON.parse(JSON.stringify())、手写递归函数或structuredClone()实现，后者支持更多数据类型但需考虑兼容性。
在JavaScript中，拷贝对象是一个常见需求。根据是否复制对象内部的引用类型数据，分为浅拷贝和深拷贝。理解它们的区别并掌握实现方式，对开发非常有帮助。
浅拷贝的实现方式
浅拷贝只复制对象的第一层属性，如果属性是引用类型（如数组、对象），则复制的是引用地址，而不是创建新的对象。
1. 使用 Object.assign()
Object.assign() 可以将一个或多个源对象的所有可枚举属性复制到目标对象。
示例：
立即学习“Java免费学习笔记（深入）”；
const obj1 = { a: 1, b: { c: 2 } };const obj2 = Object.assign({}, obj1);obj2.b.c = 3;console.log(obj1.b.c); // 输出 3，说明是引用共享
2. 使用扩展运算符 (…)
扩展运算符是目前最简洁的浅拷贝方法。
示例：
立即学习“Java免费学习笔记（深入）”；
const obj1 = { x: 1, y: { z: 2 } };const obj2 = { ...obj1 };obj2.y.z = 4;console.log(obj1.y.z); // 输出 4，仍然是引用共享
3. 使用 Array.prototype.slice()（仅适用于数组）
对于数组，slice() 方法可以快速实现浅拷贝。
示例：
立即学习“Java免费学习笔记（深入）”；
const arr1 = [1, 2, { val: 3 }];const arr2 = arr1.slice();arr2[2].val = 5;console.log(arr1[2].val); // 输出 5
深拷贝的实现方式
深拷贝会递归复制对象的所有层级，新旧对象完全独立，互不影响。
1. 使用 JSON.parse(JSON.stringify())
这是最简单快捷的深拷贝方法，适用于纯数据对象（没有函数、undefined、Symbol、Date等特殊类型）。
示例：
立即学习“Java免费学习笔记（深入）”；
const obj1 = { name: 'Tom', info: { age: 20 } };const obj2 = JSON.parse(JSON.stringify(obj1));obj2.info.age = 25;console.log(obj1.info.age); // 输出 20，互不影响
注意：该方法无法处理函数、正则、Date、undefined 等值，且会忽略不可枚举属性和Symbol。
2. 手写递归实现深拷贝
通过递归判断属性类型，手动处理对象和数组，是最通用的方法。
示例：
立即学习“Java免费学习笔记（深入）”；
function deepClone(obj) { if (obj === null || typeof obj !== 'object') return obj; if (obj instanceof Date) return new Date(obj); if (obj instanceof RegExp) return new RegExp(obj); const cloned = Array.isArray(obj) ? [] : {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { cloned[key] = deepClone(obj[key]); } } return cloned;}
这种方式能处理大部分情况，包括嵌套对象、数组、Date、RegExp等。
3. 使用 structuredClone()（现代浏览器支持）
HTML标准提供的 structuredClone() 方法可以直接实现深拷贝，支持更多类型（如Date、RegExp、Map、Set等）。
示例：
立即学习“Java免费学习笔记（深入）”；
const obj1 = { date: new Date(), data: { value: 1 } };const obj2 = structuredClone(obj1);obj2.data.value = 2;console.log(obj1.data.value); // 输出 1
注意：不支持函数和DOM节点，兼容性需考虑（Chrome 98+ 支持）。
如何选择合适的拷贝方式？
根据使用场景选择：
简单对象、无需深层复制 → 使用扩展运算符或 Object.assign() 纯数据对象、无特殊类型 → JSON 方法最方便 复杂结构、包含 Date、RegExp 等 → 推荐手写 deepClone 或 structuredClone 现代项目、兼容性允许 → structuredClone 是未来趋势
基本上就这些。掌握不同方法的优缺点，才能在实际开发中灵活应对。深拷贝虽不复杂，但容易忽略边界情况，需要特别注意循环引用和特殊类型处理。
以上就是JS实现深拷贝与浅拷贝的几种方式_javascript技巧的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1539106.html
微信扫一扫 
支付宝扫一扫 
