当前位置:网站首页 > Vue.js开发 > 正文

js实现深拷贝和浅拷贝(js实现深拷贝和浅拷贝的方法)



在 JavaScript 开发工作中,我们经常会碰到需要进行深拷贝的情况,而且在面试中也经常会问到这个问题,那么什么是浅拷贝,什么是深拷贝?

关于浅拷贝的概念,我在网上看到一种说法,直接上代码。

 
  

但是我个人认为,上面这个根本不涉及拷贝,只是一个简单的引用赋值。以我的理解,浅拷贝应该是不考虑对象的引用类型的属性,只对当前对象的所有成员进行拷贝,代码如下:

 
  

上面这段代码中,对象拥有两个基本类型的属性和,一个引用类型的属性,当使用如上方法进行拷贝的时候,和属性会被正常的拷贝,但是属性,只会进行引用的拷贝,这样会导致拷贝出来的对象和会共用一个对象。这样就是所谓的浅拷贝。

深拷贝的就是在拷贝的时候,需要将当前要拷贝的对象内的所有引用类型的属性进行完整的拷贝,也就是说拷贝出来的对象和原对象之间没有任何数据是共享的,所有的东西都是自己独占的一份。

实现深拷贝需要考虑如下几个因素:

  • 传入的对象是使用对象字面量{}创建的对象还是由构造函数生成的对象

  • 如果对象是由构造函数创建出来的,那么是否要拷贝原型链上的属性

  • 如果要拷贝原型链上的属性,那么如果原型链上存在多个同名的属性,保留哪个

  • 处理循环引用的问题

我们可以通过方法来完成深复制。值得庆幸的是,我们在中可以通过添加一个参数来实现递归。调用就可以实现深复制,参考下面的例子:

 
  

但是的这个方法,有弊端,什么弊端呢?我们看下面的例子:

 
  

也就是说,中的并没有处理循环引用的问题。

使用全局对象的和方法来实现深复制也算是一个简单讨巧的方法。

 
  

然而使用这种方法会有一些隐藏的坑,它能正确处理的对象只有 , , , , 扁平对象,即那些能够被 直接表示的数据结构。

下面我们给出一个简单的解决方案,当然这个方案是参考别人的方式来实现的。希望对大家有用。

 
  

以上就是关于拷贝的一些知识了,希望对大家有所帮助,对有兴趣的同学可以看一下教程

JavaScript教程:https://www.w3cschool.cn/javascript/

JavaScript微课:https://www.w3cschool.cn/minicourse/play/jscourse

到此这篇js实现深拷贝和浅拷贝(js实现深拷贝和浅拷贝的方法)的文章就介绍到这了,更多相关内容请继续浏览下面的相关推荐文章,希望大家都能在编程的领域有一番成就!

版权声明


相关文章:

  • admin登录用户名192.168.1.1(admin登录用户名192.168.100.1)2025-12-04 13:27:10
  • js数组方法中,哪些不能改变自身数组(js数组中哪些方法可以改变自身数组)2025-12-04 13:27:10
  • vue3生命周期钩子函数(vue3生命周期钩子函数有哪些)2025-12-04 13:27:10
  • 反激电源占空比可以超过0.5吗(反激电路占空比能不能大于50%)2025-12-04 13:27:10
  • vue路由守卫有几种(vue3 路由守卫)2025-12-04 13:27:10
  • cjson库(cjson库下载)2025-12-04 13:27:10
  • ubuntu镜像文件怎么安装(ubuntu12.04镜像文件)2025-12-04 13:27:10
  • pcie5.0固态硬盘推荐(pcie 4.0固态硬盘)2025-12-04 13:27:10
  • jshy是哪里烟草(jsjs310116107是哪里烟草公司)2025-12-04 13:27:10
  • js深拷贝和浅拷贝的区别(js深拷贝和浅拷贝如何实现)2025-12-04 13:27:10
  • 全屏图片