深拷贝&浅拷贝

Posted 2022-07-21 qing-5

一、什么是深拷贝&浅拷贝？

浅复制：

对于字符串类型，浅复制是对值的复制

对于对象来讲，浅复制是对对象地址的复制，并没有开辟新的栈，复制的结果是两个对象 指向 同一个地址 ，此时 修改 一个属性 的值，另一个对象 的属性也会发生变化

深复制

对于对象来讲，深复制是开辟新的栈，两个对象对应两个不同的地址，修改一个对象的属性，不会改变另一个对象的属性 

二、浅拷贝的实现 

1、只复制第一层的浅拷贝

function simpleCopy(obj1) 
   var obj2 = Array.isArray(obj1) ? [] : ;
   for (let i in obj1) 
   obj2[i] = obj1[i];
  
   return obj2;

var obj1 = 
   a: 1,
   b: 2,
   c: 
   d: 3
  

var obj2 = simpleCopy(obj1);
obj2.a = 3;
obj2.c.d = 4;
alert(obj1.a); // 1
alert(obj2.a); // 3
alert(obj1.c.d); // 4
alert(obj2.c.d); // 4

2、Object.assign()实现浅拷贝及一层的深拷贝

 

let obj1 = 
   a: 
     b: 1
   ,
   c: 2

let obj2 = Object.assign(,obj1)
obj2.a.b = 3;
obj2.c = 3
console.log(obj1.a.b); // 3
console.log(obj2.a.b); // 3
console.log(obj1.c); // 2
console.log(obj2.c); // 3

 

三、深拷贝的实现

 1、JS实现深拷贝

let obj1 = 
   a: 1,
   b: 2

let obj2 = 
   a: obj1.a,
   b: obj1.b

obj2.a = 3;
alert(obj1.a); // 1
alert(obj2.a); // 3

2、递归实现深拷贝

function deepCopy(obj1) 
      var obj2 = Array.isArray(obj1) ? [] : ;
      if (obj1 && typeof obj1 === "object") 
        for (var i in obj1) 
          var prop = obj1[i]; // 避免相互引用造成死循环，如obj1.a=obj
          if (prop == obj1) 
            continue;
          
          if (obj1.hasOwnProperty(i)) 
            // 如果子属性为引用数据类型，递归复制
            if (prop && typeof prop === "object") 
              obj2[i] = (prop.constructor === Array) ? [] : ;
              arguments.callee(prop, obj2[i]); // 递归调用
             else 
              // 如果是基本数据类型，只是简单的复制
              obj2[i] = prop;
            
          
        
      
      return obj2;
    
    var obj1 = 
      a: 1,
      b: 2,
      c: 
        d: 3
      
    
    var obj2 = deepCopy(obj1);
    obj2.a = 3;
    obj2.c.d = 4;
    alert(obj1.a); // 1
    alert(obj2.a); // 3
    alert(obj1.c.d); // 3
    alert(obj2.c.d); // 4

3、使用JSON.stringify和JSON.parse实现深拷贝：

JSON.stringify把对象转成字符串，再用JSON.parse把字符串转成新的对象；

function deepCopy(obj1)
    let _obj = JSON.stringify(obj1);
    let obj2 = JSON.parse(_obj);
    return obj2;
  
    var a = [1, [1, 2], 3, 4];
    var b = deepCopy(a);
    b[1][0] = 2;
    alert(a); // 1,1,2,3,4
    alert(b); // 2,2,2,3,4

缺陷：它会抛弃对象的constructor，深拷贝之后，不管这个对象原来的构造函数是什么，在深拷贝之后都会变成Object；这种方法能正确处理的对象只有 Number, String, Boolean, Array, 扁平对象，也就是说，只有可以转成JSON格式的对象才可以这样用，像function没办法转成JSON；

 

4、jQuery实现深拷贝

var $ = require(‘jquery‘);
var obj1 = 
   a: 1,
   b: 
     f: 
       g: 1
     
   ,
   c: [1, 2, 3]
;
var obj2 = $.extend(true, , obj1);//用来做深拷贝
console.log(obj1.b.f === obj2.b.f);  // false

 

转载：
作者：puxiaotaoc
链接：https://www.jianshu.com/p/cf1e9d7e94fb