Destructuring

Die Objekt- und Array-Literalausdrücke bieten eine einfache Möglichkeit, ad hoc-Datenpakete zu erstellen.

const arr = [a, b, c];

Das Destructuring verwendet eine ähnliche Syntax, jedoch auf der linken Seite der Zuweisung. Es führt die Umkehrung einer Array-Deklaration durch, indem jedes Element in der Sammlung als separate Variable deklariert wird.

const arr = [1, 2, 3];
const [a, b, c] = arr;
// a = 1, b = 2, c = 3

Was Objekte betrifft, vergleichen Sie die beiden Paare von Zeilen unten und sehen Sie, wie es innerhalb jedes Paares eine direkte Entsprechung gibt.

const obj = { a, b, c };
const { a, b, c } = obj;
// Equivalent to:
// const a = obj.a, b = obj.b, c = obj.c;

const obj = { prop1: x, prop2: y, prop3: z };
const { prop1: x, prop2: y, prop3: z } = obj;
// Equivalent to:
// const x = obj.prop1, y = obj.prop2, z = obj.prop3;

Diese Fähigkeit ist ähnlich wie Funktionen, die in Sprachen wie Perl und Python vorhanden sind.

Für spezifische Funktionen der Array- oder Objekt-Destructuring, siehe die einzelnen Beispiele unten.

Sowohl für Objekt- als auch für Array-Destructuring gibt es zwei Arten von Destructuring-Mustern: Bindungsmuster und Zuweisungsmuster mit leicht unterschiedlichen Syntaxen.

In Bindungsmustern beginnt das Muster mit einem Deklarationsschlüsselwort (var, let oder const). Dann muss jede einzelne Eigenschaft entweder an eine Variable gebunden oder weiter zerlegt werden.

const obj = { a: 1, b: { c: 2 } };
const {
  a,
  b: { c: d },
} = obj;
// Two variables are bound: `a` and `d`

Alle Variablen teilen dieselbe Deklaration, daher müssen Sie möglicherweise zweimal destructuren — einmal mit let, einmal mit const —, wenn Sie möchten, dass einige Variablen neu zuweisbar, andere jedoch schreibgeschützt sind.

const obj = { a: 1, b: { c: 2 } };
const { a } = obj; // a is constant
let {
  b: { c: d },
} = obj; // d is re-assignable

In vielen anderen Syntaxen, bei denen die Sprache eine Variable für Sie bindet, können Sie ein Bindungs-Destructuring-Muster verwenden. Dazu gehören:

• Die Schleifenvariable von for...in, for...of, und for await...of Schleifen;
• Funktions-parameter;
• Die catch- Bindungsvariable.

In Zuweisungsmustern beginnt das Muster nicht mit einem Schlüsselwort. Jede zerlegte Eigenschaft wird einem Ziel zugeordnet — welches entweder vorher mit var oder let deklariert wurde oder eine Eigenschaft eines anderen Objekts ist — im Allgemeinen alles, was auf der linken Seite eines Zuweisungsausdrucks erscheinen kann.

const numbers = [];
const obj = { a: 1, b: 2 };
({ a: numbers[0], b: numbers[1] } = obj);
// The properties `a` and `b` are assigned to properties of `numbers`

Beachten Sie, dass das äquivalente Bindungsmuster des obigen Codes keinen gültigen Syntax darstellt:

const numbers = [];
const obj = { a: 1, b: 2 };
const { a: numbers[0], b: numbers[1] } = obj;

// This is equivalent to:
//   const numbers[0] = obj.a;
//   const numbers[1] = obj.b;
// Which definitely is not valid.

Sie können Zuweisungsmuster nur als die linke Seite des Zuweisungsoperators verwenden. Sie können sie nicht mit zusammengesetzten Zuweisungsoperatoren wie += oder *= verwenden.

Jede destrukturierte Eigenschaft kann einen Standardwert haben. Der Standardwert wird verwendet, wenn die Eigenschaft nicht vorhanden ist oder den Wert undefined hat. Er wird nicht verwendet, wenn die Eigenschaft den Wert null hat.

