javascript如何实现深拷贝_有哪些方法可以避免引用问题？_网络技术

javascript如何实现深拷贝_有哪些方法可以避免引用问题？

发布时间 - 2025-12-30 00:00:00 点击率：次

JavaScript深拷贝需创建完全独立副本，避免引用问题；JSON方法简单但有类型限制；structuredClone是现代推荐方案；手写递归可定制但需处理循环引用等细节；Lodash的cloneDeep最全面可靠。

JavaScript 实现深拷贝的核心目标是：创建一个与原对象完全独立的新对象，所有嵌套的属性（包括对象、数组、日期、正则等）都重新分配内存，修改副本不会影响原始数据。引用问题本质上是浅拷贝导致的——只复制了引用地址，而非实际值。

JSON.parse(JSON.stringify()) —— 简单但有局限

这是最常用的一行式方案，适合纯数据对象（仅含字符串、数字、布尔、null、数组、普通对象）：

const original = { a: 1, b: { c: 2 } };
const copy = JSON.parse(JSON.stringify(original));

⚠️ 注意限制：

会丢失函数、undefined、Symbol、BigInt、Date、RegExp、Map、Set、Promise 等类型（序列化时被忽略或转为 null）
无法处理循环引用，直接报错 TypeError: Converting circular structure to JSON
Date 对象变成字符串，RegExp 变成空对象

structuredClone() —— 现代浏览器推荐方案

Chrome 98+、Firefox 94+、Edge 98+ 支持，能正确处理 Map、Set、Date、RegExp、ArrayBuffer、TypedArray、Error、Blob 等，并支持循环引用：

const original = { date: new Date(), regex: /abc/g, map: new Map([['key', 'value']]) };
const copy = structuredClone(original);

✅ 优点：原生、安全、语义清晰、性能较好
❌ 缺点：IE 不支持，部分 Node.js 版本（v17.0+ 启用 --experimental-structured-cloning）才可用

手写递归深拷贝 —— 灵活可控，适合学习和定制

通过递归判断类型，分别处理基本类型、引用类型、特殊对象：

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 clone = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clone[key] = deepClone(obj[key]);
    }
  }
  return clone;
}

? 关键点：

必须检查 null（typeof null === 'object' 是 JS 历史 bug）
用 Array.isArray() 判断数组，避免用 instanceof 在跨 iframe 场景失效
需单独处理 Date、RegExp、Map、Set 等，否则会退化为普通对象
要支持循环引用？需额外维护一个 WeakMap 记录已拷贝的对象对

使用成熟库 —— 快速可靠，减少重复造轮子

Lodash 的 _.cloneDeep() 是最广泛使用的方案：

import { cloneDeep } from 'lodash-es';
const copy = cloneDeep(original);

✅ 支持几乎所有 JS 内置类型、循环引用、自定义类实例（可配置）
✅ 经过大量生产环境验证，边界 case 处理完善
⚠️ 注意：体积略大（可按需引入），Tree-shaking 友好（用 lodash-es）

避免引用问题的本质，不是选哪个方法，而是明确你的数据结构和运行环境。简单 JSON 数据用 JSON 方法；现代浏览器项目优先 structuredClone；需要兼容老环境或高度定制就手写或用 Lodash。不复杂但容易忽略细节。

# javascript # java # js # node.js # json # node # 浏览器 # edge # red

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：旅游路线网站制作流程,怎样注册旅游网站？

下一篇：与专业建站公司沟通时，怎样准确表达自己的建站想法和需求？

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：旅游路线网站制作流程,怎样注册旅游网站？

下一篇：与专业建站公司沟通时，怎样准确表达自己的建站想法和需求？