0Pricing
JavaScript Academy · Lektion

Klonen und Zusammenführen – spread und Object.assign

Objekte und Arrays mit spread und Object.assign klonen und zusammenführen; flache Kopien und die Reihenfolge beim Überschreiben verstehen

Klonen und Zusammenführen – spread und Object.assign ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 2 von 2. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des JavaScript Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der JavaScript Academy-Kurs umfasst insgesamt 2 Lektionen.

Einführung

Ziel: Kopieren und führen Sie Objekte und Arrays sicher zusammen.

  • Spread zum Kopieren und Zusammenführen
  • Object.assign
  • Reihenfolge beim Überschreiben
  • Einschränkung flacher Kopien
Klonen und Zusammenführen – spread und Object.assign — Illustration 1

Spread: Objekt kopieren

Verwenden Sie {...obj} für eine flache Kopie. Änderungen an der Kopie verändern die Felder der obersten Ebene im Original nicht.

// Shallow clone with object spread
const user = { name: "Ayla", level: 1 };
const clone = { ...user };

clone.level = 2;

console.log("Original:", user);
console.log("Clone:", clone);
Klonen und Zusammenführen – spread und Object.assign — Illustration 2

Object.assign: kopieren

Object.assign({}, obj) erstellt ebenfalls eine flache Kopie. Vermeiden Sie die Änderung der Quelle, indem Sie einem leeren Objekt Werte zuweisen.

// Shallow clone with Object.assign
const settings = { theme: "dark", compact: false };
const copy = Object.assign({}, settings);

copy.compact = true;

console.log("Settings:", settings);
console.log("Copy:", copy);
Klonen und Zusammenführen – spread und Object.assign — Illustration 3

Zusammenführen: Die Reihenfolge ist wichtig

Beim Zusammenführen ist die Reihenfolge entscheidend: Spätere Quellen überschreiben frühere Schlüssel (b wird hier zu 9).

// Merge: later keys overwrite earlier ones
const base = { a: 1, b: 2 };
const extra = { b: 9, c: 3 };

const mergedSpread = { ...base, ...extra };
const mergedAssign = Object.assign({}, base, extra);

console.log("Spread merged:", mergedSpread);
console.log("Assign merged:", mergedAssign);
Klonen und Zusammenführen – spread und Object.assign — Illustration 4

Array-Spread: kopieren und zusammenführen

[...arr] kopiert ein Array. Kombinieren Sie Arrays mit [...a, ...b], ohne sie zu verändern.

// Arrays: clone and merge with spread
const nums = [1, 2, 3];
const cloneNums = [...nums];

const more = [4, 5];
const mergedNums = [...nums, ...more];

console.log("nums:", nums);
console.log("clone:", cloneNums);
console.log("merged:", mergedNums);
Klonen und Zusammenführen – spread und Object.assign — Illustration 5

Flach und tief

Flache Kopie: Verschachtelte Objekte und Arrays werden gemeinsam verwendet. Bei tiefen Strukturen müssen Sie die inneren Ebenen ausdrücklich kopieren.

// Shallow copy caveat: nested objects are shared
const original = { user: { name: "Mina" }, active: true };
const shallow = { ...original };

// Mutate nested object
shallow.user.name = "Lena";

console.log("Original:", original);
console.log("Shallow:", shallow);
Klonen und Zusammenführen – spread und Object.assign — Illustration 6

Quiz zu Kopiermethoden

Schnelltest: Flach kopieren, ohne etwas zu verändern.

Klonen und Zusammenführen – spread und Object.assign — Illustration 7

Zusammenfassung

Zusammenfassung: Kopieren Sie mit Spread oder mit Object.assign in ein leeres Objekt, führen Sie Elemente zusammen, indem Sie spätere Quellen zuletzt angeben, und denken Sie daran: Dies sind flache Kopien.

Klonen und Zusammenführen – spread und Object.assign — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Klonen und Zusammenführen – spread und Object.assign“ kostenlos?

Ja — der vollständige Text von „Klonen und Zusammenführen – spread und Object.assign“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des JavaScript Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der JavaScript Academy-Kurs umfasst insgesamt 2 Lektionen.

Was lerne ich in „Klonen und Zusammenführen – spread und Object.assign“?

Objekte und Arrays mit spread und Object.assign klonen und zusammenführen; flache Kopien und die Reihenfolge beim Überschreiben verstehen Du übst JavaScript Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um JavaScript Academy zu starten?

Keine Vorkenntnisse erforderlich. JavaScript Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 2 von 2.

Wie lange dauert die Lektion „Klonen und Zusammenführen – spread und Object.assign“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser JavaScript Academy-Lektion Code schreiben und ausführen?

Ja. Jede JavaScript Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Array-CRUD und Iteration; Grundlagen und Zugriff auf Objekte
  2. Klonen und Zusammenführen – spread und Object.assign
← Zurück zu JavaScript Academy