Shallow copy

Shallow copies of arrays and objects:

Let arr1 = [1, 2, 3, 4, 5]; let arr2 = arr1; arr2[0] = 5 console.log(arr1); console.log(arr2);

As can be seen from the above diagram, when we change the elements in the ARR2 array, the page of ARR1 will change with it, which makes it difficult for us to understand what is going on for a while. In this case, we can use what we have learned before to understand it! We have learned about basic data types and reference data types. Here arr1 and arr2 share the same object address. Instead of creating a new storage space in the stack, arr1 copies the object address to arr2. We won’t talk much about the stack in this chapter, we’ll talk about it separately later!

Mysql > assign(); mysql > assign();

let obj2 = Object.assign({}, obj);
obj2.age = 20;
obj2.child.name = 'feng';
console.log(obj);
console.log(obj2);

As can be seen from the figure above, when we change obj.age to 20, obj2 is changed, obj is not changed, we think that we have implemented deep copy. However, when we change the name of the child object in obj2 object, we find that obj and obj2 are both changed, which means that the reference address of the internal child object is still the same, which proves that this method is also shallow copy, and does not copy the deeper object!

Similarly, the result is the same as the concat method, both are shallow copies!

3. You can use the JES6 method flat() to implement shallow copy:

Let arr = [1, 2, three, four, five,,7,8,9 [6]]]. let arr1 = arr.flat(); arr1[0] = 0; arr1[2][0] = 10; console.log(arr); console.log(arr1);

The ES6 method flat() was originally introduced to flatten arrays, but it also cleverly implements a shallow copy of arrays or objects, as shown in the figure above. It is the same as the previous Object.assign() method!

Deep copy

Recursive call to deep copy:

function deepClone(obj) { let cloneObj = Array.isArray(obj) ? [] : {}; / / can also do this, this is when we have no way es6 isArray commonly used method to determine whether an Object array / / let cloneObj = Object. The prototype. ToString. Call (obj) = = = '[Object Array]' ? [] : {}; For (const key in obj) {if (obj. HasOwnProperty (key)) {if (obj[key] && typeof obj[key] === = 'object') {  cloneObj[key] = deepClone(obj[key]); } else {cloneObj[key] = cloneObj[key]; } } } return cloneObj; } let obj = [1, 1, {name: 'Peng '},5]; obj1 = deepClone(obj); obj1[0] = 0; obj1[2].name = 'feng'; console.log(obj); console.log(obj1);

As shown in the figure above, we can see that defining a method called deepClone deep copy, using recursive traversal, copies every level of data in an object, ensuring that the copied object is not the same object as the previous object, and does not share the same reference address! When we change the first element of the array and the name attribute of the object in the array, we have no effect on the original object. In this way, we have achieved traditional deep copy! Let’s see if there are other ways to do deep copy!

You can use the object methods JSON.parse() and JSON.stringify() to implement deep copy:

let obj = {
    a: {
        b: 'peng'
    }
}
let cloneObj = JSON.parse(JSON.stringify(obj));
cloneObj.a.b = 'feng';
console.log(obj)
console.log(cloneObj);

As shown in the figure above, we can see that this method can change the deep data of the object, so this method can implement deep copy! But there are drawbacks to this approach;

  • Property as undefined will not be copied. Property cannot be copied
  • The symbol type cannot be copied as undefined above
  • If the property is function, there is no way to copy it
  • Cannot resolve objects referenced through a loop

So try not to use this method, but be aware!

JQuery extends () for a deep copy:

$.extend([deep], target, object)

The first argument is whether it is a deep copy, true is deep copy, and vice versa. The second argument is whether to copy an object or an array, and the third argument is the target value object or array to copy

Let obj = [0, 1, 2, 3], 4], obj1 = $. The extend (true, [], obj); obj[0] = 1; obj[2][0] = 1; console.log(obj); console.log(obj1);

As shown in the figure above, we find that no matter it is the first layer data or the second layer data, only the modified object will be changed, and another copied object will not be changed! Implemented deep copy!

conclusion

Depth copy mission is to copy the object is actually a new object, if is a common reference to an object reference address, or can only change a layer object or array reference address instead of the entire array or object all level change, this is a shallow copy, if we can replicate a new object, reference address is different, So it’s a deep copy! If you’re using a deep copy for that long use the DeeoClone method carefully! Bridge copy of the words that a few are similar, can consider by themselves. Thank you all for your support!