JavaScript Deep Copy wird von Anfängern entwickelt und sogar erfahren. Sie stoßen häufig auf Probleme und können JavaScript Deep Copy nicht sehr gut verstehen.
Deepclone?
Das Gegenteil der tiefen Kopie ist eine flache Kopie. Viele Anfänger sind verwirrt, wenn sie mit diesem Gefühl in Kontakt kommen.
Warum Deep Copy verwenden?
In vielen Fällen müssen wir Variablen Werte zuweisen und der Speicheradresse einen Wert zuweisen. Bei der Zuweisung eines Referenzwerttyps teilen wir jedoch nur einen Speicherbereich, der bei der Zuordnung zu einer Konsistenz mit dem vorherigen Wert führt.
Siehe ein bestimmtes Beispiel
// Zuwenden Sie ein Objekt zum Testen var test = {a: 'a', b: 'b'}; // Tester2 // zu diesem Zeitpunkt test und test2 das gleiche Speicherobjekt teilen, das ist die flache Kopie von var test2 = test; test2.a = 'A2';Illustration:
Dies ist eine gute Idee, um zu verstehen, warum Daten für Referenzwerttypen sich gegenseitig beeinflussen.
erreichen
Um eine Deep Copy -Funktion zu implementieren, müssen wir über den numerischen JavaScript -Typ sprechen.
Bestimmen Sie den JavaScript -Typ
Es gibt die folgenden Grundtypen in JavaScript
Geben Sie Beschreibung ein
Der undefinierte Definierte Typ hat nur einen Wert undefinierter Wert, was der Wert ist, wenn die Variable nicht zugewiesen wird.
Der Nullnull -Typ hat auch nur einen Wertnull, er ist eine leere Objektreferenz
Booleanboolean hat zwei Werte: wahr und falsch
Zeichenfolge Es repräsentiert Textinformationen
Nummer, die digitale Informationen darstellt
Objekt Es ist eine ungeordnete Sammlung einer Reihe von Eigenschaften, einschließlich Funktionsfunktion und Array -Array
Es ist unmöglich, die Funktion und das Array unter Verwendung von Typof zu beurteilen. Hier verwenden wir die Methode von Object.Prototype.ToString.
[Standardmäßig erbt jedes Objekt vom Objekt zur Methode toString (). Wenn diese Methode mit der gleichen Namensmethode auf dem Objekt selbst oder einem genaueren oberen Prototyp nicht überschrieben (blockiert) wird, wird die Methode des Objekts toString () aufgerufen und der String -Typ hier repräsentiert einen Objekttyp] [1]
Funktionstyp (obj) {var toString = Object.Prototype.toString; var map = { '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regExp', '[object Undefined]': 'undefined', '[object Null]' : 'null', '[Objektobjekt]': 'Objekt'}; Return Map [toString.call (OBJ)];};}Deepclone implementieren
Für numerische Werte nicht referenzierter Werttypen wird der Wert direkt zugewiesen, und für die referenzierten Werttypen (Objekt) müssen Sie erneut durchqueren und rekursiv zuweisen.
Funktion DeepClone (Daten) {var t = type (data), o, i, ni; if (t === 'Array') {o = []; } else if (t === 'Objekt') {o = {}; } else {returndaten; } if (t === 'array') {für (i = 0, ni = data.length; i <ni; i ++) {o.push (DeepClone (data [i])); } return o; } else if (t === 'Objekt') {für (i in Daten) {o [i] = DeepClone (Daten [i]); } return o; }}Es gibt hier einen Punkt, auf den jeder aufpassen sollte. Für Funktionstypen weist der Blogger die Werte direkt zu oder teilen Sie einen Speicherwert. Dies liegt daran, dass es bei Funktionen mehr darum geht, bestimmte Funktionen mit einem Eingabwert und einem Rückgabewert zu erfüllen, und für Dienste der oberen Ebene geht es mehr um die Ausführung von Geschäftsfunktionen, und es müssen die Funktion nicht wirklich kopiert werden.
Aber wie kopiere ich den Funktionstyp?
Tatsächlich dachte der Blogger nur daran, neu für den Betrieb zu verwenden, aber die Funktion wird einmal ausgeführt, und ich wage mich nicht vorzustellen, wie das Ausführungsergebnis aussehen wird! o (□) o! Ich habe noch keine guten Ideen, bitte geben Sie mir Anleitung!
Zu diesem Zeitpunkt wurde die tiefe Kopie fast abgeschlossen, aber einige Leute denken, warum wurde die flache Kopie nicht umgesetzt?
Eine flache Kopie?
Für flache Kopien kann es als Betrieb nur ein gemeinsamer Speicherbereich verstanden werden! Hier wird es Gefahr geben! (..*)
Wenn Sie diese gemeinsam genutzten Daten direkt betreiben, ohne sie zu kontrollieren, treten häufig Datenausnahmen auf und werden durch andere Teile geändert. Daher sollten Sie die Datenquelle nicht direkt bedienen und einige Methoden zusammenfassen, um Curd -Operationen für die Daten auszuführen.
Hier ist es wahrscheinlich fast genauso, aber als Front-End berücksichtigt es nicht nur JavaScript selbst, sondern auch DOM, Browser usw.
Elementtyp
Schauen wir uns den folgenden Code an. Was wird im Ergebnis zurückgegeben?
Object.prototype.toString.call(document.getElementsByTagName('div')[0])
Die Antwort ist [Objekt htmldelement]
Manchmal, wenn das DOM -Element gespeichert wird und wenn Sie es versehentlich tief kopieren, fehlt der obigen Deep Copy -Funktion das Urteil über das Elementelement. Um das Elementelement zu beurteilen, verwenden Sie Instanz, um zu beurteilen. Denn für verschiedene Tags wird der Konstruktor, der verschiedenen Tags entspricht, zurückgegeben.
Funktionstyp (obj) {var toString = Object.Prototype.toString; var map = { '[object Boolean]' : 'boolean', '[object Number]' : 'number', '[object String]' : 'string', '[object Function]' : 'function', '[object Array]' : 'array', '[object Date]' : 'date', '[object RegExp]' : 'regExp', '[object Undefined]': 'undefined', '[object Null]' : 'null', '[Objektobjekt]': 'Objekt'}; if (obj instanceof element) {return 'Element'; } return map [toString.call (obj)];};}Andere Wege?
Implementierung von JQuery
Weitere Informationen finden Sie unter https: //github.com/jquery/jqu ...
Implementierung unterstreichen
Weitere Informationen finden Sie unter https: //github.com/jashkenas/...
Lodash -Implementierung
Weitere Informationen finden Sie unter https: //github.com/lodash/lod ...
JSON -Implementierung
Sie können eine tiefe Kopie erkennen, indem Sie zuerst JSON.Stringify und dann JSON.Parse übergeben. Der Datentyp unterstützt jedoch nur grundlegende numerische Typen.
var obj = {a: 'a', b: function () {console.log ('b')}} // Wenn json.stringify die Funktion gefiltert wird. Json.Stringify (obj) // "{" a ":" a "}"Zusammenfassung
Hier fassen wir grob die tiefe Kopie zusammen und wie man eine tiefe Kopie implementiert. In verschiedenen Szenarien ist zu bestimmen, ob eine Deep -Kopie basierend auf dem Geschäftsszenario benötigt wird.