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
HTML form submission method case study
To summarize the form submission method: 1. Use t...
HTML Tutorial: HTML horizontal line segment
<br />This tag can display a horizontal line...
Solution to the problem of failure to insert emoji expressions into MySQL
Preface I always thought that UTF-8 was a univers...
Detailed explanation of tinyMCE usage and experience
Detailed explanation of tinyMCE usage initializat...
Detailed explanation of single-choice and multiple-choice selection in HTML select tag
The select element creates a single-select or mult...
Detailed steps to install MySQL 8.0.27 in Linux 7.6 binary
Table of contents 1. Environmental Preparation 1....
Facebook's nearly perfect redesign of all Internet services
<br />Original source: http://www.a-xuan.cn/...
How to adapt CSS to iPhone full screen
1. Media query method /*iPhone X adaptation*/ @me...
How to use VUE and Canvas to implement a Thunder Fighter typing game
Today we are going to implement a Thunder Fighter...
MySQL 5.7.31 64-bit free installation version tutorial diagram
1. Download Download address: https://dev.mysql.c...
Example of implementing a seamless infinite loop of background using CSS animation
1. Demand A picture moves from left to right in a...
Detailed tutorial for installing ElasticSearch:7.8.0 cluster with docker
ElasticSearch cluster supports動態請求的方式and靜態配置文件to ...
A detailed introduction to Tomcat directory structure
Open the decompressed directory of tomcat and you...
Analysis of the reasons why the index does not take effect when searching in the MySql range
1 Problem Description This article sorts the esta...
Detailed graphic tutorial on downloading and installing VirtualBox software and installing and deploying it in Linux environment
1. Download and install VirtualBox software First...