Tutorial on shallow copy and deep copy of JS arrays and objects

Mutual encouragement~

In many programming languages, passing parameters and assigning values ​​are completed through direct copying of values ​​or copying by reference. In JavaScript, there is no syntax difference between whether a value is copied directly or by reference. It is entirely determined based on the type of the value.

In JavaScript, simple values ​​are always assigned and passed by direct copying of the value (null, undefined, string, number, Boolean, symbol), while compound values ​​(objects (including arrays) etc.) and functions) are always assigned and passed by reference copying.

The following example can deepen understanding:

var a = 1;var b = a;
b++;
a; //1b; //2var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

Shallow copy of array

The assignment operation of the array in the above example is a shallow copy of the array. It is not difficult to find the problem. When one array changes, other assigned arrays will also change. In many situations similar to backup, this is not the result we want.

var c = [1,2];var d = c;
d.push(3);
c; //[1,2,3]d; //[1,2,3]

Deep copy of array

We can implement deep copy of array in two ways:

var a = [1,2,3];var b = a.slice(0);var c = a.concat();

b.push(4);

c.push(5);

a; //[1,2,3]b; //[1,2,3,4]c; //[1,2,3,5]

Object Shallow copy

Relatively speaking, the copy of the array is relatively simple, and the shallow copy of the object can also be easily implemented:

function easyClone(Obj) {var objNew = {};for ( var i in Obj) {
        objNew[i] = Obj[i];
    }return objNew;
}

In fact, it is to copy the copy of each original object Properties and values ​​are copied to the new object. Of course, we can also use the Object.assign() method to copy any number of the source object's own enumerable properties to the target object, and then return the target object. At the same time, Object.assign() It is also a shallow copy, interested students can take a look.

Shallow copy does not have a recursive loop to check whether each value of the object is an object, but directly assigns the value, so if a certain value is an object, problems will occur, so in general we need Use deep copy for backup.

Deep copy of object

The simplest deep copy:

b = JSON.parse( JSON.stringify(a) )

Limitations:

• Unable to copy function

• The prototype chain is gone, the object is object, and the class it belongs to is gone.

In fact, a simple deep copy only requires us to recursively call a shallow copy:

function deepCopy(obj) {
　　var objNew = objNew || {};
　　for (var i in obj) {
　　　　if (typeof p[i] === 'object') {
　　　　　　objNew[i] = (p[i].constructor === Array) ? [] : {};
　　　　　　deepCopy(obj[i], objNew[i]);
　　　　} else {
　　　　　　　objNew[i] = obj[i];
　　　　}
　　}
　　return objNew;
}

Of course JQ jQuery.extend() method can also do deep copy and shallow copy: For details, please refer to this article:

Shallow copy and deep copy $.extend analysis in jQuery

The above is the detailed content of Tutorial on shallow copy and deep copy of JS arrays and objects. For more information, please follow other related articles on the PHP Chinese website!