Preface
We often see the terms “deep clone” and “shallow clone” on some websites or blogs. Actually, this is a good understanding. Today we will analyze them hereJS deep copy and shallow copy
。
Shallow copy
Let’s use an example to illustrate JS shallow copy:
var n = {a: 1, b: 2}
var m = n
m.a = 12
console.log(n.a) // ?
Obviously aboven.a
The value of will change to 12, which is the JS shallow copy.Shallow copy is only a pointer to the object of the copy, in essence, it still points to the same object.
Deep copy
Also, let’s use an example to explain what it’s calledjs deep clone
:
var n = {a: 1, b: 2}
var m = {a: n.a, b: n.b}
m.a = 12
console.log(n.a) // ?
The above output is obviously the same1
M and N although all the attributes and values are the same, they are two different objects. They occupy two different memory addresses in the heap memory, which is called deep copy.Deep copy is to copy a new object completely, which occupies two different memory addresses in heap memory.
JS implementation of deep copy
Simple one dimensional data structure
- Manual direct assignment
The deep copy example above
- Using ES6
Object.assign()
Method
const obj = {name: 'cc', age: 24}
const newObj = Object.assign({}, obj)
obj.name = 'cc1'
newObj.name ? // cc
Two dimensional data structure and above
- Simple and crude way:
JSON.parse(JSON.stringify(obj))
。
Disadvantages: it can’t make deep copy for regular expression type, function type, etc., and it will directly lose the corresponding value, and it will discard the objectconstructor
。
var obj = { a: {a: "cc"}, b: 123 }
var newObj = JSON.parse(JSON.stringify(obj))
newObj.b = 1234
console.log(obj) // {a: {a: 'cc'}, b: 123}
console.log(newObj); // {a: {a: 'cc'}, b: 1234}
- Using jquery
// shallow copy
var newObj = $.extend({}, obj)
// deep copy
Var newobj = $. Extend (true, {}, obj) // the first parameter must be true
- Implement a simple deep copy function by yourself
function deepClone(obj){
if(typeof obj !== "object" || obj === null) return
let newObj = obj instanceof Array ? [] : {}
for(let key in obj){
if(obj.hasOwnProperty(key)){
newObj[key] = typeof obj[key] === "object" && obj[key] !== null ? deepClone(obj[key]) : obj[key]
}
}
return newObj
}
let obj = {a: 1, b: function(){}, c: {d: 2}}
deepClone(obj) // {a: 1, b: function(){}, c: {d: 2}}
These methods are the most commonly used methods for deep copy. Of course, there are other libraries, such asdeepCopy
,lodash
Wait, we won’t go deep here.