js深拷贝和浅拷贝区别

浅拷贝和深拷贝的区别

   1.浅拷贝：将源对象或者原数组的引用 ```直接赋给``` 新对象/新数组 ，新对象/新数组只是```对原对象的一个引用```
   2.深拷贝：创建一个新的对象或者数组，将源对象的各项属性的值拷贝过来

是“值”而不是“引用”

为什么要使用深拷贝

  希望在改变新数组/对象的时候，不改变原数组/对象

深拷贝的要求程度

  我们在使用深拷贝的时候，一定要弄清楚我们对深拷贝的要求程度：
  是仅仅“深”拷贝第一层级的对象属性或数组元素，还是递归拷贝所有层级的对象属性和数组元素？

简单的对象深拷贝使用JSON.parse 和JSON.stringify 但是遇到undefined、function、Symbol的时候会在转换过程中忽略，也就是复制不了这些类型的数据。eg:

var syb = Symbol('obj');
var person = {
  name:'tino',
  say:function(){
     console.log('hi')  
  }，
  ok:syb,
  un:undefined
};
var copy = JSON.parse(JSON.stringify(person));  //{name:'tino'}

如上所述，如果要复制的对象里面含有这些数据将不被拷贝，然后我们再换一个方法，我们自己封装一个函数来解决。

var arr = [{name:"塞内加尔",color:"pink"},{name:"乌斯怀亚",color:"orange"}];
function deepCopy(obj){
  var result = Array.isArray(obj)?[]:{};
  for(var key in obj){
    if(obj.hasOwnProperty(key)){
      if(typeof obj[key]==="object"){
        result[key] = deepCopy(obj[key]); //递归复制
      }else{
        result[key] = obj[key];
      }
    }
  }
return result;
}
console.log(deepCopy(person));
//{
//  name:'tino',
//  say:function(){
//     console.log('hi')  
 // }，
 // ok:syb,
 // un:undefined
//}
console.log(arr);// [{name:"塞内加尔",color:"pink"},{name:"乌斯怀亚",color:"orange"}]

如何检验深拷贝成功

  改变任意一个新对象/数组的值，如果原对象/数组的值不变就成功，否则失败。

浅拷贝的第一种方法

  function copyFunc(data){
    let obj = {};
    for(let i in data){
      obj[i] = data[i];
    }
    return obj;
  }
  var obj = {
      a:"hello",
      b:{
        a:"world",
        b:21  
      },
      c:["Bob","Tom","Jenny"],
      d:function(){
          alert("hello world")
       }
  };
  var qiancopy =copyFunc(obj);
  qiancopy.a = "a is changed";
  qiancopy.b.a = "b.a is changed";
  qiancopy.b.b = "b.b is changed";
  qiancopy.c = [1,2,3];
  qiancopy.d = function(){
    alert('d is changed')
  };
console.log('a-'+obj.a);  //'hello'
console.log('a-'+qiancopy.a) ; //'changed'
console.log('b.a-'+obj.b.a);// 'b.a is changed'
console.log('b.a-'+qiancopy.b.a) ;// 'b.a is changed'
console.log('b.b-'+obj.b.b); //'b.b is changed'
console.log('b.b-'+qiancopy.b.b)  ; // 'b.b is changed'
console.log('c-'+obj.c); //'["Bob","Tom","Jenny"]'
console.log('c-'+qiancopy.c)  ; //[1,2,3]
console.log('d-'+obj.d); //function(){alert('hello world')}
console.log('d-'+qiancopy.d)  ; //function (){alert("d is changed")} 
//事实上就是只有对象是拷贝的引用类型

image.png

对象的值改变是因为浅拷贝他们的值指向同一个对象

浅拷贝就是拷贝了一层，除了对象是拷贝的引用类型，其他都是直接将值传递，有自己的内存空间的。

浅拷贝的第二种方法

ES6的Object.assign()方法，object.assign是es6的新函数。Object.assign()方法可已经任意多个的原对象自身的可枚举属性拷贝给目标对象，然后返回目标对象。但是object.assign()进行的是浅拷贝，拷贝的是对象的属性的引用，而不是对象本身。

  var obj2= {
    a:"1",
    b:{
      a:"b.a",
      b:"b.b"
    },
    e:3
  }
var copyAssign = Object.assign({},obj,obj2);//obj为上面定义的
//如果引用的源对象有属性重复，去最后那个，如果有新属性，直接加进去