浅析JS深浅拷贝及其实现

1.浅拷贝

平时写拷贝最直接的写法一般是：

 const obj={
        name:'liming',
        age:18
    }
    const obj_copy=obj
    console.log(obj)
    console.log(obj_copy)

控制台打印：

{name: "liming", age: 18}
{name: "liming", age: 18}

这样会导致一个问题： 当我们修改obj_copy中的属性时，他的母体即obj也会相应发生改变

//当我们给obj_copy新增一个city属性时，会发现在obj中也新加了一个city属性

  obj_copy.city='beijing'
  console.log(obj)
  console.log(obj_copy)
//控制台打印:
  {name: "liming", age: 18, city: "beijing"}
  {name: "liming", age: 18, city: "beijing"}

这是什么原因呢？ 我们知道，内存中分栈区和堆区，当我们创建了一个对象，那么会在堆区中开辟出一个空间来存储他，同时，这个空间的地址（也就是指针）可以在栈区中。

浅拷贝只是拷贝了obj的地址，新生成的对象还是会指向obj这片空间，所以修改了obj_copy，母体obj也会跟着改变。

2.深拷贝

深拷贝复制出来的对象使完全独立的。下面介绍几种深拷贝的实现方法：

（1）JSON.stringify和JSON.parse

 const obj={
        name:'liming',
        age:18
    }
    //拷贝
    const obj_copy=JSON.parse(JSON.stringify(obj))
    
    //控制台打印obj和obj_copy
    {name: "liming", age: 18}
    {name: "liming", age: 18}
    
    
    当我们给obj_copy新增一个属性时，
    obj_copy.city='beijing'
    
    再次控制台打印obj和obj_copy
    {name: "liming", age: 18}
    {name: "liming", age: 18, city: "beijing"}

这时候我们发现obj并没有跟随Obj_copy的改变而发生变化，深拷贝成功。

（2）我们可以利用循环，把obj中的属性遍历出来，再添加进obj_copy中，他们在地址上仍然没有任何交集

   const obj={
         name:'liming',
         age:18
     }
  const obj_copy{}

//创建obj_copy空对象
  const obj_copy={}
  
//遍历obj并对obj_copy进行赋值
    for(var i in obj){
        obj_copy[i] = obj[i]
    }
    
    //此时控制台打印obj和obj_copy：
    {name: "liming", age: 18}
    {name: "liming", age: 18}
    
    //当我们增加obj_copy的属性:
    obj_copy.city='beijing'
    
    此时控制台打印：
    {name: "liming", age: 18}
    {name: "liming", age: 18, city: "beijing"}

深拷贝成功。

（3）ES6中的扩展运算符：...（简单又好使）

const obj={
        name:'liming',
        age:18
    }
const obj_copy={...obj}

//此时控制台打印：
{name: "liming", age: 18}
{name: "liming", age: 18}

 //当我们增加obj_copy的属性:
obj_copy.city='beijing'
    
//此时控制台打印：
{name: "liming", age: 18}
{name: "liming", age: 18, city: "beijing"}

深拷贝成功。

（4）lodash.js(提高JS原生方法性能的JS库)中的cloneDeep()方法

const obj={
        name:'liming',
        age:18
    }
const obj_copy=lodash.cloneDeep(obj);

//此时控制台打印：
{name: "liming", age: 18}
{name: "liming", age: 18}

 //当我们增加obj_copy的属性:
obj_copy.city='beijing'
    
//此时控制台打印：
{name: "liming", age: 18}
{name: "liming", age: 18, city: "beijing"}

ps:Object.assign 这个方法只会对只是一级属性复制，比浅拷贝多深拷贝了一层而已,并不能用于深拷贝。

以上是我对深浅拷贝的一些理解，有不对或者不准确的地方还希望大家多多指正0.0