This is the 10th day of my participation in the August Text Challenge.More challenges in August

preface

In fact, I am also quite vague about this thing (heap/stack). I have read a lot of articles and want to summarize one. Please point out if there is any misunderstanding

The stack

What can be directly modified is the stack. The stack is automatically allocated a relatively fixed size of memory space, and automatically released by the system. Basically, the stack memory variables are recycled when used up.

For example, Number, String, null, undefined, Boolean

Personal understandingThe stackThat is, everyThe stackThey’re all independent of each other. EachThe stackWill open up new space.

Examples of code for stacks:

Numeric types

/ / sample 1

let a = 123;
let b = a;

a = 6;
console.log(a,b) // Output 6 123

/ / sample 2
let a = 123;
let b = a;

b = 1;
console.log(a,b) // output 123 1
Copy the code

Summary: Changes to numeric types do not affect each other

String type

/ / sample 1
let a = 'string1';
let b = a;

a = 'string2';
console.log(a,b) // print string2 string1

/ / sample 2
let a = 'string1';
let b = a;

b = 'string2';
console.log(a,b) // print string1 string2
Copy the code

Summary: String type changes do not affect each other

Null type

/ / sample 1
let a = null;
let b = a;

a = 1;
console.log(a,b) // Prints 1 null


/ / sample 2
let a = null;
let b = a;

b = 1;
console.log(a,b) // Prints null 1
Copy the code

Summary: Null type changes do not affect each other

Boolean type

let a = false;
let b = a;

a = true;
console.log(a,b) // Print true false


/ / sample 2
let a = false;
let b = a;

b = true;
console.log(a,b) // Print false true
Copy the code

Conclusion: Boolean type changes do not affect each other

Undefined type

let a = undefined;
let b = a;

a = 1;
console.log(a,b) // output 1 undefined


/ / sample 2
let a = undefined;
let b = a;

b = 1;
console.log(a,b) // output undefined 1
Copy the code

Conclusion: Undefined type changes do not affect each other

Stack personal understanding summary

Through the above code example found that the value (Number), String (String), null(null), undefined, Boolean will open a stack space, each is an independent space, mutual change is not affected

The heap

Heap is short for heap memory, heap is dynamically allocated memory, memory size is not fixed, will not automatically released, heap data structure is an unordered tree structure, Pointers stored in the stack memory

Those types go into the heap space: Object, Array, Function

My personal understanding is that the heap is stored in a spatial stack, and then the reference type relationship, is that a in the heap is changed, and then the reference a will be changed

Example code for the heap: type Object

/ / sample 1
let a = {name: 1};
let b = a;
b.name = 2;
console.log(a,b) // Output: {name: 2} {name: 2}


/ / sample 2
let a = {name: 1};
let b = a;

a.name = 2;
console.log(a,b) // Output: {name: 2} {name: 2}

/ / sample 3

let a = {name: 1};
let b = a;

a = {name: 2};
a.name = 3;
console.log(a,b) // Output: {name: 3} {name: 1}
Copy the code

Conclusion :(example 1, 2) use a heap memory space. When the heap memory changes, the variables that refer to the heap memory change. When a new heap memory is defined, it does not matter what was previously referenced (example 3).

Array type

/ / sample 1
let a = [1.2.3.4];
let b = a;

a[0] = 'h';
console.log(a, b) // Output: ["h", 2, 3, 4] (4)


/ / sample 2
let a = [1.2.3.4];
let b = a;

b[0] = 'h';
console.log(a, b) // Output: ["h", 2, 3, 4] (4)
Copy the code

A = b; a = b; a = b

The function type


let a = function() {
    return 123
}

let b = a;

// Function is an independent function. If the function is treated as a heap, the function changes and the due variable changes

//function..... Sorry if you understand this can be put in the comments section thanks
Copy the code

Avoid this heaped reference type (deep copy)

Deep copy (1)

/ / by using JSON. Stringify ()
/ / sample 1
let a = {name: 1};
let b = JSON.parse(JSON.stringify(a));

a.name = 2;
console.log(a, b) // Output: {name: 2} {name: 1}

/ / sample 2
let a = {name: 1.fn(){}}
let b = JSON.parse(JSON.stringify(a))
a.name = 1;
console.log(a,b) Fn: ƒ} {name: 1}
Copy the code

