Shallow copy and deep copy in ECMAScript

1. What is a shallow copy and what is a deep copy

Shallow copy: Shallow copy is to copy the data field in the original object to the new object, copy the "reference" of the reference field to the new object, and not copy the "referenced object" in, so the original object and The new object refers to the same object, and the change of the referenced field in the new object will cause the corresponding field in the original object to also change.

Deep copy: Deep copy: Deep copy is different in reference. Deep copy is to create a new field with the same content as the original field, which is two data segments of the same size, so the references of the two are different. The change of the reference field in the new object will not cause the field in the original object to change.

Two. Several methods to achieve shallow copy

1. Assign a value directly to a variable

let str = "abcd";
let str1 = str;
str1 = 'test';
console.log(str);//abcd
console.log(str1);//test

2. Use the Obj.assign() method in ES6

let obj1 = {
  username: 'loki',
};
let obj2 = Object.assign(obj1);
obj2.username = 'Jack';
console.log(obj1.username);//Jack

3. Use the Array.prototype.concat() method in ES6

let arr1 = [1, 3, 4, 5, { username: "optimus prime" }];
let arr2 = arr1.concat();
arr2[4].username = 'Megatron';
console.log(arr1[4].username);//Megatron

4. Use the three-dot operator'...' in ES6 to implement shallow copy cases as follows

let arr1 = [1, 5, 6, 7, 8];
let arr3 = [{ username: "Megatron" }, 10, 11, 12];
let arr4 = [...arr1, ...arr3];
arr4[5].username = "Loki";
console.log(arr3);//Loki

5.使用Array.prototype.slice()
let arr5 = [1, 2, 3, 4, 5, 6,{username : "Loki"}];
let arr6 = arr5.slice();

Three, several methods to achieve deep copy

1. Use JSON to implement deep copy

let arr2 = ['third', 20, 10, 'Loki'];

let arr3 = JSON.parse(JSON.stringify(arr2));
arr3[2] = 100;
console.log(arr2)//10 

2. Problems encountered when using JSON to implement deep copy

在使用被拷贝的数据不能有function 如果有的话 会转换成null如下所示
let arr5 = ["first", 'second', { username: "Loki" }, function fun() { }, 10];
let arr6 = JSON.parse(JSON.stringify(arr5));
console.log(arr6[3]);//null  

3. Deep copy through recursion

    function checkType(target) {
    //通过这个函数拿到数据类型
     	return Object.prototype.toString.call(target).slice(8, -1);
    }
    function clone(target) {
        let result, targetType = checkType(target);
        if (targetType === "Object") {
            result = {};
        } else if (targetType === "Array") {
            result = [];
        } else {
            return target
        }
        for (let i in target) {
            let value = target[i];
            if (checkType(value) === "Object" || checkType(value) === "Array") {
                clone(value);
            } else {
                result[i] = value;
            }
        }
        return result;
    };
   let arr6 = ['string', 123, true, undefined, null, function fun() {}, {username: 'Loki'}];
   let arr7 = clone(arr6);
   console.log(arr7);//'string', 123, true, undefined, null, function fun() {}, {username: 'Loki'}