什么是javascript深拷贝_如何实现对象的完全复制-js教程-PHP中文网

什么是javascript深拷贝_如何实现对象的完全复制

幻影之瞳

发布： 2025-12-23 21:49:32

原创

573人浏览过

JavaScript深拷贝是创建完全独立的新对象，递归复制所有嵌套属性；浅拷贝仅复制第一层，嵌套对象仍共享引用；常用方法包括JSON序列化（有局限）、structuredClone（推荐）、递归实现和lodash.cloneDeep。

什么是javascript深拷贝_如何实现对象的完全复制

JavaScript深拷贝是指创建一个新对象，该对象与原对象完全独立，修改新对象不会影响原对象，且其所有嵌套属性（包括对象、数组、日期、正则等）也都被递归复制，而非共享引用。

为什么浅拷贝不行

使用Object.assign()、展开运算符{...obj}或Array.from()等方式只能实现浅拷贝——只复制第一层属性。一旦对象内部还有对象或数组，它们的引用仍会被共享。

例如：const a = { user: { name: 'Alice' } }; const b = { ...a }; b.user.name = 'Bob'; → 此时a.user.name也会变成'Bob'
根本原因是：嵌套的user对象在a和b中指向同一内存地址

常用深拷贝方法及适用场景

没有一种方法完美适用于所有情况，需按数据结构和需求选择：

JSON.parse(JSON.stringify(obj))：最简单，但会丢失函数、undefined、Symbol、Date、RegExp、Map、Set、循环引用，且NaN转为null
structuredClone()（现代浏览器支持）：原生API，支持Map、Set、Date、RegExp、ArrayBuffer等，能处理循环引用（Chrome 98+、Firefox 94+、Safari 15.4+），推荐优先使用
递归实现基础版：适合学习原理或定制逻辑（如过滤某些字段、处理特殊类型），但需手动处理Date、RegExp、ArrayBuffer等
第三方库（如lodash.cloneDeep）：健壮全面，兼容性好，适合生产环境复杂对象

手写简易深拷贝（支持常见类型）

以下是一个兼顾可读性和实用性的基础实现，覆盖对象、数组、Date、RegExp、基本类型：

Studio Global

Studio Global AI 是一个内容生成工具，帮助用户客制化生成风格和内容，以合理价格提供无限生成，希望将 AI 带给全世界所有人。

405

查看详情

立即学习“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;
}

登录后复制

注意：此版本不处理循环引用、Map/Set、ArrayBuffer等，如需完整支持，建议用structuredClone或成熟库。