Introduction to 4 ways to implement deep copy of JS

concept

Deep copy: reopen a storage space in heap memory and completely clone an identical object;

Shallow copy: Do not reopen space in heap memory, only copy the reference address in the stack memory.

Essentially, two objects (arrays) still point to the same storage space and insert code slices here

1. Recursive method (recommended, the safest and most commonly used in the project)

//Use recursion to implement deep copy of arrays and objectsexport function deepClone (obj) {
    let objClone = (obj) ? [] : {};
    if (obj && typeof obj === "object") {
        for (var key in obj) {
            if ((key)) {
                //Judge whether the ojb child element is an object, if so, recursively copy                if (obj[key] && typeof obj[key] === "object") {
                    objClone[key] = deepClone(obj[key]);
                } else {
                    //If not, simply copy                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
};   

2. () ; (This is not recommended, there are pitfalls)

Ordinary objects can also be copied in deep, but! ! ! When the object content item is number, there is no problem. However, if the object content item is undefined, null, Date, RegExp, function, error. There will be problems with copying using (()).

3. Use the cloneDeep() method in the third-party library lodash

Whether it is recommended depends on the situation. If only one deep copy function is needed in our project, it would be unworthy to introduce the entire third-party library for one function. Writing a recursive function will perform better for the project

In fact, the () method is originally used as a recursive method. But there is a layer of cloneDeep's main function baseClone encapsulated on the outer layer.

Therefore, if it weren't for the original project that used the lodash library, there was no need to introduce it for this function.

4. Deep copy of jquery's extend() method (recommended to use in JQ)

This method is only suitable for projects built by JQuery. JQuery's own extension

let obj = { a: { c: 2, d: [1, 3, 5], e: "Wow wow wow" }, b: 4 };
let newObj = $.extend(true, {}, obj1);
 //Copying is completed = 20;(); //Output 4

Summarize:

How to make deep copy:

Recursive functions (recommended, more, smaller, and safer to use in projects)

() and () ; (Not recommended. If you encounter variables of Type Function, Date and other types, you will likely have some unexpected problems)

The cloneDeep() method of third-party library lodash

JQuery's extend() function (recommended to be used in JQuery projects, but recursive functions are still recommended for other projects)

This is the end of this article about 4 ways to implement deep copy of JS. This is the end of this article. For more related deep copy of JS, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!