JavaScript - Shallow Copy: A Beginner's Guide

Hallo Zusammen, zukünftige JavaScript-Zauberer! Heute machen wir uns auf eine aufregende Reise in die Welt der flachen Kopien in JavaScript. Keine Sorge, wenn du neu im Programmieren bist – ich werde dein freundlicher Guide sein und alles Schritt für Schritt erklären. Also, hole dir einen Becher Kaffee (oder dein Lieblingsgetränk) und tauchen wir ein!

Was ist eine flache Kopie?

Bevor wir uns den Details der flachen Kopie widmen, beginnen wir mit einer einfachen Analogie. Stell dir vor, du hast ein wunderschönes Gemälde und möchtest eine Kopie davon machen. Du hast zwei Möglichkeiten:

1. Mache ein Foto vom Gemälde (flache Kopie)
2. Erstelle das gesamte Gemälde von Grund auf neu (tiefe Kopie)

In JavaScript ist eine flache Kopie wie das Fotografieren. Sie erstellt ein neues Objekt oder Array, aber die Elemente darin sind Referenzen auf die gleichen Elemente wie das Original.

Wie die flache Kopie funktioniert

Wenn du eine flache Kopie erstellst:

1. Ein neues Objekt oder Array wird erstellt
2. Die oberflächlichen Eigenschaften werden kopiert
3. Eingeschlossene Objekte oder Arrays werden immer noch aus dem Original referenziert

Lassen wir das mit ein wenig Code in die Tat umsetzen!

// Ursprüngliches Objekt
let original = {
name: "Alice",
age: 30,
hobbies: ["reading", "swimming"]
};

// Flache Kopie
let shallowCopy = Object.assign({}, original);

// Ändern der Kopie
shallowCopy.name = "Bob";
shallowCopy.hobbies.push("coding");

console.log(original);
console.log(shallowCopy);

Wenn du diesen Code ausführst, wirst du etwas Interessantes sehen:

{name: "Alice", age: 30, hobbies: ["reading", "swimming", "coding"]}
{name: "Bob", age: 30, hobbies: ["reading", "swimming", "coding"]}

Beachte, wie das Ändern von name nur die Kopie beeinflusst hat, aber das Ändern von hobbies beide Objekte beeinflusst hat. Das ist das Wesen einer flachen Kopie!

Tiefen Kopie vs. flache Kopie

Nun, da wir die flache Kopie verstehen, vergleichen wir sie mit ihrem Geschwister, der tiefen Kopie.

Eigenschaft	Flache Kopie	Tiefen Kopie
Neue Objekterstellung	Ja	Ja
Kopiert oberflächliche Eigenschaften	Ja	Ja
Kopiert eingeschlossene Objekte/Arrays	Nein (referenziert Original)	Ja (erstellt neue Kopien)
Leistung	Schneller	Langsamer
Speicherplatzverbrauch	Weniger	Mehr

Wann man flache Kopien verwendet

Flache Kopien sind großartig, wenn:

1. Du nur oberflächliche Eigenschaften ändern musst
2. Leistung ein Anliegen ist
3. Du einen neuen Verweis auf ein Objekt erstellen möchtest

Wann man tiefen Kopien verwendet

Tiefen Kopien sind besser, wenn:

1. Du eingebettete Eigenschaften ändern musst, ohne das Original zu beeinflussen
2. Du eine完全独立的对象副本想要

Beispiele für flache Kopien in JavaScript

Lassen wir uns einige häufige Wege ansehen, um flache Kopien in JavaScript zu erstellen!

1. Object.assign()

let original = { a: 1, b: { c: 2 } };
let copy = Object.assign({}, original);

copy.a = 5;
copy.b.c = 10;

console.log(original); // { a: 1, b: { c: 10 } }
console.log(copy);     // { a: 5, b: { c: 10 } }

Hier erstellt Object.assign() eine flache Kopie. Das Ändern von a beeinflusst nur die Kopie, aber das Ändern von b.c beeinflusst beide Objekte, weil es eine eingebettete Eigenschaft ist.

