深浅拷贝

深浅拷贝针对的是 对象类型，如果是字符串的数组用[...arr]，还是不会影响

要区分针对数组的深浅拷贝(默认情况为里面没有对象的数组)，与针对对象的深浅拷贝

JavaScript数组深拷贝和浅拷贝的两种方法

let a1 = [1, 2];
let a2 = a1;

a2[0] = 2;
a1 // [2, 2]
这个是复制了指向底层数据结构的指针
--

let a1 = [1, 2];
let a2 = [...a1];
这个是a1会返回原数组的克隆，再修改a2就不会对a1产生影响
--

let a1 = [{foo:1}];
let a2 = [...a1];
a1[0].foo=2
a2[0].foo ===>2
这时a1数组里是对象，a2克隆过去的话，对象里的值还是会随着修改


深拷贝普遍的方法是对对象的子对象进行递归拷贝
// 递归实现一个深拷贝
function deepClone(source){
   if(!source || typeof source !== 'object'){
     throw new Error('error arguments', 'shallowClone');
   }
   var targetObj = source.constructor === Array ? [] : {};
   for(var keys in source){
      if(source.hasOwnProperty(keys)){
         if(source[keys] && typeof source[keys] === 'object'){
           targetObj[keys] = source[keys].constructor === Array ? [] : {};
           targetObj[keys] = deepClone(source[keys]);
         }else{
           targetObj[keys] = source[keys];
         }
      } 
   }
   return targetObj;
}


有一个用JSON对象中的parse和stringify来实现深拷贝
但是源对象的方法在拷贝的过程中丢失了，这是因为在序列化JavaScript对象时，所有函数和原型成员会被有意忽略

// 利用JSON序列化实现一个深拷贝
function deepClone(source){
  return JSON.parse(JSON.stringify(source));
}
var o1 = {
  arr: [1, 2, 3],
  obj: {
    key: 'value'
  },
  func: function(){
    return 1;
  }
};
var o2 = deepClone(o1);
console.log(o2); // => {arr: [1,2,3], obj: {key: 'value'}}

js 深拷贝 vs 浅拷贝 思维导图

image

---

对于字符串类型，浅复制是对值的复制，对于对象来说，浅复制是对对象地址的复制，并没 有开辟新的栈，也就是复制的结果是两个对象指向同一个地址，修改其中一个对象的属性，则另一个对象的属性也会改变，而深复制则是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性。深复制实现代码如下：
第一种方法、通过递归解析解决
第二种方法：通过JSON解析解决
作者：六师兄Leon
链接：https://www.zhihu.com/question/23031215/answer/124017500

---

JavaScript 原生js深拷贝的实现

function deepCopy(initalObject,finalObject){
  var finalObject = finalObject || {} 
  // 处理未输入新对象的情况
  for(var key in initalObject){
    if(initalObject[key] === initalObject){
      continue
    }
    if(typeof initalObject[key] === "object"){
      finalObject[key] = (initalObject[key].constructor === Array) ? [] : Object.create(initalObject[key])  //通过Object.create()方法构造新的对象
    }else{
      finalObject[key] = initalObject[key]
    }
  }
  return finalObject
}

header 1	header 2
row 1 col 1	row 1 col 2
row 2 col 1	row 2 col 2