Einführung in das tiefe Klonen von JavaScript-Objekten_Javascript-Fähigkeiten

Ich weiß nicht, wann im Front-End-Kreis ein neues Wort auftauchte: Object Deep Cloning. Es mag sehr hochtrabend erscheinen, aber in der Tat ist es nicht neu. In unserer tatsächlichen Projektentwicklung haben Sie es möglicherweise bereits verwendet. Aufgrund der breiten und tiefgründigen chinesischen Schriftzeichen werden jedoch einige ursprünglich einfache Dinge durch einige scheinbar professionelle Vokabeln verdeckt . Fügen Sie Verzierungen hinzu und es wird geheimnisvoll.

Warum überhaupt ein Objekt tief klonen? Erlauben Sie mir bitte eine Vermutung: Sie müssen manchmal denken, dass das integrierte Objektdokument von js zu lang ist, dann können Sie Folgendes tun:

Code kopieren Der Code lautet wie folgt:

var d = document;
d.by = function(id){
Gibt d.getElementById(id);
zurück };
d.by('id').innerHTML = 'hello sentsin';

Der obige Code vereinfacht document.getElementById und fügt dem ursprünglichen Dokumentobjekt auch eine by-Member-Methode hinzu. Sie können Ihre Beurteilung anhand des von document.hasOwnProperty('by') zurückgegebenen Statuswerts überprüfen. Schauen Sie sich das folgende Beispiel an.

Code kopieren Der Code lautet wie folgt:

var person = {Name: 'Xianxin', Beruf: 'Front-End-Entwicklung', Ort: 'Hangzhou'};
var newPerson = person;
newPerson.age = '24';
console.log(person);
//Ergebnis: {Name: 'Xianxin', Beruf: 'Front-End-Entwicklung', Ort: 'Hangzhou', Alter: 24}

Es ist ersichtlich, dass, wenn ein Objekt einfach an eine neue Variable übergeben wird, dem Objekt nur ein Alias ​​hinzugefügt wird. Dies bedeutet, dass sich durch die Bearbeitung des Alias ​​der ursprüngliche Objektschlüsselwert ändert. Das Problem besteht jedoch darin, dass wir manchmal möchten, dass newPerson völlig unabhängig von der Person ist und keine Synchronisierungsbeziehung zwischen ihnen besteht. Daher müssen wir eine Kopie erstellen. Sehen Sie sich hierzu das Beispiel an:

Code kopieren Der Code lautet wie folgt:

var cloneObj = function(obj){
var str, newobj = obj.constructor === Array ? [] : {};
If(typeof obj !== 'object'){
         zurück;
} else if(window.JSON){
         str = JSON.stringify(obj), //Serialisiertes Objekt
​​​​ newobj = JSON.parse(str); //Wiederherstellen
} sonst {
for(var i in obj){
newobj[i] = typeof obj[i] === 'object' ?                cloneObj(obj[i]): obj[i]; }
}
Geben Sie newobj;
zurück };

//Test

var obj = {a: 0, b: 1, c: 2};
var arr = [0, 1, 2];
//Tiefes Klonen durchführen
var newobj = cloneObj(obj);
var newarr = cloneObj(arr);
//Mitglieder des neuen Objekts nach dem Klonen löschen
lösche newobj.a;
newarr.splice(0,1);
console.log(obj, arr, newobj, newarr);
//Ergebnis: {a: 0, b: 1, c: 2}, [0, 1, 2], {b: 1, c: 2}, [1, 2];

Dies wird als Objektklonen bezeichnet. Allerdings gibt es ein paar Dinge, die einer Erklärung bedürfen. Das JSON-Objekt im Code und seine Mitgliedsmethoden stringify und parse gehören zur ECMAScript5-Spezifikation. Sie sind jeweils für die Konvertierung eines Objekts (einschließlich Array-Objekten) in einen String und dessen Wiederherstellung verantwortlich, wodurch eine tiefe Kopie des Objekts realisiert wird. Wenn Sie also bei Low-Level-Browsern (z. B. IE) ein Array kopieren, können Sie newobj.concat(obj) verwenden, und bei gewöhnlichen Objekten können Sie einfach Werte auflisten und zuweisen.