Detailed description of shallow copy and deep copy in js

Preface:

Before studying the following article, let's briefly understand the knowledge of memory. The following is a brief introduction

1. js memory

js memory, or the memory of most languages ​​​​is divided into stack and heap. The variable values ​​of basic data types are allocated on the stack, and the variable values ​​of reference data types are allocated on the heap. The stack only stores the addresses of specific objects in the heap.

2. Assignment

For basic data types, the assignment operation is a copy, that is, the new and old variables will not affect each other.

var a = 1;
var b = a;
b = 2;
console.log(b); // 2

For reference data types, the assignment operation simply adds a variable in the stack that points to the object in the heap, that is, copies the reference address. The new and old variables will affect each other, that is, if the object value is changed on the new variable, the corresponding value of the old variable will also change.

var a = {
    name: "mike"
};
var b = a;
b.name = "jack";
console.log(a); // {name: "jack"}

3. Shallow copy

For basic data types and data without nested objects, all operations are copy operations, and the new and old variables will not affect each other.

var a = {
    name: "mike"
};
var b = {};
b.name = a.name;
b.name = "jack";
console.log(a) // {name: "mike"}

However, for data with nested objects, a shallow copy only copies the first-level objects, and the values ​​at deeper levels are still copied reference addresses.

var a = {
    name: "mike",
    language:
        first: "english",
        second: "chinese"
    }
};
var b = {};
b.name = a.name;
b.name = "jack";
b.language = a.language;
b.language.first = "japanese"
console.log(a) // { language : {first: "japanese", second: "chinese"}}

js implements shallow copy, the idea is : traverse each attribute of target and assign the attribute name and value to the new variable.
If you understand the meaning of assignment, then in the fourth line of the code, when the value of target[key] is an object, the new variable is assigned through assignment, which essentially copies the address of the reference data type in the heap. It is not difficult to understand why shallow copy has different results for whether it is a nested object.

function shallowCopy(target) {
    let result = {};
    for (const key in target) {
        result[key] = target[key];
    }
    return result;
}

4. Deep Copy

A deep copy is a complete copy, and the new and old variables will not affect each other.
There are different processing methods for whether the parameter is an object. If it is an object, each attribute and value of the object is assigned and then processed recursively; otherwise, it is returned directly.

function clone(target) {
    if (typeof target === "object") {
        //Judge whether it is an array let result = Array.isArray(target)? [] : {};
        for (const key in target) {
            result[key] = clone(target[key]);
        }
        return result;
    } else {
        return target;
    }
}

This is the end of this detailed article about shallow copy and deep copy of assignment in js. For more relevant content about shallow copy and deep copy of assignment in js, please search previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!