const [a = 1] = []; // a is 1
const { b = 2 } = { b: undefined }; // b is 2
const { c = 2 } = { c: null }; // c is null

Der Standardwert kann jeder Ausdruck sein. Er wird nur bei Bedarf ausgewertet.

const { b = console.log("hey") } = { b: 2 };
// Does not log anything, because `b` is defined and there's no need
// to evaluate the default value.

Sie können ein Destructuring-Muster mit einer Rest-Eigenschaft ...rest abschließen. Für Array-Destructuring sammelt es verbleibende Elemente des Iterables in ein neues Array namens rest (oder einen beliebigen Namen, den Sie ihm zuweisen). Für Objekt-Destructuring kopiert es alle aufzählbaren eigenen Eigenschaften des Objekts, die nicht bereits durch das Destructuring-Muster ausgewählt wurden, in ein neues Objekt namens rest.

Formal wird die ...rest-Syntax in einem Array-Destructuring als "Rest-Elemente" und in einem Objekt-Destructuring als "Rest-Eigenschaften" bezeichnet. Häufig sprechen wir jedoch einfach von der "Rest-Eigenschaft".

const { a, ...others } = { a: 1, b: 2, c: 3 };
console.log(others); // { b: 2, c: 3 }

const [first, ...others2] = [1, 2, 3];
console.log(others2); // [2, 3]

Die Rest-Eigenschaft muss die letzte im Muster sein und darf kein nachfolgendes Komma haben.

const [a, ...b,] = [1, 2, 3];

// SyntaxError: rest element may not have a trailing comma
// Always consider using rest operator as the last element

Grundlegende Variablenzuweisung

const foo = ["one", "two", "three"];

const [red, yellow, green] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // "three"

Destructuring mit mehr Elementen als die Quelle

In einem Array-Destructuring von einem Array der Länge N, das auf der rechten Seite der Zuweisung angegeben ist, wenn die Anzahl der auf der linken Seite der Zuweisung angegebenen Variablen größer ist als N, werden nur die ersten N Variablen Werte zugewiesen. Die Werte der verbleibenden Variablen sind undefiniert.

const foo = ["one", "two"];

const [red, yellow, green, blue] = foo;
console.log(red); // "one"
console.log(yellow); // "two"
console.log(green); // undefined
console.log(blue); // undefined

Variablen tauschen

Zwei Variablenwerte können in einem Destructuring-Ausdruck vertauscht werden.

Ohne Destructuring erfordert das Tauschen von zwei Werten eine temporäre Variable (oder in einigen Low-Level-Sprachen den XOR-swap Trick).

let a = 1;
let b = 3;

[a, b] = [b, a];
console.log(a); // 3
console.log(b); // 1

const arr = [1, 2, 3];
[arr[2], arr[1]] = [arr[1], arr[2]];
console.log(arr); // [1, 3, 2]

Ein aus einer Funktion zurückgegebenes Array parsen

Es war schon immer möglich, ein Array aus einer Funktion zurückzugeben. Destructuring kann das Arbeiten mit einem Array-Rückgabewert prägnanter machen.

In diesem Beispiel gibt f() die Werte [1, 2] als seine Ausgabe zurück, die mit Destructuring in einer einzigen Zeile geparst werden können.

function f() {
  return [1, 2];
}

const [a, b] = f();
console.log(a); // 1
console.log(b); // 2

Einige zurückgegebene Werte ignorieren

Sie können Rückgabewerte ignorieren, an denen Sie nicht interessiert sind:

function f() {
  return [1, 2, 3];
}

const [a, , b] = f();
console.log(a); // 1
console.log(b); // 3

const [c] = f();
console.log(c); // 1

Sie können auch alle zurückgegebenen Werte ignorieren:

[, ,] = f();

Obwohl es in diesem Fall wahrscheinlich klarer ist, einfach die Funktion aufzurufen und Destructuring überhaupt nicht zu verwenden. Sie müssen den Rückgabewert nicht verwenden.

