掌握手写深拷贝,轻松处理复杂对象的数据传递!

简介: 掌握手写深拷贝,轻松处理复杂对象的数据传递!

摘要:


本文将介绍深拷贝的概念、实现原理以及如何在JavaScript中手写深拷贝函数。通过掌握这些知识,你将能更好地理解复杂对象的操作和数据传递。


引言:


在编程中,拷贝是一个常见的需求。浅拷贝和深拷贝是拷贝对象的两种方式。与浅拷贝相比,深拷贝可以创建一个全新的对象,包括原对象的所有属性和嵌套对象。手写深拷贝可以帮助你更深入地理解深拷贝的实现原理和数据传递的过程。


正文:


1. 深拷贝的概念

深拷贝(Deep Copy)是指创建一个新对象,然后递归地复制原对象及其所有属性值和嵌套对象。与浅拷贝不同,浅拷贝只复制对象的第一层属性,而对于嵌套的对象或数组,浅拷贝会复制引用而不是实际对象。


深拷贝是指在拷贝对象时,不仅复制对象的基本属性,还复制对象的引用指向的所有对象。深拷贝后的对象与原对象在内存中完全独立,修改拷贝后的对象不会影响原对象。


深拷贝与浅拷贝是针对对象赋值的一种方式。浅拷贝只复制对象的基本属性和值类型的属性,对于引用类型的属性,只是复制引用,而不复制引用的对象。因此,浅拷贝后的对象与原对象在内存中仍然共享同一块引用,修改浅拷贝后的对象会原对象产生影响。


在 JavaScript 中,可以使用 JSON.parse() 和 JSON.stringify() 方法进行对象的深拷贝。需要注意的是,这种深拷贝方式对于循环引用、函数、undefined 和 symbol 这四种类型会进行特殊的处理,可能无法实现完全的深拷贝。

示例代码:

let obj1 = {
  a: 1,
  b: {
    c: 2
  }
};

let obj2 = JSON.parse(JSON.stringify(obj1));

obj2.b.c = 3;

console.log(obj1.b.c); // 输出 2
console.log(obj2.b.c); // 输出 3

在实际应用中,如果需要进行完全的深拷贝,可以考虑使用第三方库,如 lodash 的 _.cloneDeep() 方法。


2. 实现原理

手写深拷贝的实现原理主要运用了递归和引用计数。递归用于遍历原对象及其嵌套对象,引用计数用于跟踪已复制的对象,以避免重复复制。在这个过程中,我们需要处理各种数据类型,如基本数据类型、对象、数组和函数等。


3. 手写深拷贝函数

下面是一个简单的深拷贝函数实现:

function deepClone(obj, hash = new WeakMap()) {
  if (obj === null) return null;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof RegExp) return new RegExp(obj);
  if (typeof obj !== 'object') return obj;
  if (hash.has(obj)) return hash.get(obj);
  let cloneObj = new obj.constructor();
  hash.set(obj, cloneObj);
  for (const key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloneObj[key] = deepClone(obj[key], hash);
    }
  }
  return cloneObj;
}

这个函数通过递归遍历原对象及其嵌套对象,并使用WeakMap来跟踪已复制的对象。这样,我们就可以避免重复复制相同的对象。


4. 注意事项

在手写深拷贝函数时,我们需要注意以下几点:


  • 处理特殊数据类型,如Date、RegExp等
  • 处理循环引用,使用引用计数来避免重复复制
  • 遵循原型链,确保复制对象的prototype属性


总结:


手写深拷贝是理解深拷贝实现原理和数据传递过程的有效方法。通过递归和引用计数,我们可以创建一个全新的对象,包括原对象的属性和嵌套对象。在实现深拷贝函数时,需要注意处理特殊数据类型、循环引用和原型链等问题。


参考资料:


相关文章
|
5月前
|
设计模式 Java C++
数据结构篇:数据拷贝、深拷贝、重载与移动构造
数据结构篇:数据拷贝、深拷贝、重载与移动构造
23 0
|
6月前
|
编译器 数据安全/隐私保护 C++
【类与对象】封装&对象的初始化及清理
【类与对象】封装&对象的初始化及清理
|
JavaScript 数据库
Vue数据操作:如何在对象拷贝中正确选择深拷贝或浅拷贝?
Vue数据操作:如何在对象拷贝中正确选择深拷贝或浅拷贝?
124 0
简化对象和函数写法
简化对象和函数写法
36 1
|
JavaScript
如何使用js函数封装一个深拷贝?
如何使用js函数封装一个深拷贝?
|
JavaScript
es 6 对象深拷贝的俩种方式
es 6 对象深拷贝的俩种方式
181 0
|
算法 Java 编译器
如何理解对象赋值给接口的操作(关键在对象!)
如何理解对象赋值给接口的操作(关键在对象!)
如何理解对象赋值给接口的操作(关键在对象!)
|
JavaScript 前端开发 索引
带你手写一个对象,深入理解可迭代对象是什么,与类数组有什么区别
带你手写一个对象,深入理解可迭代对象是什么,与类数组有什么区别
175 0
带你手写一个对象,深入理解可迭代对象是什么,与类数组有什么区别
|
算法 Java
深拷贝一个对象会了,怎么深拷贝一个图?
在前面,我写过一篇Java的深浅拷贝,那是基于对象的拷贝,但放眼数据结构与算法中,你有考虑过怎么拷贝一个图吗?(无向图)
205 0
深拷贝一个对象会了,怎么深拷贝一个图?
|
JavaScript
自定义深拷贝函数
JS查漏补缺系列是我在学习JS高级语法时做的笔记,通过实践费曼学习法进一步加深自己对其的理解,也希望别人能通过我的笔记能学习到相关的知识点。这一次我们来试着自定义深拷贝函数
102 0