2025年js深拷贝对象的方法(js 深拷贝对象)

js深拷贝对象的方法(js 深拷贝对象)svg xmlns http www w3 org 2000 svg style display none svg

大家好,我是讯享网,很高兴认识大家。



 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;"> <path stroke-linecap="round" d="M5,0 0,2.5 5,5z" id="raphael-marker-block" style="-webkit-tap-highlight-color: rgba(0, 0, 0, 0);"></path> </svg> <p></p> 

讯享网


js中的对象深拷贝在项目开发中较常用到,本文介绍一下Js对象拷贝的几种实现方法,以及如何深拷贝。


浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是引用内存地址。可以称之为拷贝了,但没完全拷贝。

深拷贝是对象从内存中完整的拷贝一份出来,从堆内存中开辟一个新的区域来存放新对象,所以修改新对象不会影响原对象。如果不进行深拷贝,其中一个对象改变了浅拷贝所拷贝的引用值内部的属性,就会影响到另一个对象的属性值。

代码如下(示例):

讯享网

此种方式可以深拷贝一个对象,但是这个对象的内容得符合一定的限制要求,才能真正的深拷贝而没有遗漏或拷贝偏差。下面列举这个方法的缺陷。

缺陷:

  1. 取不到值为 undefined 的 key;
  2. 如果对象里有函数,函数无法被拷贝下来;
  3. 无法拷贝 copyObj 对象原型链上的属性和方法;
  4. 对象转变为 date 字符串;
  5. NaN 转变为 null。

JSON 本来就不是专门为深拷贝而设计出来的,该方法的原理就是将对象先转换为 JSON 字符串,再从 JSON 字符串解析回 JavaScript 对象。JSON 所能保存的类型有限,转换为 JSON 字符串的过程中会按照 JSON 的一些规则处理,而无法保留原对象的所有细节。所以,如果深拷贝的应用场景无法接受这些细节的丢失,则不要使用这种方式深拷贝。


讯享网

代码如下(示例):

 

这种方式一种浅拷贝方法。它只会复制对象的第一层属性,而不会复制对象内部的所有嵌套属性。

Object.assign方法作用是将 targetObj 和 sourceObj 合并,返回值是合并后的 targetObj 的引用,而这个过程只进行了浅拷贝。

讯享网

解决循环引用和symblo类型

 

讯享网

初次调用deepCopy时,参数会创建一个WeakMap结构的对象,这种数据结构的特点之一是,存储键值对中的健必须是对象类型。

如果待拷贝对象中有属性也为对象时,则将该待拷贝对象存入weakMap中,此时的健是对该待拷贝对象的引用,值是拷贝结果对象的引用。然后递归调用该函数再次进入该函数,传入了上一个待拷贝对象的对象属性的引用和存储了上一个待拷贝对象引用的weakMap,因为如果是循环引用产生的闭环,那么这两个引用是指向相同的对象的,因此会进入if(hash.has())语句内,然后直接赋值return,退出函数,所以不会一直循环递归进栈,以此防止栈溢出。


上述的几种方式不管优缺点如何,共同点是只能拷贝对象的可枚举属性,对于不可枚举或者原型上的属性,却不能拷贝,但对于基本的使用来说,已经足够了。

小讯
上一篇 2025-06-11 15:24
下一篇 2025-06-09 19:32

相关推荐

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容,请联系我们,一经查实,本站将立刻删除。
如需转载请保留出处:https://51itzy.com/kjqy/146247.html