js deep copy, deep clone

js deep copy

In the last article, what we saw was actually a simple shallow copy.

1. Shallow copy

For shallow copy, only the reference of the object is copied, and the value of the object is not copied deeply. Multiple objects point to the same object in the heap memory. Any modification will modify the value of all objects because they share a piece of data.

Second, deep copy

In actual projects, we cannot let the value of each object point to the same heap memory, which is not convenient for us to do data operations, so we need to use deep copy.

Such as the following method:

Method 1: JSON.stringify（）、JSON。parse()
There is no reference problem, and the modified newObjdata will not objchange the data.

We can also use it like this:

Note: Use JSON.stringify(), JSON.parse(), it cannot copy undefined, function, RegExp, etc.

Method 2: Object.assign(target, source)

This method does not seem to have any problems, but this is only a layer of objects, what if there are multiple levels of nesting?

Let's try it. We

can see that there is no problem for a layer of objects, but if the properties of the object correspond to other reference types, only the reference is copied, and there will still be problems if you modify it.

Method three:递归拷贝

// 定义一个深拷贝函数  接收目标target参数
function deepClone(target) {
    
    
    // 定义一个变量
    let result;
    // 如果当前需要深拷贝的是一个对象的话
    if (typeof target === 'object') {
    
    
    // 如果是一个数组的话
        if (Array.isArray(target)) {
    
    
            result = []; // 将result赋值为一个数组，并且执行遍历
            for (let i in target) {
    
    
                // 递归克隆数组中的每一项
                result.push(deepClone(target[i]))
            }
         // 判断如果当前的值是null的话；直接赋值为null
        } else if(target===null) {
    
    
            result = null;
         // 判断如果当前的值是一个RegExp对象的话，直接赋值    
        } else if(target.constructor===RegExp){
    
    
            result = target;
        }else {
    
    
         // 否则是普通对象，直接for in循环，递归赋值对象的所有值
            result = {
    
    };
            for (let i in target) {
    
    
                result[i] = deepClone(target[i]);
            }
        }
     // 如果不是对象的话，就是基本数据类型，那么直接赋值
    } else {
    
    
        result = target;
    }
     // 返回最终结果
    return result;
}

effect:

 let obj1 = {
    
    
        a: {
    
    
            c: /a/,
            d: undefined,
            b: null
        },
        b: function () {
    
    
            console.log(this.a)
        },
        c: [
            {
    
    
                a: 'c',
                b: /b/,
                c: undefined
            },
            'a',
            3
        ]
    }
    let obj2 = deepClone(obj1);
        console.log(obj2);

Seeing that the result of the final copy is that special values ​​such as null, undefinde, function, and RegExp have all been copied successfully, and we can modify the values ​​inside without any problems.
Here we have implemented a simple deep copy.