The difference between deep clone and shallow clone

This article will take you to understand deep cloning and shallow cloning. If you want to understand deep cloning and shallow cloning, you must first understand how data is stored.
For the storage of basic data, the data is directly stored in the stack, and 1 for the storage of reference data types, the address is stored in the stack, and the data is stored in the heap.

let a = 10;
let b = 100;
function fn() {
    
    
    console.log(666);
}
let obj = {
    
    
    name: 'lili',
    age: 18
}

See how they are stored

Deep and shallow copy is mainly for reference data types. Let me talk about what is shallow copy.
Shallow copy is to copy the address of an object, share the same memory, and change the original object when it is modified.

let obj = {
    
    
    name: 'lili',
    age: 18
}

let obj2 = obj;

This is a shallow copy, just copy the address of obj to obj2, obj2 will modify the value inside, and obj will be modified accordingly.

Next, let’s talk about deep copying. Deep copying is to open up a new space in the memory and copy all the values ​​of the original object. Note that the value is copied instead of the address. The attributes in the new object are modified. The original object is not. Will be affected.

let obj = {
    
    
    name: 'lili',
    age: 18
}

let obj3 = {
    
    
    name: 'lili',
    age: 18
}
obj3.name = 'tom';
console.log(obj);

There is no direct method for deep cloning, so by the way, let’s encapsulate deep cloning.

The first method uses JSON conversion

  var obj = {
    
    
            a: 1,
            b: 2,
            c: {
    
    
                d: 3,
                e: [1, 2, 3, 4, 5]
            },
            f: [1, 3, 5, {
    
    },
                [], 6
            ]
        }


        function deepcopy(origin) {
    
    
           //将对象转换成字符串
            let a = JSON.stringify(origin);
            //再将其转换成对象，此时这已经是一个新对象了
            let b = JSON.parse(a);
            return b;
        }
     
          var res = deepcopy(obj);
        obj.a = 10;
        obj.c.d = 99;
        obj.c.e[0] = 999999;
        console.log(obj);
        console.log(res);

The second method is to use Object.prototype.toString.call() to determine what type of data it is. If it is an array or object, copy it cyclically, and also determine what data type the elements inside are, and use recursion to complete the copy.

function deepcopy(origin) {
    
    
    let result;
   //判断原来的数据是什么类型的
   if (Object.prototype.toString.call(origin) == '[object Array]') {
    
    
                result = [];
  } else if (Object.prototype.toString.call(origin) == '[object Object]') {
    
    
                result = {
    
    };
   } else {
    
    
                result = origin;
   }
   //将数据循环
   for (let key in origin) {
    
    
          // 判断数据里面的元素是什么类型
         if (Object.prototype.toString.call(origin[key]) == '[object Array]' || '[object Object]') {
    
    
                    result[key] = deepcopy(origin[key]);
         } else {
    
    
                    result[key] = origin[key];
         }
     }
            return result;
 }