记录一下最近在学的深浅拷贝

前言

最近写代码常常用到深浅拷贝，从一开始的闷头使用渐渐想要深究其理，这篇文章记录一下个人认为，有所不足，恭请指正

咱们能够先看看一个常遇到的一个小问题

let a = {
    age:1
}
let b = a
a.age = 2
console.log(b.age)   //2

从上面的例子中咱们看到了，若是给一个变量赋值一个对象，那么二者的值会是同一个引用，其中一方变化，另外一方也会有相应的改变。
一般咱们开发中不但愿出现这样的问题，咱们可使用浅拷贝来解决这个问题。

浅拷贝

首先能够经过 Object.assign 来解决这个问题。

let a = {
    age:1
}
let b = Object.assign({} , a)
a.age = 2
console.log(b.age)   //1

固然大多数状况咱们比较喜欢经过展开运算符（...）来解决

let a = {
        age:1
    }
    let b ={...a} 
    a.age = 2
    console.log(b.age)   //1

一般浅拷贝就解决了大部分问题，可是若是遇到如下状况就须要用到深拷贝了

let a = {
            age:1，
            jobs:{
            first：'FE'
            }
        }
        let b ={...a} 
        a.jobs.first = 'native'
        console.log(b.jobs.first)   //native

浅拷贝只解决了第一层的问题，若是接下去的值仍是有对象的话，那么就又回到刚刚的开始问题了。二者享有相同的引用。要解决这个问题，咱们就要引入深拷贝。

深拷贝

这个问题一般能够经过 JSON.parse(JSON.stringify(object)) 来解决。

let a = {
                age:1，
                jobs:{
                first：'FE'
                }
            }
            let b =JSON.parse(JSON.stringify(a))
            a.jobs.first = 'native'
            console.log(b.jobs.first)   //FE

可是该方法也是有局限性的：

• 会忽略underfind
• 不能序列化函数
• 不能解决循环引发的对象

咱们再看一下下面这个状况

let obj ={
 
    a:undefined,
    b:function(){},
    name:'yck'
    
   }

   let newObj = JSON.parse(JSON.stringify(obj))
   console.log(newObj) //{name : 'yck'}

你会发如今上述状况中，该方法忽略掉函数和undefind
可是在一般状况下，复杂数据都是可序列化的，因此这个函数能够解决大部分问题，而且该函数是内置函数中处理深拷贝性能最快的。固然若是你的数据中含有以上三种状况下。可使用 lodash 的深拷贝函数
若是你所须要拷贝的对含有内置类型而且不包括函数，可使用 MessageChannel

function structuralClone(obj){
      return new Promise(resolve => {
          const {port1,port2} = new MessageChannel();
          port2.onmessage = ev =>resolve(ev.data);
          port1.postMessage(obj)
      })
  }
  var obj = {a:1,b:{
      c:b
  }}
  //注意这个方法是异步的
  //能够处理undefined和循环引用对象
  const clone = await structuralClone(obj);

深拷贝与浅拷贝的区别

深拷贝和浅拷贝最根本的区别在因而否是真正获取了一个对象的复制实体，而不是引用。

浅拷贝—-只是拷贝了基本类型的数据，而引用类型数据，拷贝后也是会发生引用，咱们把这种拷贝叫作“（浅复制）浅拷贝”，换句话说，浅拷贝仅仅是指向被拷贝的内存地址，若是原地址中对象被改变了，那么浅拷贝出来的对象也会相应改变。

深拷贝—-在计算机中开辟了一块新的内存地址用于存放复制的对象。

浅拷贝实例
//此递归方法不包含数组对象

var obj = { a:1, arr: [2,3] };
var shallowObj = shallowCopy(obj);

function shallowCopy(src) {
  var newobj = {};
  for (var prop in src) {
    if (src.hasOwnProperty(prop)) {
      newobj[prop] = src[prop];
    }
  }
  return newobj;

由于浅复制只会将对象的各个属性进行依次复制，并不会进行递归复制，而 JavaScript 存储对象都是存地址的，因此浅复制会致使 obj.arr 和 shallowObj.arr 指向同一块内存地址，大概的示意图以下。

致使的结果就是：

shallowObj.arr[1] = 5;
console.log(obj.arr[1]);   //  5

深拷贝实例
而深复制则不一样，它不只将原对象的各个属性逐个复制出去，并且将原对象各个属性所包含的对象也依次采用深复制的方法递归复制到新对象上。这就不会存在上面 obj 和 shallowObj 的 arr 属性指向同一个对象的问题。

var obj = { 
    a:1, 
    arr: [1,2]，
    nation : '中国',
    birthplaces:['北京','上海','广州']
};
var obj2 = {name:'杨'};
obj2 = deepCopy(obj,obj2);
console.log(obj2);
//深复制，要想达到深复制就须要用递归
function deepCopy(o,c){
   var c = c || {}；
   for(var i in o){
   if(typeof o[i] === 'object'){
          //要考虑深复制问题了
          if(o[i].constructor === Array){
            //这是数组
            c[i] =[]；
          }else{
            //这是对象
            c[i] = {}；
          }
          deepCopy(o[i],c[i])；
        }else{
          c[i] = o[i]；
        }
     }
     return c
 }

结果以下面的示意图所示：

这样obj和obj2分别拥有不一样的内存地址，两边值的改变互不影响。

深浅拷贝也可使用JQuery的extend方法，注意使用合并返回值

let newObj = $.extend(true,{},partcontent);