Js实现深克隆和浅克隆的方法！

桃扇骨 2022-09-03 11:28 177阅读 0赞

## 深克隆和浅克隆的定义 ##

### 浅克隆定义： ###

> 直接将存储在栈中的值赋值给对应变量，如果是基本数据类型，则直接赋值对应的值，如果是引用类型，则赋值的是地址。

### 浅克隆代码： ###

function lowClone(Clone){ 
             let obj={ };
             for(let key in Clone){ 
                 obj[key]=Clone[key]
             }
               return obj;
          }
    let a = { 
                name: "jack",
                class:[1,2,3],
                love:{ 
                    eat:"delicious food!",
                    drink:"milk"
                }
            }
    let res=lowClone(a)

**展示结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]  
**小结：可以发现使用浅克隆，如果修改的是引用类型，则原来的对象也会修改，若修改的基本数据类型则不会影响。**

### 深克隆定义： ###

> 把数据赋值给对应的变量，从而产生一个与源数据不相干的新数据(数据地址已变化)。深克隆是克隆对象各个层级的属性。

### 深克隆代码（递归思想）： ###

**展示结果：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]  
**小结：可以发现使用深克隆，如果修改的是引用类型，则原来的对象不会修改，此时新的对象地址已经变化，不再会受影响。**  
**注意：如果obj里有RegExp、Error对象，还需做其他的处理。**

另外一种方式可以**简单粗暴实现深克隆**

var b = JSON.parse(JSON.stringify(a));

使用上述方法时需要注意几点：

> 1、如果obj里面有时间对象，则JSON.stringify后再JSON.parse的结果，时间将只是字符串的形式。而不是时间对象
> 
> 2、如果obj里有RegExp、Error对象，则序列化的结果将只得到空对象；
> 
> 3、如果obj里有函数，undefined，则序列化的结果会把函数或 undefined丢失；
> 
> 4、如果obj里有NaN、Infinity和-Infinity，则序列化的结果会变成null
> 
> 5、JSON.stringify()只能序列化对象的可枚举的自有属性，例如如果obj中的对象是有构造函数生成的，则使用JSON.parse(JSON.stringify(obj))深拷贝后，会丢弃对象的constructor；
> 
> 6、如果对象中存在循环引用的情况也无法正确实现深拷贝；

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center]: /images/20220829/86862b0f5ed440c28c03001533336260.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1dzaDIwMjEwMzAx_size_16_color_FFFFFF_t_70_pic_center 1]: /images/20220829/9adde02fe16443849472b7aa9b4a9898.png