2. Spread-Operator (...)

let fruits = ["apple", "banana", ["grape", "orange"]];
let fruitsCopy = [...fruits];

fruitsCopy[0] = "pear";
fruitsCopy[2].push("kiwi");

console.log(fruits);     // ["apple", "banana", ["grape", "orange", "kiwi"]]
console.log(fruitsCopy); // ["pear", "banana", ["grape", "orange", "kiwi"]]

Der Spread-Operator erstellt eine flache Kopie des Arrays. Das Ändern des ersten Elements beeinflusst nur die Kopie, aber das Hinzufügen zum eingebetteten Array beeinflusst beide.

3. Array.from()

let numbers = [1, 2, [3, 4]];
let numbersCopy = Array.from(numbers);

numbersCopy[0] = 10;
numbersCopy[2].push(5);

console.log(numbers);     // [1, 2, [3, 4, 5]]
console.log(numbersCopy); // [10, 2, [3, 4, 5]]

Array.from() erstellt ebenfalls eine flache Kopie. Die ersten Ebenen werden kopiert, aber eingebettete Arrays werden weiterhin referenziert.

Bedeutung der flachen Kopie

Du fragst dich vielleicht, "Warum brauchen wir überhaupt flache Kopien?" Eine großartige Frage! Flache Kopien sind in vielen Szenarien äußerst nützlich:

1. Leistung: Flache Kopien sind schneller und verbrauchen weniger Speicher als tiefe Kopien, was sie ideal für große Objekte oder häufige Operationen macht.

2. Unveränderlichkeit: Sie helfen dabei, Unveränderlichkeit in deinem Code zu erhalten, was entscheidend für vorhersehbare Staatsverwaltung in modernen JavaScript-Frameworks ist.

3. Vermeidung von Nebeneffekten: Flache Kopien ermöglichen es dir, ein Objekt zu ändern, ohne das Original direkt zu verändern, was unerwartete Nebeneffekte in deinem Code reduziert.

4. React und Redux: In React- und Redux-Anwendungen werden flache Kopien oft verwendet, um Neuankündigungen auszulösen und den Zustand zu aktualisieren, ohne das Original zu verändern.

Hier ist ein realistisches Beispiel:

function updateUserProfile(user, newName) {
// Erstelle eine flache Kopie des Benutzerobjekts
let updatedUser = Object.assign({}, user);

// Ändere den Namen
updatedUser.name = newName;

return updatedUser;
}

let user = {
name: "Alice",
age: 30,
address: {
city: "Wonderland",
street: "Rabbit Hole Lane"
}
};

let updatedUser = updateUserProfile(user, "Alicia");

console.log(user);        // Ursprüngliches Benutzerobjekt unveraändert
console.log(updatedUser); // Neues Objekt mit aktualisiertem Namen

In diesem Beispiel aktualisieren wir den Namen des Benutzers, ohne das Originalobjekt zu verändern. Dies ist ein häufiges Muster in der Staatsverwaltung und hilft, Datenintegrität zu erhalten.

Fazit

Glückwunsch! Du hast deine ersten Schritte in die Welt der flachen Kopien in JavaScript gemacht. Behalte im Gedächtnis, dass flache Kopien wie das schnelle Fotografieren sind – sie sind schnell und effizient, aber sie erfassen nicht alles im Detail.

Während du deine JavaScript-Reise fortsetzt, wirst du viele Situationen finden, in denen flache Kopien nützlich sind. Es ist ein mächtiges Werkzeug in deinem Programmierwerkzeugkasten, besonders wenn du mit komplexen Datenstrukturen und Staatsverwaltung arbeitest.

Weiter üben, bleibe neugierig und fürchte dich nicht, zu experimentieren. Bereit dazu, wirst du wie ein Profi Objekte erstellen und manipulieren!

Fröhliches Coden und möge deine Kopien immer so flach (oder tief) sein, wie du sie haben möchtest! ?

Credits: Image by storyset