Flache und tiefe Kopie

Teil des Abschnitts Logik & Ablauf der JavaScript-Journey von Coddy — Lektion 25 von 65.

Beim Kopieren von Objekten gibt es zwei Arten von Kopien:

Flache Kopie (Shallow Copy) - kopiert nur die erste Ebene
Tiefe Kopie (Deep Copy) - kopiert alle verschachtelten Ebenen

Flache Kopier-Methoden:

Verwendung des Spread-Operators:

const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };

Verwendung von Object.assign(), das ein neues Objekt erstellt, indem Eigenschaften vom Quell- zum Zielobjekt kopiert werden:

const assignCopy = Object.assign({}, original);

Problem mit der flachen Kopie:

original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (verschachtelte Objekte teilen sich die Referenz)

console.log(assignCopy.b.x); // 3

Verständnis von JSON-Methoden & Deep Copy

JSON.stringify() wandelt ein JavaScript-Objekt in einen JSON-String um:

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"

JSON.parse() wandelt einen JSON-String wieder in ein JavaScript-Objekt um:

const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }

Tiefe Kopie mit JSON:

const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

original.b.x = 3;
console.log(deepCopy.b.x); // 2 (vollständig unabhängig)

Aufgabe

Einfach

Erstellen Sie eine Funktion namens processCart, die einen JSON-String entgegennimmt, der einen Warenkorb darstellt. Der Warenkorb enthält ein Array von Produkten mit Namen und Preisen. Ihre Aufgabe ist es:

Den JSON-String in ein JavaScript-Objekt umzuwandeln
ZWEI separate Warenkörbe daraus zu erstellen
Im zweiten Warenkorb:
1. Fügen Sie jedem Element eine Eigenschaft discounted hinzu, die auf false gesetzt ist
2. Wenden Sie einen Rabatt von 10 % auf alle Artikel an, deren price größer als 50 ist
3. Setzen Sie 'discounted' für Artikel, die den Rabatt erhalten haben, auf true
Geben Sie ein Array zurück, das beide Warenkörbe enthält

Spickzettel

Beim Kopieren von Objekten gibt es zwei Arten von Kopien:

Flache Kopie (Shallow Copy) - kopiert nur die erste Ebene
Tiefe Kopie (Deep Copy) - kopiert alle verschachtelten Ebenen

Methoden für flache Kopien:

Verwendung des Spread-Operators:

const original = { a: 1, b: { x: 2 } };
const spreadCopy = { ...original };

Verwendung von Object.assign():

const assignCopy = Object.assign({}, original);

Problem bei flachen Kopien:

original.b.x = 3;
console.log(spreadCopy.b.x); // 3 (nested objects share reference)

JSON-Methoden:

JSON.stringify() konvertiert ein JavaScript-Objekt in einen JSON-String:

const obj = { name: "John", age: 30 };
const jsonString = JSON.stringify(obj);
console.log(jsonString); // "{"name":"John","age":30}"

JSON.parse() konvertiert einen JSON-String zurück in ein JavaScript-Objekt:

const backToObject = JSON.parse(jsonString);
console.log(backToObject); // { name: "John", age: 30 }

Tiefe Kopie mit JSON:

const original = { a: 1, b: { x: 2 } };
const deepCopy = JSON.parse(JSON.stringify(original));

original.b.x = 3;
console.log(deepCopy.b.x); // 2 (completely independent)

Probier es selbst

function processCart(jsonString) {
    // Code hier schreiben
}
// Schreibe nichts außerhalb der Funktion

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Alle Lektionen in Logik & Ablauf

1Strings im Detail

String-Grundlagen Über Strings iterieren Template Literals String-Methoden Rückblick – String Weaver

4JSON Teil 2

Über JSON iterieren Verschachteltes JSON JSON Optional ChainingFlache und tiefe KopieWiederholung – Fahrradladen Wiederholung – Sonnensystem

7Bibliotheksverwaltungssystem

Projektübersicht Bücher hinzufügen

Suche nach Titel

Nach Genre filtern

Als gelesen markieren

10Festivalsystem verwalten

Projektübersicht Filme & Veranstaltungsorte hinzufügen

Vorführung hinzufügen

Tickets kaufen

Filme bewerten

Vorführungen absagen