Deep-Copy-Array in JavaScript

1. Einführung in Shallow Copy und Deep Copy in JavaScript
2. Verwenden Sie die structuredClone()-Methode, um eine tiefe Kopie eines Objekts in JavaScript zu erstellen
3. Verwenden Sie die Methoden JSON.parse() und JSON.stringify(), um eine tiefe Kopie eines Objekts in JavaScript zu erstellen
4. Verwenden Sie die Lodash-Bibliothek, um eine tiefe Kopie eines Objekts in JavaScript zu erstellen

In diesem Artikel lernen Sie das Konzept der tiefen und flachen Kopie kennen. Der Artikel stellt auch Möglichkeiten zum Ausführen von Deep Copy auf Arrays in JavaScript vor.

Einführung in Shallow Copy und Deep Copy in JavaScript

In JavaScript kann ein Objekt auf zwei Arten kopiert werden. Sie sind tiefe Kopie und flache Kopie.

Lassen Sie uns zunächst über flache Kopien sprechen. Eine flache Kopie eines Objekts hat Eigenschaften, die auf denselben Verweis wie die Eigenschaften des Quellobjekts verweisen.

Das Quellobjekt ist hier das Objekt, von dem die Kopie erstellt wird. Da das Objekt und seine flache Kopie dieselben Referenzen verwenden, spiegelt sich die in einem von ihnen vorgenommene Änderung im anderen Objekt wider.

Lassen Sie es uns an einem Beispiel verstehen.

Stellen Sie sich ein Objekt student1 mit der Eigenschaft namens name und dem Wert kevin vor. Erstellen Sie als Nächstes eine weitere Variable, student2, und weisen Sie ihr den Wert student2 zu.

let student1 = {name: 'kevin'}

let student2 = student1

Hier haben wir nur eine flache Kopie des Objekts student1 erstellt. Versuchen wir nun, den Wert der Eigenschaft name auf etwas anderes aus dem Objekt student2 zu ändern.

Der neue Wert ist beispielsweise john. Wenn wir beide Objekte student1 und student2 drucken, ist der Wert derselbe: john.

Beispielcode:

let student1 = {name: 'kevin'}

let student2 = student1

 student2.name = "john"

console.log(student1)
console.log(student2)

Ausgang:

{
  name: "john"
}
{
  name: "john"
}

So verhält sich eine flache Kopie eines Objekts. Es kann die Eigenschaften des Quellobjekts ändern, da beide Objekte dieselben Referenzen verwenden.

Die tiefe Kopie eines Objekts verhält sich jedoch genau umgekehrt. Da die Kopie und das Quellobjekt nicht auf dieselbe Referenz verweisen, ändert das Ändern einer der Eigenschaften des Objekts nicht die anderen.

In den folgenden Abschnitten erfahren Sie mehr über Deep Copy und Möglichkeiten, dies in JavaScript zu erreichen.

Verwenden Sie die structuredClone()-Methode, um eine tiefe Kopie eines Objekts in JavaScript zu erstellen

Eine der Möglichkeiten, eine tiefe Kopie eines Objekts in JavaScript zu erstellen, ist die Verwendung der Methode structuredClone(). Das Verfahren verwendet einen strukturierten Klonalgorithmus, der ein Objekt tief klont.

Als Parameter nimmt die Methode das zu klonende Objekt. Lassen Sie uns das Klonen durchführen.

Betrachten Sie zum Beispiel das Objekt student1 oben, das den Wert kevin für die Eigenschaft name enthält. Verwenden Sie als Nächstes die Methode structuredClone() und geben Sie das Objekt student1 als Parameter an.

Abschließend weisen Sie die Methode einer Variablen student2 zu. Dadurch wird das Objekt student2 zu einer tiefen Kopie des Objekts student1.

Als nächstes ändern Sie die Eigenschaft des Objekts student2 in john.

Wenn Sie dieses Mal beide Objekte drucken, haben sie nicht die gleichen Werte für die Eigenschaften. Das Objekt student1 hat den Wert kevin und student2 hat john für die Eigenschaft name.

Beispielcode:

let student1 = {
  name: 'kevin',

}

let student2 = structuredClone(student1)

student2.name = 'john'

console.log(student1)
console.log(student2)

Ausgang:

{
  name: "kevin"
}
{
  name: "john"
}

So können wir die Methode structuredClone() verwenden, um die tiefe Kopie in JavaScript auszuführen.

Verwenden Sie die Methoden JSON.parse() und JSON.stringify(), um eine tiefe Kopie eines Objekts in JavaScript zu erstellen

Wir können auch eine tiefe Kopie eines Objekts mit den Methoden JSON.parse() und JSON.stringify() erstellen. Die Methode JSON.stringify() wandelt das Objekt oder einen Wert in einen String um, während die Methode JSON.parse() ein Objekt oder einen Wert durch Parsen des JSON-Strings erstellt.

