JavaScript-Destrukturierung für Arrays und Objekte

Destructuring bedeutet, einen strukturierten Wert zu nehmen und ihn in Teile aufzuteilen, sodass jeder Teil für sich verwendet werden kann. Anstatt wiederholt in denselben Container zuzugreifen, deklariert man die erwartete Struktur und verknüpft die Namen in einem Schritt.

Eine einfache Analogie ist das Auspacken einiger persönlicher Gegenstände aus einem Reisesack. Der Reisesack steht für ein Array, ein Objekt, eine Zeichenkette oder jede andere Struktur, die sich wie ein iterierbares Objekt verhält. Die persönlichen Gegenstände sind die einzelnen Werte, die man nutzen möchte. Iteratoren und iterierbare Objekte verdienen später eine ausführlichere Betrachtung; vorerst reicht es aus zu wissen, dass Arrays und viele eingebaute Funktionen bereits dieses Auspackungsverhalten bieten.

Mit diesem mentalen Modell können diese Teile sauberer an Variablen gebunden werden, als wenn man für jeden Platz separate Indexausdrücke schreiben müsste:

const numbers = [ 1, 2, 3 ];

// En lugar de realizar esto:
let x = numbers[0];
let y = numbers[1];
let z = numbers[2];

// Simplemente podemos hacer esto:
let [ x, y, z ] = numbers;

console.log(x); // 1
console.log(y); // 2
console.log(z); // 3

Während derselben Zuweisung können Sie Werte, die Ihnen egal sind, überspringen, indem Sie leere Lücken zwischen den Kommas lassen. So behalten Sie die benötigten Bindungen, ohne zusätzliche Variablen erstellen zu müssen:

const numbers = [ 1, 2, 3 ];

// x = 1, z = 3
let [ x, , z ] = numbers;

// y = 2, z = 3
let [ , y, z ] = numbers;

// x = 1, y = 2, z = 3, a = undefined
let [ x, y, z, a ] = numbers;

Sie können auch neue Bindungen mit Standardwerten einfügen, wenn eine Stelle fehlt oder undefiniert ist – das ist praktisch für optionale, hintere Positionen:

const numbers = [ 1, 2, 3 ];

// x = 1, y = 2, z = 3, a = 4
let [ x, y, z, a = 4 ] = numbers;

Eingebettete Strukturen werden auf dieselbe Weise entpackt – Sie können auf ein inneres Array zugreifen, ohne vorübergehende Zwischenspeicher zu benötigen, die nur dazu dienen, eine Schicht abzutrennen:

const alphanumericSequence = [ 'a', 'b', 'c', [1, 2, 3] ];

// numericSequence = [ 1, 2, 3 ]
let [ , , , numericSequence ] = alphanumericSequence;

// x = 1, y = 2, z = 3
let [ , , , [ x, y, z ] ] = alphanumericSequence;

Ein praktischer Trick besteht darin, zwei Variablen auszutauschen, ohne eine temporäre Variable zu verwenden. Durch Dekonstruktion kann man beide Seiten in einer einzigen Anweisung austauschen, was eine häufige Quelle für Fehler durch Fehlzählungen beseitigt, wenn man eine dritte Variable manuell erstellt:

let a = 1;
let b = 2;

// En lugar de hacer esto:
let temp = a;
a = b;
b = temp;

// Simplemente podemos hacer esto:
[ a, b ] = [ b, a ];

console.log(a); // 2
console.log(b); // 1

Bislang war der „Rucksack“ ein Array, bei dem die Position die Bedeutung bestimmt. Objekte werden nach einer etwas anderen Regel entpackt: Es sind die Eigennamen und nicht die Reihenfolge, die die Zuordnungen bestimmen.

Objekte zerlegen

Wenn die Struktur ein Objekt ist, müssen die Namen der empfangenden Zuordnungen mit den Eigennamen übereinstimmen, die Sie abrufen – es sei denn, Sie weisen ihnen mit Aliassen eine neue Zuordnung zu. Dieses Regelwerk ist der Hauptunterschied zur Entpackung von Arrays, bei der nur die Reihenfolge wichtig ist.

