“A series of knowledge points extended from basic data types and reference data types”

Before talking about shallow copy and deep copy, we first have to explain the two types of data in a JS: basic data type, reference data type, and the difference between them.

01

–

Base data type, reference data type

Basic data types: Number, String, Boolean, Undefined, Null, Object, Symbol (ES6) Reference data types: Object, such as Object, Array, Function etc.

The value of the basic data type is stored in the stack (statck), and the reference data is stored in an address in the stack, and its value is found in the heap according to this address. This access method is also called “reference access”.

Case 1:

// Basic data types let a = 1 let b = a b = 2 console.log(a, b) // 1,2Copy the code

As shown in the figure: The basic data type is the original value stored directly on the stack, following the principle of one-to-one, so although we assign a value to B in the code, we are actually just a copy of a value to B, and A and B are independent and do not affect each other. Sw **.avi vs. sw**(1).avi .

Example 2:

let obj1 = { 'name': 'blucesun' }
let obj2 = obj1
obj2.name = 'jack'
console.log(obj1) // { 'name': 'jack' }
console.log(obj1 === obj2) // true
Copy the code

The reference data type stores an address in the stack that points to the reference value in heap memory. When let obj2 = obj1, we can see that we have copied the address of obj1 to obj2, but they both point to the same address. This is the pointer, so we can imagine that since both variables point to the same address, when either of them operates on the value in the heap, The result of the operation is the same for both.

For example, when you send your long-cherished http://www.****.com to your upper bunk, you both have the address pointing to the same website, but one day you have an argument about the usage of Internet speed, you get angry and report the website, and the website is shut down. At this point both of you will no longer be able to visit (immature chestnuts, just to help understand, laugh it off).

02

–

Shallow copy, deep copy

Do you know how to get back on track? 😒

Some net friend B: car don’t…. Don’t stop! 😍

I: car a short while again open 😂, say the topic first. Take reference data, in fact, the above has explained the shallow copy of the situation, I believe that the students have seen through the mystery (A user: Lao Tzu did not see, directly come over 😒. I) :… . Shallow copy: In the previous example, obj1 and obj2 both point to values in the same memory address, so when one of them operates on a value in heap memory, it affects the other. This is a shallow copy, simple as that.

Deep copy: When we copy obj1 to obj2 using some deep-copy method (e.g. Parse (json.stringify (obj1)), then JS allocates another chunk of memory in the heap and gives obj2 an address that can point to that memory. Obj1 and obj2 have the same value in the heap, but their memory address is different. In other words, they are independent of each other in the heap.

let obj1 = {'name': 'blucesun'}
let obj2 = JSON.parse(JSON.stringify(obj1))
console.log(obj1 === obj2) // false
obj2.name = 'jack'
console.log(obj1,obj2) // {'name': 'blucesun'},{'name': 'jack'}
Copy the code

03

–

Related interview questions to share

Const a = 1, a = 2

Applicants that cannot be const are constants and cannot be changed. Const obj = {‘a’: 1}, obj. A = 2 Interviewer: Probably not.

I:…

The above image is from the introduction to ECMAScript 6 by Ruan Yifeng.

es6.ruanyifeng.com/#README Yifeng Ruan – Getting Started with ECMAScript 6

What is the difference between basic and reference data types? What is the difference between deep copy and shallow copy and how to implement deep copy?

Conclusion: If this article is helpful to you, please use your little hands to pay attention to it and share it with your good friends. If you find any mistakes in this article, please kindly comment, thank you.