The merging and cloning of JS----objects and the shades of arrays

In JS, the copying of arrays and objects is only a shallow copy if the use = number is used for copying. As demonstrated:

As above, arr the modification will affect arr2 the value, which obviously in most cases is not the result we need.
Therefore, the array and the deep copy of the object is javascript a basic skill.

I. Differences in merger and cloning

1. Clones are special merges (with empty objects as target objects, non-empty objects are merged as source objects), and cloning requires that the target object be the same as the constructor of the source object.

2. The cloned source object has only one, and the merged source object can be multiple.

Two. Method of merging 1. Object.assign ():

Example: Var obj1 ={

M:1,

N:2,

J: {

R: {

H:2

},

P:4},

P:1

}

var obj2 ={M:2, n:undefined, J: {H:2, O:3}}

var obj3 = object.assign (OBJ1,OBJ2);

Result: Obj1 = {m:2,n:undefined, J: {H:2, o:3}, p:1};

Obj2 ={M:2, n:undefined, J: {H:2, o:3}};

Obj3 ={M:2, n:undefined, J: {H:2, o:3}, p:1};

Note: 1). The target object itself will also become obj1===obj3

2). This method is a shallow merge

3). Undefined participate in the merger

4). Prototype not attribute join merge

2. $.extend:

Situation One:

Example: Var obj1 ={M:1, N:2, J: {r: {h:2}, P:4}, P:1}

var obj2 ={M:2, n:undefined, J: {H:2, O:3}}

var obj3 = $.extend (OBJ1,OBJ2);

Results: obj1 = {m:2, N:2, J: {H:2, o:3}, p:1};

Obj2 ={M:2, n:undefined, J: {H:2, o:3}};

Obj3 ={M:2, N:2, J: {H:2, o:3}, p:1};

Note: 1). The target object itself will also become obj1===obj3

2). This method is a shallow merge

3). Undefined does not participate in the merger

4). Prototype not attribute join merge

Situation Two:

Example: Var obj1 ={M:1, N:2, J: {r: {h:2}, P:4}, P:1}

var obj2 ={M:2, n:undefined, J: {H:2, O:3}}

var obj4 = $.extend ({},obj1,obj2);

Result: Obj1 = {m:1, N:2, J: {r: {h:2}, P:4}, p:1};

Obj2 ={M:2, n:undefined, J: {H:2, o:3}};

Obj3 ={M:2, N:2, J: {H:2, o:3}, p:1};

Note: 1). This method is a shallow merge

2). Undefined does not participate in the merger

3). Prototype not attribute join merge

Situation Three:

Example: Var obj1 ={M:1,n:2,j:{r:{h:2},p:4},p:1}

var obj2 ={m:2,n:undefined,j:{h:2,o:3}}

var obj3 = $.extend (TRUE,OBJ1,OBJ2);

Result: Obj1 = {m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};

Obj2 ={m:2,n:undefined,j:{h:2,o:3}};

Obj3 ={m:2,n:2,j:{h:2,o:3,r:{h:2},p:4},p:1};

Note: 1). The target object itself will also become obj1===obj3

2). This method is a deep merge

3). Undefined does not participate in the merger

4). Prototype not attribute join merge

3. Traversal Assignment method

Idea: Assign a value to Obj1 for a property that exists in Obj2 but obj1 not exist.

Steps: 1). Iterates through the properties in the Obj2.

2). Determine that obj1 does not exist for this property

3). Assign a secondary value to Obj1

var extentobj = function (obj1,obj2) {for    (let key in Obj2) {   if (Obj2.hasownproperty (key) && (! Obj1.hasownproperty (key))) {Obj1[key] = Obj2[key]}}}

4. Extended operator implements deep copy of object

var obj = {  name: ' Fungleo ',  sex: ' Man ', old  : '}var {... obj2} = objobj.old = ' console.log ' (obj) console. Log (OBJ2)

The results of the operation are as follows:

Three. Method of cloning 1. Json.parse (Json.stringify ()):

1). Turn the object into a string and then into a JSON object to prevent the object's pointer from pointing to the problem, for a deep copy

2). The properties of the undefined and function types are ignored, and the properties of the Date type are converted to strings

2. $.extend:

True is a deep copy, not a shallow copy

Note: The difference between a deep copy and a shallow copy

A shallow copy takes the reference address as it is, regardless of whether the source object or target object is modified, and the property of the same name is affected by the other object after modifying the reference property.

A deep copy recursively creates a value on the target object, and the target object and the source object are completely independent

Arrays: A For loop implements a deep copy of an array

The For loop is very useful. If you do not know the advanced method, we can accomplish most of our requirements through a for loop.

var arr = [1,2,3,4,5]var arr2 = Copyarr (arr) function Copyarr (arr) {let    res = [] for    (Let i = 0; i < arr.length ; i++) {     res.push (Arr[i])    }    return res}

As above, a deep copy of the array can be realized by a for loop of the array.

Second, the slice method realizes the deep copy of the array

This code implementation is very simple. The principle is also relatively good understanding, he is the original array out of the part to form a new array. We can complete the deep copy of the array as long as it is set to extract all. The code is as follows:

var arr = [1,2,3,4,5]var arr2 = arr.slice (0) arr[2] = 5console.log (arr) Console.log (ARR2)

The results of the operation are as follows:

The Concat method implements the deep copy of the array

This code is also very simple, the principle is more rude. It is a method for connecting multiple arrays to form a new array. So we can do a deep copy of the array just by connecting it to itself. The code is as follows:

var arr = [1,2,3,4,5]var arr2 = arr.concat () arr[2] = 5console.log (arr) Console.log (ARR2)

The results of the operation are as follows:

Four, ES6 extended operators implement deep copies of arrays

OK, the previous method is all out of date, the following method to implement the deep copy of the array is the simplest.

var arr = [1,2,3,4,5]var [... arr2] = arrarr[2] = 5console.log (arr) Console.log ( ARR2)

The results of the operation are as follows:

The merging and cloning of JS----objects and the shades of arrays