Ein Bindungsmuster als Rest-Eigenschaft verwenden

Die Resteigenschaft von Array-Destructuring kann ein weiteres Array oder ein Objektbindungsmuster sein. Das innere Destructuring zerlegt das Array, das nach dem Sammeln der Rest-Elemente erstellt wurde, sodass Sie auf diese Weise nicht auf Eigenschaften zugreifen können, die auf dem ursprünglichen Iterable vorhanden sind.

const [a, b, ...{ length }] = [1, 2, 3];
console.log(a, b, length); // 1 2 1

const [a, b, ...[c, d]] = [1, 2, 3, 4];
console.log(a, b, c, d); // 1 2 3 4

Diese Bindungsmuster können sogar verschachtelt sein, solange jede Rest-Eigenschaft die letzte in der Liste ist.

const [a, b, ...[c, d, ...[e, f]]] = [1, 2, 3, 4, 5, 6];
console.log(a, b, c, d, e, f); // 1 2 3 4 5 6

Andererseits kann Object-Destructuring nur einen Bezeichner als Rest-Eigenschaft haben.

const { a, ...{ b } } = { a: 1, b: 2 };
// SyntaxError: `...` must be followed by an identifier in declaration contexts

let a, b;
({ a, ...{ b } } = { a: 1, b: 2 });
// SyntaxError: `...` must be followed by an assignable reference in assignment contexts

Werte von einem regulären Ausdruck Match entpacken

Wenn die exec()-Methode eines regulären Ausdrucks einen Match findet, gibt sie ein Array zurück, das zuerst den gesamten übereinstimmenden Abschnitt des Strings enthält und dann die Abschnitte des Strings, die mit jeder gruppierten Klammer im regulären Ausdruck übereinstimmen. Destructuring ermöglicht es Ihnen, die Teile dieses Arrays einfach zu entpacken, den vollständigen Match zu ignorieren, wenn dieser nicht benötigt wird.

function parseProtocol(url) {
  const parsedURL = /^(\w+):\/\/([^/]+)\/(.*)$/.exec(url);
  if (!parsedURL) {
    return false;
  }
  console.log(parsedURL);
  // ["https://developer.mozilla.org/en-US/docs/Web/JavaScript",
  // "https", "developer.mozilla.org", "en-US/docs/Web/JavaScript"]

  const [, protocol, fullHost, fullPath] = parsedURL;
  return protocol;
}

console.log(
  parseProtocol("https://developer.mozilla.org/en-US/docs/Web/JavaScript"),
);
// "https"

Array-Destructuring auf jedem Iterable verwenden

Array-Destructuring ruft das iterable Protokoll der rechten Seite auf. Daher kann jedes Iterable, nicht notwendigerweise Arrays, destrukturiert werden.

const [a, b] = new Map([
  [1, 2],
  [3, 4],
]);
console.log(a, b); // [1, 2] [3, 4]

Nicht-Iterables können nicht als Arrays destrukturiert werden.

const obj = { 0: "a", 1: "b", length: 2 };
const [a, b] = obj;
// TypeError: obj is not iterable

Iterables werden nur bis zur Zuweisung aller Bindungen iteriert.

const obj = {
  *[Symbol.iterator]() {
    for (const v of [0, 1, 2, 3]) {
      console.log(v);
      yield v;
    }
  },
};
const [a, b] = obj; // Only logs 0 and 1

Das Rest-Binding wird eifrig ausgewertet und erstellt ein neues Array, anstatt das alte Iterable zu verwenden.

const obj = {
  *[Symbol.iterator]() {
    for (const v of [0, 1, 2, 3]) {
      console.log(v);
      yield v;
    }
  },
};
const [a, b, ...rest] = obj; // Logs 0 1 2 3
console.log(rest); // [2, 3] (an array)

Grundzuweisung

const user = {
  id: 42,
  isVerified: true,
};

const { id, isVerified } = user;

console.log(id); // 42
console.log(isVerified); // true

