变量存储类型

在理解拷贝之前我们要先熟悉变量存储类型变量的数据类型分为基本数据类型（值类型）和复杂数据类型（引用数据类型）
基本数据类型的值是直接存放在栈内存的而复杂数据类型的栈内存保存的是内存地址值都是保存在堆内存中
在这里插入图片描述

浅拷贝

我们通过一个案例来进行理解浅拷贝
如下所示
我们让obj1对obj进行了一次拷贝（浅拷贝）并打印
在这里插入图片描述

这时候如果我们修改了属性会怎么样

obj.color.push('blue');

发现他们同时都增加了
在这里插入图片描述

概念

我们可以理解为浅拷贝就是创建一个新对象这个对象有着被拷贝对象的对象属性值
如果是基本数据类型拷贝的就是这个基本数据类型的值改变新对象不会导致原来的数据发生改变
如果属性是复杂数据类型拷贝的就是复杂数据类型的内存地址
所以如果其中一个对象改变了这个地址就会影响到另外一个对象就会导致原数据发生改变
这里借用GitHub中ConardLi大佬的图片来方便我们理解
在这里插入图片描述

浅拷贝使用

方法一 Object.assign()

语法 Object.assign(target, … sources)
第一个参数是目标对象
第二分参数是原对象（也就是被拷贝的对象）
这是es6提供给我们的新方法我们使用的时候需要注意兼容性的问题
还有个需要注意的是这个方法一般用来浅拷贝对象用来处理数组的时候会把数组视为对象

let obj  ={
      name:'x',
      age:18,
      color:['red','green',[1,2,3],{
        sex:'man'
      }],
    }
    let obj1 = Object.assign({}, obj)
    obj.color.push('blue');
    console.log(obj);
    console.log(obj1);

在这里插入图片描述

方法2 forin循环

let obj  ={
      name:'x',
      age:18,
      color:['red','green',[1,2,3],{
        sex:'man'
      }],
    }
    let obj1 = {}
    for(let k in obj) {
      obj1[k] = obj[k]
    }
    obj.color.push('blue');
    console.log(obj);
    console.log(obj1);

方法3 利用展开运算符进行浅拷贝

let obj ={
    name:'ss',
    age:18,
    color:['green','blue']
  }
  let obj1 = {...obj}
  // console.log(obj1);
  obj1.color.push('red')
  console.log(obj);
  console.log(obj1);

深拷贝

概念

深拷贝指的是将被拷贝的对象从内存中完全拷贝一份出来在堆内存中开辟一个新的区域来存放新对象并且修改新对象不会影响原来对象
我们在借用一次 GitHub中ConardLi大佬的图片来方便我们理解
在这里插入图片描述

方法

方法一浅拷贝 + 递归

let obj  ={
      name:'x',
      age:18,
      color:['red','green',[1,2,3],{
        sex:'man'
      }],
    }
    let obj1 = {}
    function deepClone(obj,oldobj) {
      for (var key in oldobj) {
       var item = oldobj[key];
       if(item instanceof Array){
         obj[key] = []
         deepClone(obj[key],item)
       }else if(item instanceof Object){
         obj[key] = {}
         deepClone(obj[key],item)
       }else{
         obj[key] = oldobj[key]
       }
        }
      }
       deepClone(obj1,obj)
        obj1.color.push('ss') 
       console.log(obj1);
       console.log(obj);

在这里插入图片描述
我们会发现原来数据并没有被修改

方法2 JSON.parse(JSON.stringify())

乍看 JSON.parse(JSON.stringify()) 不太明白我们来解释一下
JSON.parse() 是一个生成新对象的方法
JSON.stringify() 是把原对象序列化为一个JSON字符串
简单的说就是先把源对象序列化为一个JSON字符串然后利用JSON.parse()方法转变为一个新对象
这也是我们最常用的方法
我们来使用看看结果如何

let obj  ={
      name:'x',
      age:18,
      color:['red','green',[1,2,3],{
        sex:'man'
      }],
    }
    let obj1 = JSON.parse(JSON.stringify(obj))
     obj1.color.push('ss')
       console.log(obj1);
       console.log(obj);