0Pricing
JavaScript Academy · Lektion

Grundlagen der Destrukturierung von Arrays und Objekten

Arrays und Objekte destrukturieren: Grundlagen, Elemente überspringen, Standardwerte, Umbenennen und ein einfacher Tausch-Trick

Grundlagen der Destrukturierung von Arrays und Objekten ist eine kostenlose JavaScript Academy-Lektion auf CoddyKit. Dies ist Lektion 1 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: Lesen Sie Werte übersichtlich aus Arrays und Objekten aus.

  • Array-Destrukturierung
  • Überspringen und Standardwerte
  • Objekt-Destrukturierung
  • Umbenennen und Tauschtrick
Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 1

Array-Grundlagen

Array-Muster entsprechen Positionen. Das erste Element wird der ersten Variable zugewiesen und so weiter.

// Array destructuring: assign by position
const pair = [10, 20];

const [x, y] = pair;

console.log("x:", x);
console.log("y:", y);
Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 2

Überspringen und Standardwerte

Verwenden Sie Kommas, um Positionen zu überspringen. Fügen Sie = default für undefinierte oder fehlende Elemente hinzu.

// Skip items with commas and provide defaults
const triple = [5, undefined, 9];

// Skip the middle, provide default for missing/undefined
const [first, , third = 0] = triple;

console.log("first:", first);
console.log("third with default:", third);
Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 3

Tauschtrick

Ein einzeiliger Tausch kommt ohne temporäre Variable aus.

// Swap values with destructuring
let a = "left";
let b = "right";

[a, b] = [b, a];

console.log("a:", a);
console.log("b:", b);
Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 4

Objektgrundlagen und Umbenennen

Objekte ordnen Werte anhand ihres Schlüssels zu. Benennen Sie sie mit key: localName um und fügen Sie bei Bedarf = default hinzu.

// Object destructuring: assign by property name
const user = { name: "Ayla", level: 2, active: true };

// Basic
const { name, active } = user;

// Renaming and default
const { level: userLevel = 0 } = user;

console.log("name:", name);
console.log("active:", active);
console.log("userLevel:", userLevel);
Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 5

Verschachtelte Felder (kompakt)

Sie können verschachtelte Felder in einem Schritt auslesen. Halten Sie Muster für eine gute Lesbarkeit auf Mobilgeräten klein.

// Nested destructuring (keep it simple)
const config = {
  theme: { primary: "blue", contrast: "white" },
  flags: { compact: true }
};

const { theme: { primary }, flags: { compact } } = config;

console.log("primary:", primary);
console.log("compact:", compact);
Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 6

Quiz zur Tauschsyntax

Schnelltest: Mit Destrukturierung tauschen.

Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 7

Zusammenfassung

Zusammenfassung: Arrays werden nach Position und Objekte nach Schlüssel destrukturiert. Sie haben Elemente übersprungen, Standardwerte verwendet, Schlüssel umbenannt und Werte in einer Zeile vertauscht.

Grundlagen der Destrukturierung von Arrays und Objekten — Illustration 8

Häufig gestellte Fragen

Ist die Lektion „Grundlagen der Destrukturierung von Arrays und Objekten“ kostenlos?

Ja — der vollständige Text von „Grundlagen der Destrukturierung von Arrays und Objekten“ 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 „Grundlagen der Destrukturierung von Arrays und Objekten“?

Arrays und Objekte destrukturieren: Grundlagen, Elemente überspringen, Standardwerte, Umbenennen und ein einfacher Tausch-Trick 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 1 von 2.

Wie lange dauert die Lektion „Grundlagen der Destrukturierung von Arrays und Objekten“?

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