js对象深拷贝和浅拷贝的问题的简单讲解！

 

想必刚接触javascript的同学应该遇到过一个问题，将一个对象复制一份用一个新的变量来存起来，然后再来操作这个新变量的时候，奇怪的事情发生了，我只修改了副本，为什么原对象却跟着改变了？？？？

这就涉及到了对象拷贝相关的知识点了。

对象拷贝分为深拷贝和浅拷贝，而浅拷贝和深拷贝都是对于JS中的引用类型而言的，浅拷贝就只是复制对象的引用（堆和栈的关系，简单类型Undefined，Null，Boolean，Number和String是存入堆，直接引用，object array 则是存入桟中，只用一个指针来引用值），如果拷贝后的对象发生变化，原对象也会发生变化。只有深拷贝才是真正地对对象的拷贝。

---

浅拷贝：

浅拷贝的意思就是只复制引用（指针），而未复制真正的值。

比如我们在日常开发中用得最多的就是 通过 = 来进行赋值，这就实现了一个浅拷贝。

深拷贝：

深拷贝就是对目标的完全拷贝，不像浅拷贝那样只是复制了一层引用，就连值也都复制了。

只要进行了深拷贝，它们老死不相往来，谁也不会影响谁。

目前实现深拷贝的方法不多，主要是两种：

1.利用 JSON 对象中的 parse 和 stringify

JSON.parse 是将一个 JSON 字符串转成一个 JavaScript 值或对象。

很好理解吧，就是 JavaScript 值和 JSON 字符串的相互转换。

它能实现深拷贝呢？我们来试试。

const originArray = [1,2,3,4,5];

const cloneArray = JSON.parse(JSON.stringify(originArray));

console.log(cloneArray === originArray); // false

确实是深拷贝，也很方便。但是，这个方法只能适用于一些简单的情况。 比如下面这样的一个对象就不适用：

const originObj = {
  name:'axuebin',
  sayHello:function(){
    console.log('Hello World');
  }
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = JSON.parse(JSON.stringify(originObj));
console.log(cloneObj); // {name: "axuebin"}

 

发现在 cloneObj 中，有属性丢失了。。。那是为什么呢？

undefined、function、symbol 会在转换过程中被忽略。。。

总结：如果对象中含有一个函数时（很常见），就不能用这个方法进行深拷贝。

2.利用递归来实现每一层都重新创建对象并赋值

递归的思想就很简单了，就是对每一层的数据都实现一次 创建对象->对象赋值 的操作，简单粗暴上代码：

function deepClone(source){
  const targetObj = source.constructor === Array ? [] : {}; // 判断复制的目标是数组还是对象
  for(let 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;
}

 我们来试试：

const originObj = {a:'a',b:'b',c:[1,2,3],d:{dd:'dd'}};

const cloneObj = deepClone(originObj);

console.log(cloneObj === originObj); // false

 

结果是完全没有问题的，下面再来试试带有函数的：

const originObj = {
  name:'axuebin',
  sayHello:function(){
    console.log('Hello World');
  }
}
console.log(originObj); // {name: "axuebin", sayHello: ƒ}
const cloneObj = deepClone(originObj);
console.log(originObj===cloneObj); // false

也是可以搞定的！参考于https://www.cnblogs.com/dabingqi/p/8502932.html