JavaScript深拷贝需创建完全独立的新对象,常用方法包括:JSON.parse(JSON.stringify())(简单但有类型限制)、structuredClone()(现代标准,支持多类型及循环引用)、手写递归(灵活可控,解决循环引用)、Lodash的cloneDeep()(全面稳定,体积较大)。

JavaScript 深拷贝的本质是创建一个与原对象完全独立的新对象,所有嵌套层级的属性值都重新分配内存,修改副本不会影响原对象。直接赋值或浅拷贝(如 Object.assign、展开运算符)只复制第一层引用,无法满足深层结构隔离的需求。
JSON.parse(JSON.stringify()) —— 简单但有局限
这是最常用的一行写法,适合纯数据对象(仅含字符串、数字、布尔值、null、数组、普通对象):
const deepCopy = obj => JSON.parse(JSON.stringify(obj));
⚠️ 注意限制:
会丢失函数、undefined、Symbol 类型的属性 Date、RegExp、Map、Set、BigInt 等内置对象会被转成空对象或字符串(如 new Date() 变成 ISO 字符串,再解析成字符串而非 Date 实例) 无法处理循环引用,直接报错 TypeError: Converting circular structure to JSON
structuredClone() —— 新标准、推荐优先用
现代浏览器(Chrome 98+、Firefox 94+、Edge 98+)和 Node.js 17.0+ 支持的原生深拷贝 API:
立即学习“Java免费学习笔记(深入)”;
const copy = structuredClone(original);
✅ 优势明显:
支持 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error、Blob、FormData 等多种类型 自动处理循环引用 不丢失原型链以外的可枚举属性(注意:仍不复制函数和 undefined)
❌ 不支持函数、undefined、window 对象等非可序列化值,遇到会抛错。
手写递归实现 —— 灵活可控,适合定制场景
适用于需要兼容老环境、或需特殊处理(如忽略某些字段、转换日期格式、跳过 Symbol)的情况。核心逻辑是判断类型 + 递归复制:
function deepClone(obj, hash = new WeakMap()) { if (obj === null || typeof obj !== 'object') return obj; if (hash.has(obj)) return hash.get(obj); const cloned = Array.isArray(obj) ? [] : {}; hash.set(obj, cloned); for (const key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { cloned[key] = deepClone(obj[key], hash); } } return cloned;}
? 关键点:
用 WeakMap 记录已拷贝对象,解决循环引用问题 区分数组和普通对象,避免 instanceof 在跨 iframe 场景失效 使用 hasOwnProperty 过滤原型链属性
Lodash 的 cloneDeep() —— 稳定可靠,工程首选
如果项目已引入 Lodash,_.cloneDeep() 是经过大量测试、覆盖边界情况最多的方案:
import { cloneDeep } from 'lodash-es';const copy = cloneDeep(original);
✅ 支持几乎所有 JS 原生类型(包括函数、正则、日期、Map/Set、甚至 Promise 和自定义类实例),并正确处理循环引用、不可枚举属性、原型继承等。
⚠️ 缺点是包体积较大(tree-shaking 后约 20KB+),纯前端轻量项目可酌情替代。
基本上就这些。选哪种取决于你的运行环境、数据复杂度和是否允许引入依赖。新项目优先试 structuredClone;要兼容 IE 或需精细控制,就手写或上 Lodash。
以上就是如何实现javascript深拷贝_有哪些常见方法?的详细内容,更多请关注创想鸟其它相关文章!
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1542924.html
微信扫一扫
支付宝扫一扫