Deep copy and shallow copy in JS

Shallow copy && deep copy
For string types, shallow copy is a copy of the value, and for an object, shallow copy is the copy of the object address, and does not open up a new stack, that is, the result of copying is two objects pointing to the same address, modifying the properties of one of the objects, the other object's properties will also change, for example, a chestnut

var arr = [n/a]; var arrcopy = arr;arrcopy[0] = +;   Modify the No. 0 value of a new array;arr[0]===arrcopy[0];  //true  

In most cases, what we need is that the new object is irrelevant to the original object, and thus:

deep Copy is the opening up of new stacks , two objects corresponding to two different addresses, modifying the properties of an object, does not change the properties of another object. Let's take a look at the following methods.

Slice and Concat methods for Array

//SlicevarA = [A.];varb =A.slice (); b= = = A;//false//concatvarA = [A.];varb =A.concat (); b= = = A;//falseyou may say that you see they do not point to the same address Ah, meow must be deep copy, watch catch urgent. Please see below:varA = [[1,2,3],4,5];varb =A.slice (); a[0][0]===B[0][0];//truetrue I go, the second layer of replication is obviously not deep copy AH. 

Jquery--$.extend ()

We can use the $.extend() method to complete the deep-shade reproduction. This method can pass in a parameter: Deep (true or false), which indicates whether to perform a dark copy (if deep copy performs a recursive copy).

var x = {    1,    b:2,    c: {f:{g:1}}}; var y = $.extend ({}, X),          copy    z = $.extend (true, {}, x);    // Deep Copy  = = = X.c.f       //  truez.c.f = = x.c.f       //  false    $.extend Usage is very interesting, not only the depth of copy, interested in the cubs can go to this classmate here to see, summed up very good 1190000004082170

With JSON global objects

For deep replication of pure JSON data objects, using JSON global objects parse and stringify methods to implement deep replication is also a simple flattering method.

The stringify in the Josn object can serialize a JS object into a JSON string, and parse can deserialize the JSON string into a JS object, both of which implement a deep copy. However, using this method there will be some hidden pits,

The object it handles correctly is only number, String, Boolean, Array, flat object (function breaks the dish, and the prototype chain is gone), which is the data structure that can be represented directly by JSON.

var arr = [0,1,2];var arrcopy =  json.parse (json.stringify (arr)); arrcopy[0] = 333;

ARR[0]===ARRCOPY[0];  //False

Did you see that, not interfering, harmonious flourishing.

Summary below:

The slice and concat methods of Array and the Extend copy method in JQuery, they copy the value of the first layer, the value of the first layer is a deep copy,

And to the second level, the slice and concat methods of the Array are copy references, and the Extend copy method in JQuery depends on your first parameter, which is recursive replication.

Json.parse (arr), in addition to the function and prototype chain of the copied object, is completely duplicated.

Today, it's jiangzi. It's 88.

Deep copy and shallow copy in JS