Deep and shallow copies in JavaScript

Article Directory

1. Types of variables in JavaScript
2. Understanding of deep copies and shallow copies
3. How to implement deep and shallow copies
4. Why deep copy and shallow copy required

Types of variables in JavaScript

(1), basic type

There are five basic types in javascript: null, Undefined, Boolean, string, number. Variables are stored by value, and simple data segments stored in the stack can be accessed directly.

(2), reference type

Reference types include objects and arrays, which are stored in the heap, while variables are pointers, pointing to the heap. When we visit, we are actually accessing the pointer, and then the pointer goes to look for an object or an array.

Deep copy and shallow copy understanding

(1), deep copy

Create a new empty object, the memory of the newly opened a piece of the address, the copied object of all enumerable (note enumerable object) attribute method one by one to copy, notice to use recursion to copy all the properties and methods inside the child object, until the child .... property is the base data type. key points : Open up new memory, recursive replication.

Another definition: Deep copy refers to objects that are referenced by object properties to copy all new objects to ensure that the reference graph of the deeply copied object does not contain any objects on the original object or object graph, isolating two completely different object graphs.

(2), Shallow copy

One object replicates another object, if not a deep copy, is a shallow copy. Simply put, a shallow copy copies the "number" of an object's memory address to another object. This means that the copied object is accessed at the time of real access. Or just a deep copy of the first layer of the reference type, without copying a deeper application type, but using the way to copy the address, which is also a shallow copy.

Deep copy and shallow copy implementation method shallow copy shallow copy 1

        var obj1 = {            'Wayne'        }        var obj2 =  Obj1        'hedy'   //' Hedy '        

This first creates a Obj1 object and then copies obj to Obj2, but this is just a copy of the pointer, so when you modify the Obj2.name, it is actually the object in the same heap that is being modified, both shallow copies.

Shallow copy 2

varobj ={A:1, B: {d: {e:'Test'}}, C: [1,2,3]} function shallowClone1 (copyobj) {varNEWOBJ = {};  for(varPropinchcopyobj) {Newobj[prop]=Copyobj[prop]; }            returnNEWOBJ; }        varNEWOBJ =shallowClone1 (obj); Console.log (NEWOBJ.B.D= = = OBJ.B.D);//true

That is, by copying the object in the form of for, you can see that copying is just a copy of the pointer, the resulting new object or the object in the same heap, so it is shallow copy.

Shallow Copy 3

Object.assign ()

VarObj1 ={name:'Wayne', Age: A, other: {hobby:'Table', School:'Xjtu'            }        }        varObj2 =object.assign ({}, obj1); Obj2.name='Hedy'Console.log (obj1.name)//WayneObj2.other.hobby='Sing'Console.log (obj1.other.hobby)//Sing

On the surface only, it seems that the target object of Object.assign () is {}, a new object (which opens up a new memory space) and is a deep copy.

When we modified the Obj2.name, Obj1.name did not change, but when we changed the Obj2.other.hobby, Obj1.other.hobby also changed.

That is, Object.assign () is also a shallow copy, or just a deep copy of the first layer, so we think it is a shallow copy.

Shallow copy 4

Concat

        varA = [2, [3,5,7], {name:'Wayne'}]; varb = A.concat (4) a[0] =3; Console.log (b[0])//2 looks like a deep copya[1][0] =666; Console.log (b[1][0])//666 Shallow Copya[2].name ='Hedy'Console.log (b[2].name)//Hedy Shallow Copy

You can see the new array returned by CONCAT, only change one of the Boolean, string, numeric, the other does not change, but change the object, the array, you can find that the other is also changing at the same time, or reference the original heap content.

Slice

        varA = [2, [3,5,7], {name:'Wayne'}]; varb = A.slice (0) a[0] =3; Console.log (b[0])//2 looks like a deep copya[1][0] =666; Console.log (b[1][0])//666 Shallow Copya[2].name ='Hedy'Console.log (b[2].name)//Hedy Shallow Copy

This code is only the last paragraph of the concat modified in order to slice, found the same result, that is, the slice method is also shallow copy.

Deep copy

Deep Copy 1

Json.stringify () and Json.parse ()

        varObj1 ={name:'Wayne', Age: A, other: {hobby:'Table', School:'Xjtu'            }        }        varObj2 =Json.parse (Json.stringify (obj1)); Obj2.name='Hedy'Console.log (obj1.name)//WayneObj2.other.hobby='Sing'Console.log (obj1.other.hobby)//Table

It can be seen that by json.stringify the object into a character changer, and then through Json.parse () to the object, this object is completely in the open new memory space of the object.

Deep Copy 2

jquery $.clone (True)/$.extend (TRUE)

        varx ={A:1, B: {f: {g:1}}, C: [1,2,3 ]        }; vary = $.extend ({}, X),//Shallow copyz = $.extend (true, {}, x);//Deep copyConsole.log (Y.b.f= = = X.b.f)//trueConsole.log (Z.b.f = = = X.b.f)//false

You can see that by passing $.extend () the first parameter is true, you can make a deep copy.

Recommended article: https://www.zhihu.com/question/23031215

http://blog.csdn.net/waiterwaiter/article/details/50267787

Deep and shallow copies in JavaScript