Conclusion: Make use ofJSON.stringify()Deep copy can be implemented, but functions are lost

Deep copy (2)

Slice using arrays for deep copy arrays

The slice() method returns a new array composed of fragments of elements taken from the existing array (without changing the original array!).

Slice (start,end) When slice() takes no arguments, it returns a new array with the same length as the original array by default

Code examples:

/ / sample 1
let a = [1.2.3.4.5];

let b = a.slice();
a[0] = 'h'

console.log(a, b) ["h", 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]
Copy the code

Bottom line: Slice is suitable for implementing deep copies of arrays

Deep Copy (3)

Concat uses arrays for deep copies of arrays

Concat () returns a new array without altering the original one

Code examples:

/ / sample 1
let a = [1.2.3.4.5];

let b = [].concat(a);
a[0] = 'h'

console.log(a, b) ["h", 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]
Copy the code

Summary: Concat is suitable for deep copy arrays

Deep Copy (4)

Implement deep copy using object.assign () of the Object

Code examples:

// Example 1:
let a = [1.2.3.4.5];

let b = Object.assign([], a);
a[0] = 'h'

console.log(a, b) ["h", 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]


// Example 2:

let a = {name: 1.fn(){}};
let b = Object.assign({}, a);

a.name = 2;

console.log(a, b) {name: 2, fn: ƒ} {name: 1, fn: ƒ}
Copy the code

Conclusion:Object.assign()Arrays and objects can be implemented by deep cloning. Disadvantages: This method is a deep copy when there are only primary attributes in the object and no secondary attributes, but when there are objects in the object, this method is a shallow copy after the secondary attributes

Deep copy (5)

Es6 extension operators… Implement deep cloning

Code examples:

// Example 1:
let a = [1.2.3.4.5];

let b = [...a];
a[0] = 'h'

console.log(a, b) ["h", 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]


// Example 2:

let a = {name: 1.fn(){}};
letb = {... a}; a.name =2;

console.log(a, b) {name: 2, fn: ƒ} {name: 1, fn: ƒ}


/ / sample 3
let a = {name: 1.fn(){}, obj: {a: 1}};
letb = {... a}; a.obj.a =2;

console.log(a, b) 
/ * * output: {" name ": 1," obj ": {" a", 2}, fn () {}} {" name ": 1," obj ": {" a", 2}, fn () {}} * /
Copy the code

Conclusion:. Extended operatorArrays and objects can be implemented by deep cloning. Disadvantages: withObject.assignSimilarly, if the object has only the first level attributes and no second level attributes, this method is a deep copy, but if the object has objects, this method is a shallow copy after the second level attributes

Deep copy (5)

Implement a recursive function

function cloneDeep(source) {
    Define a new array or object
    let target = Array.isArray(source) ? [] : {}

    for (let key in source) {
        if (source.hasOwnProperty(key)) {
            if (source[key] && typeof source[key] === "object") {
                target[key] = cloneDeep(source[key]);
            } else{ target[key] = source[key]; }}}return target
}



// Example 1.
let a = [1.2.3.4.5];
let b = cloneDeep(a);
a[0] = 'h';

console.log(a, b); //["h", 2, 3, 4, 5] (5) [1, 2, 3, 4, 5]


// Example 2.
let a = {name:1.fn(){}, obj: {a: 1}};
let b = cloneDeep(a);

a.obj.a = 2;
console.log(a, b)
{output / * * * * * fn: ƒ fn (), name: 1, obj: {a: 2}} {fn: ƒ fn (), name: 1, obj: {a: 1}} * /Copy the code

Access to relevant information

  • 1、 zhuanlan.zhihu.com/p/50206683
  • 2, www.cnblogs.com/guchengnan/…
  • 3, juejin. Cn/post / 684490…
  • 4, www.cnblogs.com/penghuwan/p…
  • 5, www.jianshu.com/p/f9f587812…

conclusion

My understanding to pile and stack is these, have discovered I again wrong place point out in time 😀

conclusion

  • Hi, I am Mihara and thank you for watching and I will work harder.
  • Each method is typed out and verified, and can be copied if necessary.
  • If you give help a thumbs-up 👍 is even better thank you ~~~~~
  • We look forward to your attention