Detailed explanation of javascript array deep copy

For JavaScript, arrays are reference types. If you want to copy an array, you have to think hard because functions including concat and slice are shallow copies. In other words, for a two-dimensional array, if you use concat to copy, the second-dimensional array is still a reference. Modifying the new array will also change the old array.

So, I wanted to write a deep copy function to help with deep copying of groups.

Generally, assignment can be achieved using "=". But for reference type data such as arrays, objects, functions, etc., this symbol is not easy to use.

1. Simple copy of array

1.1 Simple traversal

The simplest and most basic way is naturally loop processing. Example:

JavaScript

function array_copy(arr) {
var out = [], i, len;
if (out[i] instanceof Array === false){
return arr;
}
for (i = 0, len = arr.length; i < len; i++) {
if (out[i] instanceof Array){
out[i] = deepcopy(arr[i]);
} else {
out[i] = arr[i];
}
};
return a;
}
//测试
var arr1 = [1, 2, 3, 4],
arr2 = array_copy(arr1);
console.log(arr1, arr2);
arr2[2] = 10;
console.log(arr1[2], arr2[2]);
function array_copy(arr) {
var out = [], i, len;
if (out[i] instanceof Array === false){
return arr;
}
for (i = 0, len = arr.length; i < len; i++) {
if (out[i] instanceof Array){
out[i] = deepcopy(arr[i]);
} else {
out[i] = arr[i];
}
};
return a;
}
//测试
var arr1 = [1, 2, 3, 4],
arr2 = array_copy(arr1);
console.log(arr1, arr2);
arr2[2] = 10;
console.log(arr1[2], arr2[2]

1.2 Alternative copy implementation

A trick that often appears in interview questions is to use the slice or contcat method. Example:

JavaScript

var arr1 = [1, 2, 3, 4],
arr2 = arr1.slice(0),
arr3 = arr1.concat();
console.log(arr1, arr2, arr3);
arr2[2] = 10;
arr3[2] = 11;
console.log(arr1[2], arr2[2], arr3[2]);
var arr1 = [1, 2, 3, 4],
arr2 = arr1.slice(0),
arr3 = arr1.concat();
console.log(arr1, arr2, arr3);
arr2[2] = 10;
arr3[2] = 11;
console.log(arr1[2], arr2[2], arr3[2]);

2. Deep copy of array

For an ordinary one-dimensional array and the value is a non-reference type, there is no problem using the above method, otherwise it will be more troublesome. Deep copy needs to consider the case where the array value is a variety of reference types.

2.1 Use JSON method

JSON.stringify(array) and then JSON.parse(). Example:

JavaScript

var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],
arr2 = JSON.parse(JSON.stringify(arr1));
console.log(arr1, arr2);
arr2[1] = 10;
arr2[3].a = 20;
console.log(arr1[1], arr2[1]);
console.log(arr1[3], arr2[3]);
var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],
arr2 = JSON.parse(JSON.stringify(arr1));
console.log(arr1, arr2);
arr2[1] = 10;
arr2[3].a = 20;
console.log(arr1[1], arr2[1]);

console.log(arr1[3], arr2[3]);

This method has compatibility issues with ancient browsers. If you really need to make compatibility, you can introduce the following compatible files to solve the problem:

https://github.com/douglascrockford/JSON-js/blob/master/json2.js

Note: If the array value is a function, the above method still does not work of.

2.2 Full implementation of deep copy

Considering the nesting of multi-dimensional arrays and the situation where the array values ​​are objects, the following prototype extension can be made (of course it is also possible to write it as an ordinary function, prototype extension is not recommended) :

JavaScript

Object.prototype.clone = function () {
var o = {};
for (var i in this) {
o[i] = this[i];
}
return o;
};
Array.prototype.clone = function () {
var arr = [];
for (var i = 0; i < this.length; i++)
if (typeof this[i] !== &#39;object&#39;) {
arr.push(this[i]);
} else {
arr.push(this[i].clone());
}
return arr;
};
//测试1 Object
var obj1 = {
name: &#39;Rattz&#39;,
age: 20,
hello: function () {
return "I&#39;m " + name;
}
};
var obj2 = obj1.clone();
obj2.age++;
console.log(obj1.age);
//测试2 Array
var fun = function(log) {console.log},
arr1 = [1, 2, [3, 4], {a: 5, b: 6}, fun],
arr2 = arr1.clone();
console.log(arr1, arr2);
arr2[2][1]= &#39;Mike&#39;;
arr2[3].a = 50;
arr2[4] = 10;
console.log(arr1, arr2);
Object.prototype.clone = function () {
var o = {};
for (var i in this) {
o[i] = this[i];
}
return o;
Array.prototype.clone = function () {
var arr = [];
for (var i = 0; i < this.length; i++)
if (typeof this[i] !== &#39;object&#39;) {
arr.push(this[i]);
} else {
arr.push(this[i].clone());
}
return arr;
//测试1 Object
var obj1 = {
name: &#39;Rattz&#39;,
age: 20,
hello: function () {
return "I&#39;m " + name;
}
var obj2 = obj1.clone();
console.log(obj1.age);
//测试2 Array
var fun = function(log) {console.log},
arr1 = [1, 2, [3, 4], {a: 5, b: 6}, fun],
arr2 = arr1.clone();
console.log(arr1, arr2);
arr2[2][1]= &#39;Mike&#39;;
arr2[3].a = 50;
arr2[4] = 10;
console.log(arr1, arr2);

2.3 Use jQuery’s extend method

If you are using jQuery, then the easiest way is to use the extend plug-in method. Example:

JavaScript

var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],
arr2 = $.extend(true, [], arr1);
console.log(arr1, arr2);
arr2[1] = 10;
console.log(arr1, arr2);
var arr1 = [1, 2, [3, 4], {a: 5, b: 6}, 7],
arr2 = $.extend(true, [], arr1);
console.log(arr1, arr2);
arr2[1] = 10;
console.log(arr1, arr2);