Zuweisung an neue Variablennamen

Eine Eigenschaft kann aus einem Objekt entpackt und einer Variablen zugewiesen werden, die einen anderen Namen als die Objekteigenschaft hat.

const o = { p: 42, q: true };
const { p: foo, q: bar } = o;

console.log(foo); // 42
console.log(bar); // true

Hier wird zum Beispiel const { p: foo } = o aus dem Objekt o die Eigenschaft p genommen und einer lokalen Variable namens foo zugewiesen.

Zuweisung an neue Variablennamen und Bereitstellen von Standardwerten

Eine Eigenschaft kann sowohl

• aus einem Objekt entpackt und einer Variablen mit einem anderen Namen zugewiesen werden.
• Einen Standardwert zugewiesen bekommen, falls der entpackte Wert undefined ist.

const { a: aa = 10, b: bb = 5 } = { a: 3 };

console.log(aa); // 3
console.log(bb); // 5

Entpacken von Eigenschaften aus Objekten, die als Funktionsparameter übergeben werden

Objekte, die in Funktionsparameter übergeben werden, können ebenfalls in Variablen entpackt werden, die dann innerhalb des Funktionskörpers zugänglich sind. Was die Objektzuweisung betrifft, erlaubt die Destructuring-Syntax, dass die neue Variable den gleichen Namen oder einen anderen Namen als die ursprüngliche Eigenschaft hat und Standardwerte zuzuweisen für den Fall, dass das ursprüngliche Objekt die Eigenschaft nicht definiert.

Betrachten Sie dieses Objekt, das Informationen über einen Benutzer enthält.

const user = {
  id: 42,
  displayName: "jdoe",
  fullName: {
    firstName: "Jane",
    lastName: "Doe",
  },
};

Hier zeigen wir, wie man eine Eigenschaft des übergebenen Objekts in eine Variable mit dem gleichen Namen entpackt. Der Parameterwert { id } gibt an, dass die id-Eigenschaft des Objekts, das an die Funktion übergeben wird, in eine Variable mit demselben Namen entpackt werden soll, die dann innerhalb der Funktion verwendet werden kann.

function userId({ id }) {
  return id;
}

console.log(userId(user)); // 42

Sie können den Namen der entpackten Variablen definieren. Hier entpacken wir die Eigenschaft namens displayName und benennen sie in dname um, um sie innerhalb des Funktionskörpers zu verwenden.

function userDisplayName({ displayName: dname }) {
  return dname;
}

console.log(userDisplayName(user)); // "jdoe"

Verschachtelte Objekte können ebenfalls entpackt werden. Das folgende Beispiel zeigt die Eigenschaft fullname.firstName, die in eine Variable namens name entpackt wird.

function whois({ displayName, fullName: { firstName: name } }) {
  return `${displayName} is ${name}`;
}

console.log(whois(user)); // "jdoe is Jane"

Standardwert eines Funktionsparameters festlegen

Standardwerte können mit = angegeben werden und werden als Variablenwerte verwendet, wenn eine angegebene Eigenschaft im übergebenen Objekt nicht existiert.

Unten zeigen wir eine Funktion, bei der die Standardgröße 'big' ist, die Standardkoordinaten x: 0, y: 0 sind und der Standardradius 25 beträgt.

function drawChart({
  size = "big",
  coords = { x: 0, y: 0 },
  radius = 25,
} = {}) {
  console.log(size, coords, radius);
  // do some chart drawing
}

drawChart({
  coords: { x: 18, y: 30 },
  radius: 30,
});

Im Funktionsskript für drawChart oben hat die destrukturierte linke Seite einen Standardwert von einem leeren Objekt = {}.

Sie hätten die Funktion auch ohne diesen Standardwert schreiben können. Wenn Sie jedoch diesen Standardwert weglassen, wird die Funktion erwarten, dass beim Aufruf mindestens ein Argument angegeben wird, während sie in ihrer aktuellen Form drawChart() ohne Angabe von Parametern aufgerufen werden kann. Andernfalls müssen Sie mindestens ein leeres Objektliteral angeben.

