深拷贝与浅拷贝

深拷贝与浅拷贝

一、概念

1、浅拷贝

浅拷贝只是复制了对象的引用地址，两个对象指向同一个内存地址。所以其中一个对象修改其中任意的值，另一个对象对应的值也会随之变化。

2、深拷贝

深拷贝是将对象的值复制过来，两个对象修改其中任意的值另一个对象对应的值不会发生改变。

二、区别

    两者区别就在于，浅拷贝只是简单的复制，对对象里面的对象属性和数组属性只是复制了地址，并没有创建新的相同对象或者数组。而深拷贝是完完全全的复制一份，空间大小占用一样但是位置不同。

三、案例展示

1、浅拷贝

方案一：使用Object.assign(newObj, obj)

创建一个被拷贝对象 obj

  var obj = {
    id: 1,
    name: "jack",
    msg: {
      age: 18,
    },
  };

创建一个新的被拷贝对象 newObj

 var newObj = {};

浅拷贝 obj 到 newObj

let newObj = Object.assign({},obj)

    修改其中一个对象 obj 的 msg 属性中的 age 属性，对应的 newObj 属性的 msg 属性中的 age 属性也跟随改变。

    很明显修改其中一个对象id、name属性的值，不会改变另一个对象的id、name属性的值。

newObj.msg.age = 100
console.log(obj.msg.age)    // 100.修改obj newObj的对应属性也随之变化

方案二:手动实现

  var obj = {
    id: 1,
    name: "jack",
    msg: {
      age: 18,
    },
  };

  var newObj = {};

  for (key in obj) {
    // key是当前的属性名 obj[key]是当前属性值
    newObj[key] = obj[key];
  }

  console.log(newObj);
  newObj.id = 2;
  newObj.msg.age = 20;
  console.log(obj.id);
  console.log(newObj.id);
  console.log(obj.msg.age);

2、深拷贝

创建一个被拷贝对象 obj

var obj = {
    id: 1,
    name: "rose",
    msg: {
      age: 20,
    },
    color: ["red", "green"],
  };

创建一个新的被拷贝对象 newObj

 var newObj = {};

创建深拷贝的方法 deepCopy

  function deepCopy(newObj, obj) {
    for (key in obj) {
      // 判断属性值属于哪种数据类型
      // 属性值 obj[key]
      // 1、判断这个值是否为数组（数组也属于特殊对象，也是引用类型）
      if (obj[key] instanceof Array) {
        newObj[key] = [];
        deepCopy(newObj[key], obj[key]); // 运用递归，将原对象属性值给新对象
        // 判断这个值是否为对象
      } else if (obj[key] instanceof Object) {
        newObj[key] = {};
        deepCopy(newObj[key], obj[key]);
      } else {
        // 若是普通数据类型
        newObj[key] = obj[key];
      }
    }
  }

调用深拷贝的方法

  deepCopy(newObj, obj);

  console.log(newObj);