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

This article is about how to understand the shallow copy and deep copy in JavaScript. The editor thinks it is very practical, so I share it with you. I hope you can get something after reading this article.

Shallow copy

When using JavaScript to operate on an array, if we simply assign it to other variables, then we just have to change any one of them, and then the others will change, which leads to the problem.

Var arr = ['aa','bb','cc']

Var arr2 = arr

Arr2 [0] = 'newcomer'

Console.log (arr); / / output 'newcomer', 'bb','cc'

Thus it can be seen that when the array arr2 is modified, the data in the arr will be changed accordingly. This way of direct assignment is the shallow copy phenomenon. Then why on earth is it?

Because JavaScript storage objects are stored in addresses, shallow copying will cause arr and arr2 to point to the same memory address, as shown in the schematic diagram below.

So when you modify the data in arr2, because arr also points here, the data in arr is also "modified".

Deep copy

Generally, it is to open up a new memory address and copy the attributes of the original object one by one. As shown in the following figure

So when modifying the data in arr2, because the address of arr is different from that of arr2, the data of arr is still the same.

A deep copy of an array

Var arr = ['aa','bb','cc']

Var arr2 = arr.slice (0)

Arr2 [0] = "newcomer"

Console.log (arr); / / output: the original value of the array: 'aa','bb','cc'

Console.log (arr2); / / output: new values of the array: 'newcomer', 'bb','cc''

Deep copy of Json

Here, two methods under JSON are used to realize the deep copy of the object.

Var json = {aVera 12 BRV 5}

Var str = JSON.stringify (json); / / the data in json is converted into a string and stored here.

Var json2 = JSON.parse (str); / / the contents of the string are "restored" to the original "face".

Console.log (json2); / / output {aVl12 BJV 5}

Summary

In fact, there are many ways to make deep copies in js, such as using the cancat method under the array, traversing the Json and giving new objects, and so on.

Supplement

The above only considers the case of pure array or pure object (json string). There is a problem when nesting each other. After consulting the data, we found a function.

Function cloneObject (obj, deep) {

If (obj = = null | | obj = undefined | | typeof (obj)! = = 'object') {

Return obj

}

Var deep =!! deep

Var cloned = null

If (obj.constructor = Array) {

If (deep = false) return obj

Cloned = []

For (var i in obj) {

Cloned.push (cloneObject (obj [I], deep))

}

Return cloned

}

Cloned = {}

For (var i in obj) {

Cloned [I] = deep? CloneObject (obj [I], true): obj [I]

}

Return cloned

}

Var arr = [1,3,5, {a: 5}]

Var newArr = cloneObject (arr,true)

NewArr [3] .a = 9

Console.log (arr, newArr)

The above is how to understand the shallow copy and deep copy in JavaScript. The editor believes that there are some knowledge points that we may see or use in our daily work. I hope you can learn more from this article. For more details, please follow the industry information channel.

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.