Für weitere Informationen siehe Default parameters > Destructured parameter with default value assignment.

Verschachteltes Objekt- und Array-Destructuring

const metadata = {
  title: "Scratchpad",
  translations: [
    {
      locale: "de",
      localizationTags: [],
      lastEdit: "2014-04-14T08:43:37",
      url: "/de/docs/Tools/Scratchpad",
      title: "JavaScript-Umgebung",
    },
  ],
  url: "/en-US/docs/Tools/Scratchpad",
};

const {
  title: englishTitle, // rename
  translations: [
    {
      title: localeTitle, // rename
    },
  ],
} = metadata;

console.log(englishTitle); // "Scratchpad"
console.log(localeTitle); // "JavaScript-Umgebung"

For of-Iteration und Destructuring

const people = [
  {
    name: "Mike Smith",
    family: {
      mother: "Jane Smith",
      father: "Harry Smith",
      sister: "Samantha Smith",
    },
    age: 35,
  },
  {
    name: "Tom Jones",
    family: {
      mother: "Norah Jones",
      father: "Richard Jones",
      brother: "Howard Jones",
    },
    age: 25,
  },
];

for (const {
  name: n,
  family: { father: f },
} of people) {
  console.log(`Name: ${n}, Father: ${f}`);
}

// "Name: Mike Smith, Father: Harry Smith"
// "Name: Tom Jones, Father: Richard Jones"

Berechnete Objekteigenschaftsnamen und Destructuring

Berechnete Eigenschaftennamen, wie bei Objektliteralen, können mit Destructuring verwendet werden.

const key = "z";
const { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"

Ungültiger JavaScript-Bezeichner als Eigenschaftsname

Destructuring kann mit Eigenschaftsnamen verwendet werden, die keine gültigen JavaScript-Bezeichner sind, indem ein alternatives Bezeichner bereitgestellt wird, das gültig ist.

const foo = { "fizz-buzz": true };
const { "fizz-buzz": fizzBuzz } = foo;

console.log(fizzBuzz); // true

Objekt-Destructuring ist fast gleichbedeutend mit dem Zugriff auf Eigenschaften. Das bedeutet, wenn Sie versuchen, einen primitiven Wert zu destrukturieren, wird der Wert in das entsprechende Wrapper-Objekt gepackt und die Eigenschaft wird auf dem Wrapper-Objekt angesprochen.

const { a, toFixed } = 1;
console.log(a, toFixed); // undefined ƒ toFixed() { [native code] }

Genauso wie beim Zugriff auf Eigenschaften wirft das Destructuring von null oder undefined einen TypeError.

const { a } = undefined; // TypeError: Cannot destructure property 'a' of 'undefined' as it is undefined.
const { b } = null; // TypeError: Cannot destructure property 'b' of 'null' as it is null.

Dies geschieht sogar, wenn das Muster leer ist.

const {} = null; // TypeError: Cannot destructure 'null' as it is null.

Kombiniertes Array- und Objekt-Destructuring

Array- und Objekt-Destructuring können kombiniert werden. Angenommen, Sie wollen das dritte Element im Array props unten und dann die Eigenschaft name im Objekt, können Sie Folgendes tun:

const props = [
  { id: 1, name: "Fizz" },
  { id: 2, name: "Buzz" },
  { id: 3, name: "FizzBuzz" },
];

const [, , { name }] = props;

console.log(name); // "FizzBuzz"

Die Prototypenkette wird geprüft, wenn das Objekt deconstructed wird

Beim Deconstructing eines Objekts, wenn eine Eigenschaft nicht direkt in sich selbst angesprochen wird, wird die Suche entlang der Prototypenkette fortgesetzt.

const obj = {
  self: "123",
  __proto__: {
    prot: "456",
  },
};
const { self, prot } = obj;

console.log(self); // "123"
console.log(prot); // "456"

• Zuweisungsoperatoren
• ES6 in Depth: Destructuring auf hacks.mozilla.org (2015)