Details of Assignment Shallow Copy and Deep Copy in js

Directory 1, js Memory 2, Assignment 3, Shallow Copy 4, Deep Copy

Foreword:

Before learning the following article, we briefly understand the knowledge of memory under 1, and briefly mention 1 below

1. js memory

js memory, or memory in most languages, is divided into stack and heap. Variable values for basic data types are assigned on the stack, and variable values for reference data types are assigned on the heap, where only the addresses of objects in the specific heap are stored.

2. Assignment

For basic data types, the assignment operation is a copy, that is, the old and new variables do 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 to the stack pointing to an object in the heap, that is, copies the reference address. New and old variables will influence each other, that is, when 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, it is a copy operation, and the old and new 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, the shallow copy only copies the Layer 1 objects, and the deep value is still the copy reference address.

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 Realizes Shallow Copy, Idea: Traversal target The name and value of the property are assigned to the new variable.
If you understand the meaning of assignment, then in line 4 of the code, when the target[key] By assigning a value to a new variable, essentially copying the address of the reference data type in the heap, it is not difficult to understand why shallow copying has different results for whether it is a nested object or not.

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

4. Deep copy

Deep copy is a complete copy, and the old and new variables will not influence each other.
There are different processing methods for whether the parameter is an object. If it is an object, assign values to each attribute and value of the object and then recursively process it; Otherwise, return directly.

function clone(target) {
    if (typeof target === "object") {
        // Determine 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;
    }
}