Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the difference between deep copy and shallow copy of javascript". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "what is the difference between deep copy and shallow copy of javascript" can help you solve the problem.

In JavaScript, the shallow copy only copies the memory address of the original data, which is equivalent to two data pointers pointing to the same address. If any data element changes, it will affect the other; while the deep copy of the two data points to a different address, either element changes and will not affect the other.

The operating environment of this tutorial: windows10 system, javascript1.8.5 version, Dell G3 computer.

What is the difference between a deep copy and a shallow copy of javascript

Before exploring shallow copy and deep copy, let's understand the concepts of heap and stack.

Both the heap and the stack are areas of memory that are divided for storage. Stack is automatically allocated memory space, which is automatically released by the system, while heap is dynamically allocated memory, which is not automatically released with variable size.

Then take a look at the basic data types & reference data types (also known as complex data types)

1. Basic types: String, Number, Boolean, null, undefined, Symbol (ES6 is added to represent unique values); basic type values occupy a fixed size in memory and are stored in stack memory.

2. Reference types: Object, Array, Date, Function, etc. The values of reference types are objects and are stored in heap memory.

The concept of deep and shallow copy

Note: the difference between deep and shallow copies only applies to complex objects such as Array and Object.

1. Shallow copy: only the memory address of the original data is copied, which means that two data pointers point to the same address, and a change in either data element will affect the other.

2. Deep copy: the two data points to different addresses, and when the data elements change, they will not affect each other.

Case study

1. Shallow copy

Var arr = [0,1,2]; var arrB; / / assigns arr to arrBarrB = arr;console.log ("arr:", arr); console.log ("arrB:", arrB); console.log ("- after changing the value of array elements in arrB -"); arrB [0] = 5 security console.log ("arr:", arr); console.log ("arrB:", arrB)

Run result: arr array elements change as arrB array elements change

2. Deep copy (only do the first layer deep copy)

Note: when using deep copy, it is important to know the degree of requirement for deep copy, whether to deeply copy only the first-level object attributes or array elements, or recursively copy all levels of object attributes and array elements?

Deep copy array

1. Traversing directly

Var arr = [1, 2, 3, 4]; function copy (arr) {var newArr = []; for (var iTuno [I)

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.