0Pricing
JavaScript Academy · Lektion

Rest und Spread – idiomatische Arrays und Objekte

Die übrigen Werte und Eigenschaften sammeln, mit spread klonen und zusammenführen und mit einfachen Mustern versteckte Mutationen vermeiden

Rest und Spread – idiomatische Arrays und Objekte 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: Verwenden Sie rest, um zusätzliche Elemente zu sammeln, und spread, um zu kopieren oder zusammenzuführen.

  • Spread für Arrays und Objekte
  • Array-Rest (Kopf/Rest)
  • Objekt-Rest (bestimmte Schlüssel ausschließen)
  • Verändern und kopieren
Rest und Spread – idiomatische Arrays und Objekte — Illustration 1

Grundlagen des Array-Spread

[...arr] kopiert ein Array. Kombinieren Sie Arrays, indem Sie sie in einem neuen Array per Spread einfügen.

// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];

const clone = [...a];
const merged = [...a, ...b];

console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);
Rest und Spread – idiomatische Arrays und Objekte — Illustration 2

Array-Rest-Muster

Das Rest-Element (…tail) sammelt die übrigen Elemente in einem neuen Array.

// Array rest collects the remaining items
const nums = [10, 20, 30, 40];

const [head, ...tail] = nums;

console.log("head:", head);
console.log("tail:", tail);
Rest und Spread – idiomatische Arrays und Objekte — Illustration 3

Grundlagen des Objekt-Spread

Beim Zusammenführen von Objekten ist die Reihenfolge entscheidend: Spätere Spread-Ausdrücke überschreiben frühere Schlüssel.

// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };

const copy = { ...base };
const merged = { ...base, ...override };

console.log("copy:", copy);
console.log("merged:", merged);
Rest und Spread – idiomatische Arrays und Objekte — Illustration 4

Objekt-Rest-Muster

Verwenden Sie { a, ...rest }, um einige Eigenschaften zu übernehmen und den Rest zusammenzuhalten.

// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };

const { id, ...publicInfo } = user;

console.log("id:", id);
console.log("publicInfo:", publicInfo);
Rest und Spread – idiomatische Arrays und Objekte — Illustration 5

Veränderungen durch Kopieren vermeiden

Erstellen Sie beim Ändern von Werten ein neues Objekt. Das ist klarer und sicherer, als gemeinsam verwendete Daten zu verändern.

// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };

// Mutating version (avoid in shared state)
// settings.volume = 6;

// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };

console.log("settings:", settings);
console.log("updated:", updated);
Rest und Spread – idiomatische Arrays und Objekte — Illustration 6

Quiz zum Objekt-Rest

Schnelltest: Objekt-Rest.

Rest und Spread – idiomatische Arrays und Objekte — Illustration 7

Zusammenfassung

Zusammenfassung: Spread kopiert und führt Arrays und Objekte zusammen; Rest sammelt die übrigen Elemente. Bevorzugen Sie Kopien statt Veränderungen, damit Änderungen nachvollziehbar bleiben.

Rest und Spread – idiomatische Arrays und Objekte — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Rest und Spread – idiomatische Arrays und Objekte“ kostenlos?

Ja — der vollständige Text von „Rest und Spread – idiomatische Arrays und Objekte“ 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 „Rest und Spread – idiomatische Arrays und Objekte“?

Die übrigen Werte und Eigenschaften sammeln, mit spread klonen und zusammenführen und mit einfachen Mustern versteckte Mutationen vermeiden 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 „Rest und Spread – idiomatische Arrays und Objekte“?

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. Grundlagen der Destrukturierung von Arrays und Objekten
  2. Rest und Spread – idiomatische Arrays und Objekte
← Zurück zu JavaScript Academy