Let you understand the deep copy of js
js deep copyBefore we get to the point, we need to understand how data is stored. Data storage methodBefore we talk about it, we must first know how value types and reference types are stored. There are two types of data in JavaScript. Value types : A simple data segment stored in the stack memory, the data size is determined, and the memory space size can be allocated. Reference data types : For objects stored in the heap memory, a pointer is stored in the stack memory, and this pointer points to a location in the heap memory. Then get the required data from the heap memory. The storage is as follows:
What is shallow/deep copyAfter talking about the storage method, let's talk about shallow copy and deep copy Copy is what we often call copy, ctrl+c, ctrl+v, so let's take a look at an example When we assign values to value types and reference types respectively.
var a = 5
var b = a
b += 5
console.log('a=' + a,'b=' + b)
var arr = [1,2,3]
var brr = arr
brr.push(10)
console.log("arr is",arr)
console.log("brr is",brr)
Phenomenon : We found that the value types did not affect each other, but the array (reference type) brr array changed the arr array when adding elements. Explanation and analysis : Shallow copy only occurs on reference types. If a simple assignment is performed on a reference type, only a pointer to the heap memory is assigned. This is called a shallow copy. A deep copy is a complete copy of a reference type, not an address pointer. Take a shallow copy of the following schematic:
Common deep copy implementationsSo when we assign reference types, we must not make shallow copies, which will affect the original data. Then we need to do a deep copy 1. Through JSON.stringify and JSON.parseArrays and objects can be deeply copied, but functions cannot be copied. Nested copies of objects or arrays can be made. Disadvantage : It is impossible to achieve deep copy of methods in objects use :
var brr = JSON.parse(JSON.stringify(arr))
example:
var arr = {
name: 'Romantic Coder',
age: 20,
address: ['jiangxi', 'changsha'],
friends:
friend1: 'Zhang San',
friend2: 'Li Si'
},
function(){
console.log("I am the object of romanticism")
}
}
var brr = JSON.parse(JSON.stringify(arr))
brr.name='Zhang San, the lawless criminal'
brr.adress[0]='Changsha'
console.log("arr is", arr)
console.log("brr is", brr)
2. Spread OperatorThe structure assignment feature method of the object is utilized. Disadvantages : No deep copy of nested objects in the object, which is equivalent to deep copying only one layer of reference objects use:
var brr = {...arr}
example:
var arr = {
name: 'Romantic Coder',
age: 20,
address: ['jiangxi', 'changsha'],
friends:
friend1: 'Zhang San',
friend2: 'Li Si'
},
function(){
console.log("I am the object of romanticism")
}
}
var brr = {...arr}
brr.name='Zhang San, the lawless criminal'
brr.adress[0]='Changsha'
console.log("arr is", arr)
console.log("brr is", brr)
3. Handwritten recursive deep copy functionPerfect solution function:
//Use recursion to implement deep copy function deepClone(obj) {
//Determine whether the copied obj is an object or an array var objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") { //obj cannot be empty and must be an object or an array because null is also an object
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === "object") { //The attribute value in obj is not empty and it is still an object, make a deep copy objClone[key] = deepClone(obj[key]); //Recursively make a deep copy } else {
objClone[key] = obj[key]; //direct copy}
}
}
}
return objClone;
}
example:
var arr = {
name: 'Romantic Coder',
age: 20,
address: ['jiangxi', 'changsha'],
friends:
friend1: 'Zhang San',
friend2: 'Li Si'
},
fun: function(){
console.log("I am the object of " + this.name + "")
}
}
var brr = deepClone(arr)
brr.name = 'Outlaw Zhang San'
brr.adress[0] = 'Changsha'
console.log("arr is", arr)
arr.fun()
console.log("brr is", brr)
brr.fun()
//Use recursion to implement deep copy function deepClone(obj) {
//Determine whether the copied obj is an object or an array var objClone = Array.isArray(obj) ? [] : {};
if (obj && typeof obj === "object") { //obj cannot be empty and must be an object or an array because null is also an object
for (key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] && typeof obj[key] === "object") { //The attribute value in obj is not empty and it is still an object, make a deep copy objClone[key] = deepClone(obj[key]); //Recursively make a deep copy } else {
objClone[key] = obj[key]; //direct copy}
}
}
}
return objClone;
}
SummarizeThis article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM! You may also be interested in:
|
<<: Who is a User Experience Designer?
Recommend
Detailed explanation of eight methods to achieve CSS page bottom fixed
When we are writing a page, we often encounter a ...
Nginx implements https website configuration code example
https base port 443. It is used for something cal...
Simple implementation method of two-way data binding in js project
Table of contents Preface Publish-Subscriber Patt...
Implementation of docker view container log command
Why should we read the log? For example, if the c...
CentOS 7.5 deploys Varnish cache server function
1. Introduction to Varnish Varnish is a high-perf...
Detailed explanation of Vue's self-implementation of dispatch and broadcast (dispatch and broadcast)
Problem to be solved Mainly for cross-level commu...
Detailed explanation of Linux netstat command
Table of contents Linux netstat command 1. Detail...
MySQL 5.6.28 installation and configuration tutorial under Linux (Ubuntu)
mysql5.6.28 installation and configuration method...
Detailed explanation of Linux remote management and sshd service verification knowledge points
1. SSH remote management SSH Definition SSH (Secu...
Vue large screen data display example
In order to efficiently meet requirements and avo...
How to use HTML form with multiple examples
Nine simple examples analyze the use of HTML form...
Vue-cli framework implements timer application
Technical Background This application uses the vu...
Detailed graphic explanation of Mysql5.7.18 installation and master-slave replication
Install mysql5.7.18 on CentOS6.7 1. Unzip to the ...
Nginx tp3.2.3 404 problem solution
Recently I changed Apache to nginx. When I moved ...
Description and use of table attributes CellPad, CellSpace and Border in web page production
cellspacing is the distance between cells in the t...