Ausführliche Erklärung der tiefen Kopie des Javascript-Arrays

Für JavaScript sind Arrays Referenztypen. Wenn Sie ein Array kopieren möchten, müssen Sie gründlich nachdenken, da Funktionen wie Concat und Slice flache Kopien sind. Mit anderen Worten: Wenn Sie bei einem zweidimensionalen Array concat zum Kopieren verwenden, ist das zweidimensionale Array immer noch eine Referenz. Durch Ändern des neuen Arrays wird auch das alte Array geändert.

Seitdem wollte ich eine Deep-Copy-Funktion schreiben, um das Deep-Copyping von Gruppen zu unterstützen.

Im Allgemeinen kann die Zuweisung mit „=" erfolgen. Für Referenztypdaten wie Arrays, Objekte, Funktionen usw. ist dieses Symbol jedoch nicht einfach zu verwenden.

1. Einfache Kopie des Arrays

1.1 Einfaches Durchlaufen

Der einfachste und grundlegendste Weg ist die natürliche Schleifenverarbeitung. Beispiel:

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 Kopierimplementierung

Tricks, die häufig in Interviewfragen auftauchen, werden implementiert mit der Slice- oder Contcat-Methode. Beispiel:

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. Tiefe Kopie des Arrays

Gewöhnliches eindimensionales Array und der Wert ist ein Nicht-Referenztyp , verwenden Sie die oben genannte Methode. Es gibt kein Problem mit der Methode, sonst wäre sie problematischer. Deep Copy muss den Fall berücksichtigen, dass der Array-Wert aus verschiedenen Referenztypen besteht.

2.1 Verwenden Sie die JSON-Methode

JSON.stringify(array) und dann JSON.parse(). Beispiel:

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]);

Diese Methode weist Kompatibilitätsprobleme mit älteren Browsern auf. Wenn tatsächlich Kompatibilität erforderlich ist, können die folgenden kompatiblen Dateien eingeführt werden:

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

Hinweis: Wenn Das Array Der Wert ist eine Funktion und die obige Methode funktioniert immer noch nicht.

2.2 Vollständige Implementierung von Deep Copy

Unter Berücksichtigung der Verschachtelung mehrdimensionaler Arrays und der Situation, dass die Array-Werte Objekte sind, kann die folgende Prototypenerweiterung vorgenommen werden (natürlich). kann auch als gewöhnliche Funktionsimplementierung geschrieben werden, Prototyp-Erweiterung wird nicht empfohlen):

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 Verwenden Sie die Extend-Methode von jQuery

Wenn Sie jQuery verwenden, ist es am einfachsten, die Erweiterungs-Plugin-Methode zu verwenden. Beispiel:

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);