Zuerst können wir das Objekt mit der Methode JSON.stringify() in einen String konvertieren, und dann können wir mit der Methode JSON.parse() eine tiefe Kopie des Objekts erstellen, indem wir das Objekt parsen.

Stellen Sie sich zum Beispiel dasselbe Objekt student1 vor und verwenden Sie die Methode JSON.stringify(), um das Objekt in einen String umzuwandeln. Verwenden Sie dann die Methode JSON.parse() für das Ergebnis.

Weisen Sie den Ausdruck einer Variablen student2 zu. Als nächstes ändern Sie die Eigenschaft des ersten Objekts wie oben und drucken beide Objekte.

Beispielcode:

let student1 = {
  name: 'kevin',

}


let student2 = JSON.parse(JSON.stringify(student1))

student2.name = 'john'

console.log(student1)
console.log(student2)

Ausgang:

{
  name: "kevin"
}
{
  name: "john"
}

Wir können sehen, dass die Werte der Eigenschaften dieser beiden Objekte unterschiedlich sind, was bedeutet, dass wir eine tiefe Kopie des Quellobjekts erstellt haben. Daher können wir die Methoden JSON.parse() und JSON.stringify() verwenden, um die tiefe Kopie eines Objekts in JavaScript durchzuführen.

Aber wir werden ein Problem haben, wenn wir mit Funktionen und Objekten arbeiten. Lassen Sie uns den tiefen Klon eines Objekts implementieren, das eine Funktion und ein Date()-Objekt enthält, um ein klareres Bild des Problems zu erhalten.

Fügen Sie die neuen Felder wie im Beispiel unten zum Objekt student1 hinzu.

Beispielcode:

let student1 = {
  name: 'kevin',
  age: function() {
    return 24;
  },
  enrolledDate: new Date()

}

Erstellen Sie als Nächstes eine tiefe Kopie des Objekts wie oben, indem Sie die Funktionen JSON.parse() zusammen mit den Funktionen JSON.stringify() verwenden. Ändern Sie dann die Eigenschaft name des ersten Objekts. Drucken Sie abschließend beide Objekte.

Beispielcode:

let student2 = JSON.parse(JSON.stringify(student1))
student2.name = 'john'

console.log(student1)
console.log(student2)

Ausgang:

{
  name: 'kevin',
  age: [Function: age],
  enrolledDate: 2023-01-19T16:15:30.914Z
}
{ name: 'john', enrolledDate: '2023-01-19T16:15:30.914Z' }

Hier sehen wir einige auffällige Probleme in der tiefen Kopie des Objekts. Das erste Problem besteht darin, dass der Funktion das geklonte Objekt fehlt.

Das andere Problem ist die Änderung des Typs des verschachtelten Objekts new Date(). Nach dem Klonen wird das Objekt new Date() in einen Typ String geändert. Sie können die Anführungszeichen um das Datum herum bemerken.

So entdeckten wir ein Problem beim tiefen Kopieren eines Objekts, das eine Funktion und einen Typ enthält, wenn die Methoden JSON.parse() und JSON.stringify() verwendet wurden. Wir werden das Problem im nächsten Abschnitt des Artikels beheben.

Verwenden Sie die Lodash-Bibliothek, um eine tiefe Kopie eines Objekts in JavaScript zu erstellen

Wir können das Problem lösen, indem wir die Funktionen und verschachtelten Objekte mit der lodash-Bibliothek klonen. lodash stellt eine Methode cloneDeep() zur Verfügung, die das Quellobjekt als Parameter nimmt und es deep klont.

Sie können die Bibliothek mit dem folgenden Befehl installieren.

npm i -g lodash

Fordern Sie beispielsweise die Bibliothek am Anfang Ihres Codes an. Weisen Sie ihm eine Konstante _ zu.

Verwenden Sie die Konstante, um cloneDeep() aufzurufen, wobei das Objekt student1 der Parameter ist. Ändern Sie den Wert der Eigenschaft des Objekts wie zuvor. Drucken Sie abschließend beide Objekte.

Beispielcode:

const _ = require('lodash')
let student1 = {
  name: 'kevin',
  age: function() {
    return 24;
  },
  enrolledDate: new Date()

}


let student2 = _.cloneDeep(student1)

student2.name = 'john'

console.log(student1)
console.log(student2)

Ausgang:

{
  name: 'kevin',
  age: [Function: age],
  enrolledDate: 2023-01-23T15:02:56.059Z
}
{
  name: 'john',
  age: [Function: age],
  enrolledDate: 2023-01-23T15:02:56.059Z
}

Schließlich können wir das Objekt tief klonen und haben immer noch die Funktionen und verschachtelten Objekte. Daher können wir die Bibliothek lodash verwenden, um einen tiefen Klon eines Objekts in JavaScript zu erstellen.