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 – kopiert nur die erste Ebene
- Tiefe Kopie – 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(), das ein neues Objekt erstellt, indem Eigenschaften vom Quellobjekt in das Zielobjekt kopiert werden:
const assignCopy = Object.assign({}, original);Problem mit flacher Kopie:
original.b.x = 3;
console.log(spreadCopy.b.x); // 3
// (verschachtelte Objekte teilen sich die Referenz)
console.log(assignCopy.b.x); // 3JSON-Methoden verstehen & Deep Copy
JSON.stringify() konvertiert ein JavaScript-Objekt in eine JSON-Zeichenfolge:
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
EinfachErstelle 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. Deine Aufgabe ist es:
- Den JSON-String in ein JavaScript-Objekt zu parsen
- ZWEI separate Warenkörbe daraus zu erstellen
- Im zweiten Warenkorb:
- Jedem Element eine
discounted-Eigenschaft mit dem Wert false hinzuzufügen - Auf alle Elemente, deren
pricegrößer als 50 ist, einen Rabatt von 10 % anzuwenden - Für Elemente, die den Rabatt erhalten haben, 'discounted' auf true zu setzen
- Jedem Element eine
- Ein Array zurückzugeben, das beide Warenkörbe enthält
Probier es selbst
function processCart(jsonString) {
// Schreibe den Code hier
}
// Schreibe nichts außerhalb der Funktion
Teste dich selbstDiese 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
Grundlagen von StringsStrings durchlaufenTemplate LiteralsString-MethodenRückblick – String-Weber4JSON Teil 2
JSON durchlaufenVerschachteltes JSONOptionale Verkettung in JSONFlache und tiefe KopieWiederholung – FahrradgeschäftWiederholung – Sonnensystem7Bibliotheksverwaltungssystem
ProjektübersichtBücher hinzufügen
Nach Titel suchenNach Genre filternAls gelesen markieren2Mehrdimensionale Arrays
Grundlagen von 2D-ArraysZugriff auf Elemente von 2D-ArraysVerschachtelte Schleifen mit 2D-ArraysWiederholung – 2D-ArraysMatrixaddition und -subtraktionZackige Arrays3D-Arrays und darüber hinausHäufige Muster bei 2D-ArraysWiederholung – Alles über Arrays5Mengen – Teil 1
Was ist eine Menge?Mengen durchlaufenEin Element hinzufügenEin Element entfernenPrüfen, ob ein Element vorhanden istGröße und LeerstatusKopieren und LeerenRückblick – Grundlagen von Mengen8Interessante Themen zu Arrays
Destrukturierung von ArraysSpread-Syntax in ArraysDünn besetzte ArraysRückblick – Workshop zu Arrays3JSON Teil 1
Was ist JSON?Prüfen, ob ein Schlüssel vorhanden istObjektmethodenSpread-Operator Teil 1Spread-Operator Teil 2Schlüssel entfernenRückblick – JSON-Schlüssel bearbeitenÜbe selbstständig: Online-JavaScript-Compiler