如何实现javascript深拷贝_有哪些常见方法？-js教程-PHP中文网

如何实现javascript深拷贝_有哪些常见方法？

夜晨

发布： 2025-12-16 19:07:02

原创

745人浏览过

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

如何实现javascript深拷贝_有哪些常见方法？

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 对象等非可序列化值，遇到会抛错。

达芬奇

达芬奇——你的AI创作大师

166

查看详情

手写递归实现 —— 灵活可控，适合定制场景

适用于需要兼容老环境、或需特殊处理（如忽略某些字段、转换日期格式、跳过 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深拷贝_有哪些常见方法？的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

javascript的REST API如何调用_有哪些最佳实践？如何用JavaScript实现一个可排序表格_如何点击表头进行排序和过滤？ Javascript中的国际化API是什么？ javascript生命周期钩子是什么_组件有哪些关键阶段？ javascript中的密码学API是什么_如何实现数据的加密解密