项目中遇到的问题 ----js 浅拷贝,深拷贝问题

场景: 项目中需要一个表格,表格有一列操作列,点击+ 的时候   拷贝当前行在当前行后添加一行

问题: 添加的新行会根据它的母行变化而变化。例:当点击母行单选项,新行也会变。点击新行单选项,母行也随之改变

 区别:浅拷贝只复制对象的第一层属性、深拷贝可以对对象的属性进行递归复制

浅拷贝就是拷贝了一层,除了对象是拷贝的引用类型,其他都是直接将值传递,有自己的内存空间的。

我的解决方法,是对拷贝出来的新一行数据进行json反解析项目中遇到的问题 ----js 浅拷贝,深拷贝问题_第1张图片

这样做是真正的Deep Copy,这种方法简单易用。

但是这种方法也有不少坏处,譬如它会抛弃对象的constructor。也就是深拷贝之后,不管这个对象原来的构造函数是什么,在深拷贝之后都会变成Object。这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象,即那些能够被 json 直接表示的数据结构。RegExp对象是无法通过这种方式深拷贝。也就是说,只有可以转成JSON格式的对象才可以这样用,像function没办法转成JSON。
项目中遇到的问题 ----js 浅拷贝,深拷贝问题_第2张图片

递归拷贝法 

项目中遇到的问题 ----js 浅拷贝,深拷贝问题_第3张图片

上述方法确实可以实现深拷贝。但是当遇到两个互相引用的对象,会出现死循环的情况。

为了避免相互引用的对象导致死循环的情况,则应该在遍历的时候判断是否相互引用对象,如果是则退出循环。

使用Object.create()方法

项目中遇到的问题 ----js 浅拷贝,深拷贝问题_第4张图片

Object.create() 方法会使用指定的原型对象及其属性去创建一个新的对象

https://blog.csdn.net/wang252949/article/details/79109437  有Object.create() 详细的解释以及用法

你可能感兴趣的:(学习笔记)