Kopieren von JS-Objekten (Deep Copy und Shallow Copy)

Kopieren von JS-Objekten (Deep Copy und Shallow Copy)

1. Oberflächliche Kopie

1. Objekt.zuweisen(Ziel, Quelle, Quelle…)

a. Unterstützt die Replikation mehrerer Objekte

b. Wenn die Quell- und Zielattribute identisch sind, kopiert die Quelle die Zielattribute

c. Ziel kann nur ein Objektobjekt sein

var obj = {a:1,b:2}
undefiniert
Objekt.zuweisen({c:3},obj)
{c: 3, a: 1, b: 2}
obj
{a: 1, b: 2} 
Kompatibilität schreiben if (Object.assign) {//kompatibel} else {//inkompatibel}

2. Spread-Operator

Unterstützt das Kopieren mehrerer Objekte in ein Objekt"

var obj1 = { foo: "foo" };
var obj2 = { bar: "bar" };
 
var copySpread = { ...obj1, ...obj2 }; // Objekt {foo: "foo", bar: "bar"}
KopierenVerbreiten 
{foo: "foo", bar: "bar"}
var obj = {a:1,b:2,c:3}
var objs = {...obj}
Objekte
{a: 1, b: 2, c: 3}
objs.a=10
10
Objekte
{a: 10, b: 2, c: 3}
obj
{a: 1, b: 2, c: 3}

2. Tiefe Kopie

1. Verwenden Sie die Objektserialisierung JSON.stringify() und JSON.parse()

Hinweis: Diese Methode funktioniert nur, wenn das Originalobjekt serialisierbare Werttypen enthält und keine zirkuläre Referenzen aufweist. Ein Beispiel für einen nicht serialisierbaren Wertetyp ist ein Date-Objekt. JSON.parse kann es nur in einen String analysieren und nicht zurück in sein ursprüngliches Date-Objekt oder ein Objekt analysieren, dessen Eigenschaftswert eine Funktion ist.

var obj = {a:1,b:[1,2,3],c:{e:3},bool:false}
undefiniert
var objs = JSON.parse(JSON.stringify(obj))
undefiniert
Objekte
{a: 1, b: Array(3), c: {…}, bool: false}
objs.bool = true
WAHR
Objekte
{a: 1, b: Array(3), c: {…}, bool: true}
obj
{a: 1, b: Array(3), c: {…}, bool: false}

2. Verwenden Sie Rekursion, um Objekteigenschaften zu beurteilen

Funktion deepClone(Objekt) {
  var kopieren;
 
  // Wenn obj null, undefiniert oder kein Objekt ist, gib obj direkt zurück
  // Behandeln Sie die 3 einfachen Typen und null oder undefiniert
  wenn (null == Objekt || "Objekt" != Typ von Objekt) returniere Objekt;
 
  // Datum verarbeiten
  wenn (Objektinstanz von Datum) {
    kopieren = neues Datum();
    Kopieren.Zeit festlegen(Objekt.Zeit abrufen());
    Rückexemplar;
  }
 
  // Array verarbeiten
  wenn (Objektinstanz von Array) {
    kopieren = [];
    für (var i = 0, len = obj.length; i < len; i++) {
        Kopie[i] = Klon(Objekt[i]);
    }
    Rückexemplar;
  }
 
  //Handle-Funktion
  if (obj Instanz der Funktion) {
    kopieren = Funktion() {
      returniere obj.apply(diese, Argumente);
    }
    Rückexemplar;
  }
 
  //Objekt handhaben
  if (obj Instanz von Objekt) {
      kopieren = {};
      für (var attr in obj) {
          wenn (obj.hasOwnProperty(attr)) Kopie[attr] = Klon(obj[attr]);
      }
      Rückexemplar;
  }
 
  throw new Error("Objekt kann nicht kopiert werden, da Typ nicht unterstützt wird" + obj.constructor.name);
}

Oben sind die Details zum Kopieren von JS-Objekten (Deep Copy und Shallow Copy) aufgeführt. Weitere Informationen zu JS finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!

Das könnte Sie auch interessieren:
  • Detaillierte Erläuterung der flachen und tiefen Kopie von JS-Objekten
  • Zwei Methoden zum Deep Copy und Shallow Copy eines JavaScript-Arrays
  • JavaScript-Grundlagen: Flaches und tiefes Kopieren (Shallow and Deep Copying)
  • Detaillierte Erklärung des Codes zur Implementierung von Shallow Copy und Deep Copy in JS
  • Tiefgreifendes Verständnis von JavaScript Deep Copy, Shallow Copy und Zirkelreferenz
  • Detaillierte Beispiele für JS-Zuweisung, Shallow Copy und Deep Copy (tiefe und flache Kopien von Arrays und Objekten)
  • Analyse der Prinzipien und Implementierungsmethoden von JS Shallow Copy und Deep Copy
  • Detaillierte Erklärung von JavaScript Deep Copy und Shallow Copy
  • Detaillierte Erklärung von JS Deep Copy und Shallow Copy
  • Ausführliche Erklärung zu JS Deep Copy und Shallow Copy

<<:  Befehl zum Anzeigen der Erstellungszeit der Binlog-Datei unter Linux

>>:  Zusammenfassung der Linux-Benutzergruppen und -Berechtigungen

Artikel empfehlen

JavaScript, um das Bild mit der Maus zu bewegen

In diesem Artikel wird der spezifische JavaScript...

JavaScript-Canvas zum Erzielen eines farbenfrohen Uhreffekts

Verwenden Sie Leinwand, um eine bunte Uhr zu schr...

Detailliertes Tutorial zur Installation eines PXC-Clusters mit Docker

Inhaltsverzeichnis Vorwort Vorbereitende Vorberei...

Tutorial zur Samba-Konfiguration für die Dateifreigabe im Linux-System

Inhaltsverzeichnis Deinstallieren und installiere...

Detaillierte Erläuterung des Prozessmanagements im Linux-System

Inhaltsverzeichnis 1. Das Konzept von Prozess und...

So erhalten Sie die Breite und Höhe des Bildes im WeChat-Applet

Herkunft Zurzeit arbeite ich an Anforderung A, in...

HTML-Tutorial: DOCTYPE-Abkürzung

Beim Schreiben von HTML-Code sollte die erste Zei...

So entfernen Sie die Kopfzeile aus der Elementtabelle

Dokumenthinweise mit dem Attribut show-header <...

Installations- und Verwendungsschritte für vue-amap

Ich habe zuvor die Verwendung des asynchronen Lad...

Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML

HTML zum Erreichen eines einfachen ListViews-Effe...