深入解读深拷贝与浅拷贝

时间:2022-07-08 19:54:20

1.为什么会有深拷贝与浅拷贝?

  目的:我们要实现一个对象的拷贝,不想改变原来的对象

  这样的话我们会有两种解决方案;一个就是浅拷贝,一个是深拷贝

1.什么是浅拷贝?

   当一个对象只有单层的情况下,我们就可以使用浅拷贝来实现我们的目的;

   当一个对象是多层情况下,我们使用浅拷贝的话,就不会有以上的效果,所以我们引入深拷贝

2.什么是深拷贝?

 当一个对象不管是多层还是单层的情况下都可以实现我们想要的目的

3.如何实现浅拷贝

    var obj = {a:1,b:2,c:3}
    var obj1 = Object.assign({},obj)
    obj1.a = 4
    console.log(obj.a)   //1
    console.log(obj1.a)  //4

 

var obj = {a:1,b:2,c:3}
var obj1 = {...obj}
obj1.a = 4
console.log(obj.a)   //1
console.log(obj1.a)  //4

 

var obj = {a:1,b:2,c:3}
 function copy(obj){
  let newObj = {}
  for(var key in obj){
    newObj[key] = obj[key];
  }
  return newObj;
 }
 var obj1 = copy(obj1);
 obj1.a = 4;
 console.log(obj.a);  //1
 console.log(obj1.a); //4

 

  var obj = {a:1,b:2,c:3};
  var obj1 = $.extends({},obj);
  obj1.a = 4;
  console.log(obj.a)  //1
  console.log(obj1.a)  //4

 

4.如何实现深拷贝?

   var obj = {a:{x:1,y:2}}
   var obj1 = $.extend(true,{},obj)   //参数一为true,实现深拷贝
   obj1.a.x = 3
   console.log(obj)   //{a:{x:1,y:2}}
   console.log(obj1)  //{a:{x:3,y:2}}

  

 var obj = {a:{x:1,y:2}}   //对象中不可以出现函数
 var obj1 = JSON.parse(JSON.stringify(obj))
 obj.a.x = 3
 console.log(obj1)  //{a:{x:3,y:2}}
 console.log(obj)   //{a:{x:1,y:2}}