Detaillierte Erläuterung der Prinzipien des tiefen und flachen Klonens von JavaScript-Arrays und Nicht-Array-Objekten

Was sind flaches und tiefes Klonen?

Flaches Klonen: Weisen Sie den im Stapel gespeicherten Wert direkt der entsprechenden Variablen zu. Wenn es sich um einen Basisdatentyp handelt, wird der entsprechende Wert direkt zugewiesen. Wenn es sich um einen Referenztyp handelt, wird die Adresse zugewiesen.
Tiefes Klonen: Weisen Sie Daten den entsprechenden Variablen zu, um neue Daten zu generieren, die in keinem Zusammenhang mit den Quelldaten stehen (die Datenadresse hat sich geändert). Das heißt, die Eigenschaften jeder Ebene des Objekts.
In JavaScript können grundlegende Datentypen mit dem Symbol "=" geklont werden, und Referenzdatentypen verwenden das Symbol "=" nur, um den Zeiger der Variablen zu ändern, ohne einen echten Klonvorgang durchzuführen.

1. Klonen Sie das Array

1.1 Oberflächliches Klonen

Verwenden Sie eine For-Schleife, um einen oberflächlichen Klon durchzuführen.

var arr1 = ['demo', 1, 2];
var arr2 = [];
// Oberflächlicher Klon des Arrays für (var i = 0; i < arr1.length; i++) {
    arr2[i] = arr1[i];
}
Konsole.log(arr2);
Konsole.log(arr1 == arr2);

Ausgabe:

Array(3)0: "Demo"1: 12: 2Länge: 3[[Prototyp]]: Array(0)
FALSCH

1.2 Tiefes Klonen

Verwenden Sie Rekursion für tiefes Klonen.

Funktion deepClone(o) {
	var Ergebnis = [];
	für (var i = 0; i < o.Länge; i++) {
		Ergebnis.push(deepClone(o[i]));
	}
	Ergebnis zurückgeben;
}

2. Klonen von Nicht-Array-Objekten

2.1 Oberflächliches Klonen

Verwenden Sie eine For-Schleife, um einen oberflächlichen Klon durchzuführen.

var obj1 = { a: 1, b: 2, c: 3, d: [4, 5, { e: 'demo' }] };
var obj2 = {};
// Oberflächlicher Klon des Objekts für (var i in obj1) {
    obj2[i] = obj1[i];
}
konsole.log(obj2);
console.log(obj1 == obj2);

Ausgabe:

{a: 1, b: 2, c: 3, d: Array(3)}
FALSCH

2.2 Tiefes Klonen

Verwenden Sie Rekursion für tiefes Klonen.

Funktion deepClone(o) {
	var Ergebnis = {};
	für (var i in o) {
		Ergebnis[i] = deepClone(o[i]);
	}
	Ergebnis zurückgeben;
}

3. Integrieren Sie die Deep-Clone-Funktion

var obj1 = { a: 1, b: 2, c: 3, d: [4, 5, { e: 'demo' }] };
var arr1 = ['demo', 1, 2];
// Tiefe Klonfunktion deepClone(o) {
    wenn (Array.isArray(o)) {
        // ist ein Array var result = [];
        für (var i = 0; i < o.Länge; i++) {
            Ergebnis.push(deepClone(o[i]));
        }
    } sonst wenn (Typ von o == 'Objekt') {
        // Kein Array, sondern ein Objekt var result = {};
        für (var i in o) {
            Ergebnis[i] = deepClone(o[i]);
        }
    } anders {
        // Basistypwert var result = o;
    }
    Ergebnis zurückgeben;
}
console.log(deepClone(arr1));
console.log(deepClone(obj1));

Damit ist dieser Artikel über die detaillierten Prinzipien des tiefen und flachen Klonens von JavaScript-Arrays und Nicht-Array-Objekten abgeschlossen. Weitere relevante Inhalte zu JavaScript-Arrays finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder durchsuchen Sie die verwandten Artikel weiter unten. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird!