深拷贝和浅拷贝的核心区别在于是否递归复制引用类型。浅拷贝仅复制对象第一层属性，引用类型共享内存，修改新对象会影响原对象，常见方法有Object.assign、扩展运算符、slice等；深拷贝则完全复制所有层级，新旧对象独立，互不影响。实现方式包括JSON.parse(JSON.stringify())（适用于纯数据）、手动递归（支持循环引用和内置对象）、structuredClone()（现代浏览器原生支持）及Lodash的cloneDeep()。选择时需权衡兼容性、性能与使用场景，避免对DOM节点或window对象进行深拷贝。
JavaScript中的深拷贝和浅拷贝是处理对象复制时必须理解的核心概念。很多人在操作对象时，以为赋值就是“复制”，结果修改新对象时原对象也被改变了——这就是浅拷贝带来的副作用。下面从原理到实现，全面解析两者的区别与使用方式。
什么是浅拷贝
浅拷贝是指创建一个新对象，这个新对象拥有原对象属性的副本，但属性值如果是引用类型（如对象、数组），则只复制了指向该对象的引用，而不是其本身。
换句话说：基本数据类型会被复制，而引用类型只是“共享”同一个内存地址。
常见浅拷贝方法包括：
立即学习“Java免费学习笔记（深入）”；
Object.assign()：只能实现一级属性的浅拷贝 扩展运算符 {…obj}：语法简洁，效果同 Object.assign Array.prototype.slice() 或 concat()：用于数组浅拷贝注意：这些方法都无法深入嵌套对象进行复制。
示例：
const original = { name: 'Alice', info: { age: 25 } };const shallow = { ...original };shallow.info.age = 30;console.log(original.info.age); // 输出 30 —— 原对象被影响
什么是深拷贝
深拷贝会递归地复制对象的所有层级，包括嵌套的对象和数组，确保新对象与原对象完全独立，互不影响。
深拷贝的关键在于：每一个引用类型都重新创建一份副本，断开与原数据的联系。
实现深拷贝的方法有多种，各有优劣：
1. JSON.parse(JSON.stringify(obj))
这是最简单的深拷贝方法，适用于纯数据对象（不含函数、undefined、Symbol、Date 等特殊类型）。
标贝科技
标贝科技-专业AI语音服务的人工智能开放平台
14 查看详情
const deep = JSON.parse(JSON.stringify(original));
缺点：无法处理函数、undefined、Symbol Date 类型会被转为字符串 循环引用会报错 RegExp、Error 对象会丢失信息
2. 手动递归实现
通过判断数据类型，逐层复制，是最可控的方式。
function deepClone(obj, seen = new WeakMap()) { if (obj === null || typeof obj !== 'object') return obj; if (seen.has(obj)) return seen.get(obj); // 防止循环引用 let clone; if (obj instanceof Date) { clone = new Date(obj); } else if (obj instanceof RegExp) { clone = new RegExp(obj); } else if (Array.isArray(obj)) { clone = obj.map(item => deepClone(item, seen)); } else { clone = {}; for (let key in obj) { if (obj.hasOwnProperty(key)) { clone[key] = deepClone(obj[key], seen); } } } seen.set(obj, clone); return clone;}
这种方式支持循环引用，兼容大部分内置对象，适合需要精确控制的场景。
3. 使用结构化克隆算法（浏览器API）
现代浏览器提供 structuredClone() 方法，可安全深拷贝支持的数据类型。
const cloned = structuredClone(original);
支持：对象、数组、Date、RegExp、Map、Set、Blob、FileList、ImageData 等。
优势：原生支持、安全、无需引入库。
限制：不支持函数、不能跨 iframe/window 完全通用。
4. 使用第三方库（如 Lodash）
Lodash 提供 _.cloneDeep() 方法，功能强大且稳定。
const _ = require('lodash');const deep = _.cloneDeep(original);
适合复杂项目，处理边界情况更完善。
如何选择合适的拷贝方式
根据实际需求权衡性能与兼容性：
如果对象是纯数据（如配置、JSON响应），用 JSON.parse + stringify 最快 需要兼容 Date、RegExp 或存在嵌套结构，推荐 structuredClone（现代环境） 需支持函数或特殊类型，使用 手动递归 或 Lodash 仅复制第一层，可用 扩展运算符 或 Object.assign
特别提醒：不要对 DOM 节点、window 对象等使用深拷贝，会导致意外行为或错误。
基本上就这些。理解深浅拷贝的本质，能避免很多隐蔽的 bug，尤其是在状态管理、表单编辑、撤销功能等场景中尤为重要。
以上就是JavaScript深拷贝与浅拷贝的全面解析的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/288766.html
微信扫一扫 
支付宝扫一扫 
