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

js深拷贝实现方式(js深拷贝json parse)



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

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

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

 

1.1 JSON.parse(JSON.stringify(obj))深浅拷贝的缺陷

 

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

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

 

 

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

 

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

 

3.1、解决循环引用和symblo类型

 
 

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

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

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

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

版权声明


相关文章:

  • redhat6.0安装教程(redhat6.5安装教程)2025-04-05 08:09:09
  • vmware2016密钥(vmware16.1密钥)2025-04-05 08:09:09
  • jsjsjsjsj是什么意思(sjsjdjsjs是什么意思)2025-04-05 08:09:09
  • vb6.0名词解释大全(b6d2f1名词解释)2025-04-05 08:09:09
  • jsj是哪个明星名字缩写(jyj是哪个明星缩写)2025-04-05 08:09:09
  • ubuntu20.04更新源(ubuntu更新源有什么用)2025-04-05 08:09:09
  • vue3.0父子组件传值(vue中的父子组件传值)2025-04-05 08:09:09
  • vue2和vue3区别大吗(vue2与vue3的区别)2025-04-05 08:09:09
  • vue父子组件的传值(vue父子组件传值v-model)2025-04-05 08:09:09
  • vue2生命周期啥时候做(vue生命周期分别做了什么)2025-04-05 08:09:09
  • 全屏图片