Deep-Copy-Parsing von JavaScript-Arrays-js-Tutorial-php.cn

Deep-Copy-Parsing von JavaScript-Arrays

高洛峰

Freigeben： 2016-12-08 10:32:21

Original

1653 Leute haben es durchsucht

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

Nach dem Login kopieren

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

Nach dem Login kopieren

2. Tiefe Kopie des Arrays

Gewöhnliches eindimensionales Array und der Wert Für Nicht-Referenztypen stellt die Verwendung der oben genannten Methode kein Problem dar, da sie sonst problematischer wird. Beim tiefen Kopieren muss der Fall berücksichtigt werden, dass die Array-Werte verschiedene Referenztypen haben.

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren