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

Detaillierte Schritte zum Löschen von Umgebungsvariablen in Linux

Wie lösche ich Umgebungsvariablen unter Linux? Ve...

So ändern Sie die Container-Portzuordnung in Docker dynamisch

Vorwort: Die Docker-Portzuordnung erfolgt häufig,...

Implementierungscode für unendliches Scrollen mit n Containerelementen

Szenario So rendern Sie Listen mit bis zu 10.000 ...

Vue + Element + OSS realisiert das Hochladen von Front-End-Fragmenten und die Wiederaufnahme von Haltepunkten

Reine Front-End-Implementierung:切片上傳斷點續傳.斷點續傳muss...

Ausführliches Tutorial zur CentOS-Installation von MySQL5.7

In diesem Artikel werden die detaillierten Schrit...

MySQL 5.7.18 Installer Installation Download Grafik-Tutorial

Dieser Artikel enthält das ausführliche Installat...

Eine einfache Erklärung der parallelen MySQL-Replikation

1. Hintergrund der parallelen Replikation Zunächs...