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

js深拷贝(js深拷贝的三种实现方式)



浅拷贝是创建一个新对象,这个对象有着原始对象属性值的拷贝。如果属性是基本类型,拷贝的就是基本类型的值,如果属性是引用类型,拷贝的是内存地址 。

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

先将需要拷贝的对象进行JSON字符串化,然后再pase解析出来,赋给另一个变量,实现深拷贝。

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

es6新增的方法,可用于对象合并,将源对象的所有可枚举属性,复制到目标对象上。

可以看到这个API可以将源对象上的全部数据类型属性值完全复制到一个新的对象上,这难道就是我们所寻找的最完美的深拷贝方式了吗?答案是否,只能说是部分深拷贝,或者说就是浅拷贝,为什么这么说呢,接着往下看。

结果很明显,这种方式的拷贝,如果源目标对象中某个属性值是对另一个对象的引用,那么这个属性的拷贝仍然是对引用的拷贝。

比之前的1.0版本多了个存储对象的容器WeakMap,思路就是,初次调用deepCopy时,参数会创建一个WeakMap结构的对象,这种数据结构的特点之一是,存储键值对中的健必须是对象类型。

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

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

到此这篇关于JS深拷贝的4种实现方法的文章就介绍到这了,更多相关JS深拷贝内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

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

版权声明


相关文章:

  • cnpmjs github镜像(github镜像简书)2025-12-07 11:54:05
  • vue钩子函数详解(vue钩子函数有哪些含义)2025-12-07 11:54:05
  • 跨域解决方案java(跨域解决方案vue)2025-12-07 11:54:05
  • Ubuntu换源后仍无法定位软件包(ubuntu20.04无法定位软件包)2025-12-07 11:54:05
  • vue安装router命令(vue-router.js下载)2025-12-07 11:54:05
  • cnpmjs github镜像(github 镜像下载)2025-12-07 11:54:05
  • 服务器怎么运行python(服务器怎么运行js)2025-12-07 11:54:05
  • js数组方法splice(js数组方法改变原数组)2025-12-07 11:54:05
  • pcie 5.0固态(pcie50固态硬盘推荐)2025-12-07 11:54:05
  • js slice深拷贝(js的深拷贝和浅拷贝)2025-12-07 11:54:05
  • 全屏图片