什么是javascript的深拷贝与浅拷贝_如何实现一个深拷贝函数

13次阅读

浅拷贝只复制第一层属性,新旧对象共享嵌套引用;深拷贝递归复制所有层级,完全独立。常见浅拷贝方法有Object.assign、展开运算符等,均不处理深层引用。深拷贝需解决递归遍历、特殊类型识别、循环引用等问题,推荐使用lodash的_.cloneDeep()或structuredClone()。

什么是javascript的深拷贝与浅拷贝_如何实现一个深拷贝函数

浅拷贝只复制对象的第一层属性,新旧对象共享嵌套的引用类型数据;深拷贝则递归复制所有层级,新对象与原对象完全独立,互不影响。

浅拷贝的特点与常见实现

浅拷贝后,如果原对象中包含数组、对象、日期、正则等引用类型,它们的内存地址会被直接复制,新旧对象仍指向同一块内存。修改嵌套内容会影响彼此。

  • Object.assign({}, obj):只拷贝可枚举的自有属性,不处理原型链和 symbol 属性
  • 展开运算符 {…obj}:语法简洁,但同样只作用于第一层
  • Array.prototype.slice() / concat():适用于数组,但对内部对象仍是浅拷贝

深拷贝的核心难点

真正可靠的深拷贝需解决几个关键问题:

  • 递归遍历所有嵌套层级,不能遗漏任意对象或数组
  • 正确识别并处理特殊对象:dateregexpmap、Set、TypedArray、functionundefinedNULL
  • 避免循环引用导致的溢出(如 obj.a = obj)
  • 保持原型链或构造器信息(按需,多数场景可忽略)

手写一个基础可用的深拷贝函数

以下是一个兼顾可读性与基本健壮性的实现,支持常见类型并检测循环引用:

立即学习Java免费学习笔记(深入)”;

function deepClone(obj, hash = new WeakMap()) {   if (obj === null || typeof obj !== 'object') return obj;    if (hash.has(obj)) return hash.get(obj);    let cloned;   if (obj instanceof Date) {     cloned = new Date(obj);   } else if (obj instanceof RegExp) {     cloned = new RegExp(obj);   } else if (obj instanceof Array) {     cloned = [];   } else {     cloned = {};   }    hash.set(obj, cloned);    for (let key in obj) {     if (Object.prototype.hasOwnProperty.call(obj, key)) {       cloned[key] = deepClone(obj[key], hash);     }   }    return cloned; }

说明:使用 WeakMap 记录已克隆的对象,遇到重复引用时直接返回缓存结果,防止无限递归。该版本暂不处理 Map/Set/Function 等更复杂类型,但已覆盖日常大部分需求。

生产环境建议用成熟方案

自己实现深拷贝容易遗漏边界情况。实际项目中推荐:

  • jsON.parse(json.stringify(obj)):最简方式,但会丢失函数、undefined、Symbol、Date 对象变为字符串、无法处理循环引用
  • Lodash 的 _.cloneDeep():功能完整、性能好、经过大量测试,支持所有内置类型及自定义类
  • structuredClone()(现代浏览器:原生 API,支持 Map/Set/Date/RegExp 等,但暂不支持函数和循环引用(部分环境已支持)

text=ZqhQzanResources