Ein kurzes Beispiel zeigt die Regel der Namensübereinstimmung bei einer einfachen Mitarbeiterdatenstruktur:

const employee = {
  name: 'Julia',
  age: 27,
  job: {},
  workSchedule: {}
};

// El nombre de las variables coincide con el nombre
// de las propiedades del objeto.
let { name, age, job, workSchedule } = employee;

Jeder Zuordnungsname entspricht einem Eigennamen des Objekts, sodass die lokalen Identifikatoren weiterhin selbst erklärend bleiben.

Falls diese Eigennamen im lokalen Kontext unpraktisch sind – oder mit bereits vorhandenen Identifikatoren kollidieren – weisen Sie Aliasse zu, während Sie weiterhin die ursprünglichen Schlüssel verwenden:

let {
  name:employeeName,
  age:employeeAge,
  job:employeeJob,
  workSchedule:employeeWorkSchedule
} = employee;

Es können auch beim Entpacken Standardwerte angewendet werden, um Lücken zu füllen, wenn eine Eigenschaft fehlt oder undefiniert ist – ohne anschließende separate Prüfung auf Nullwerte:

let {
  name = 'john',
  age = 18,
  job = 'worker',
  workSchedule = null
} = employee;

// Incluso utilizar un alias durante este proceso:
let {
  name:employeeName = 'john',
  age:employeeAge = 18,
  job:employeeJob = 'worker',
  workSchedule:employeeWorkSchedule = null
} = employee;

Eingebettete Objekte werden auf dieselbe Weise entpackt: Geben Sie den Pfad im Muster an und binden Sie nur die benötigten Felder:

const employee = {
  name: 'Julia',
  age: 27,
  job: {},
  workSchedule: {
    mon: {
      open: 12,
      close: 22,
    },
    tue: {
      open: 11,
      close: 23,
    },
    wed: {
      open: 23,
      close: 5,
    }
  }
};

let { workSchedule: { mon, tue, wed } } = employee;

console.log(mon); // { open: 12, close: 22 }
console.log(tue); // { open: 11, close: 23 }
console.log(wed); // { open: 23, close: 5 }

Seien Sie bei tiefem Eingebettetsein vorsichtig. Das Abrufen von Werten über viele Ebenen in einem einzigen Muster beeinträchtigt schnell die Lesbarkeit und macht Anpassungen anfällig, wenn sich die Struktur ändert:

const employee = {
  name: 'Julia',
  age: 27,
  workSchedule: {
    mon: {
      open: {
        from: 12
      },
      close: {
        to: 22
      }
    }
  }
};

// Multiples niveles de anidación
let { workSchedule: { mon: { open: {from}, close: {to} } } } = employee;

console.log(from); // 12
console.log(to);   // 22

Objektdestrukturierung ist auch bei Funktionsparametern nützlich. Anstelle einer langen positionellen Liste kann ein Options-Objekt übergeben werden, dessen Felder an der Grenze zusammen mit Standardwerten entpackt werden:

const dispatchDelivery = (endpoint, { userId, time = '00:00', address, items = [] }) => {
  // Some action...
};

dispatchDelivery('api/dispatch-delivery', {
  userId: 3392,
  address: 'Villas del Sol',
  time: '22:30',
  items: [ 'Beers', 'Sodas', 'Doritos' ]
});

dispatchDelivery('api/dispatch-delivery', {
  userId: 5423,
  address: 'Villas del Sol'
});

Das Ergebnis ist eine reichhaltigere, leichter lesbare Signatur – insbesondere dann, wenn eine Funktion viele Optionen benötigt, die die Aufrufer nicht immer bereitstellen. Die Destrukturierung ist ein zentrales Werkzeug moderner JavaScript-Programmierung und wird zusammen mit dem Spread-Operator noch ausdrucksstärker, da dieser zusätzliche Kompositionsmuster für das Klonen und Zusammenführen von Strukturen ermöglicht.

Bemerken Sie die Sprachgrundlage: Die Destrukturierung wurde mit ECMAScript 2015 (ES6) eingeführt. Ältere Engines erfordern einen Transpilierungsprozess oder eine Polyfill-Strategie, bevor man sie in Produktiv-Browsern oder veralteten Laufzeiten einsetzen kann.