Destructuring

Die Objekt- und Array-Literal-Ausdrücke bieten eine einfache Möglichkeit, ad hoc-Pakete von Daten zu erstellen.

const arr = [a, b, c];

Das Destructuring verwendet eine ähnliche Syntax, aber es wird stattdessen auf der linken Seite der Zuweisung verwendet. 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

Für Objekte vergleichen Sie die folgenden beiden Zeilenpaare 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 ähnelt Funktionen, die in Sprachen wie Perl und Python vorhanden sind.

Für spezifische Funktionen zum Array- oder Objekt-Destructuring, sehen Sie sich die einzelnen Beispiele unten an.

Sowohl für das Objekt- als auch für das 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 destrukturiert werden.

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

Alle Variablen teilen sich die gleiche Deklaration, daher müssen Sie möglicherweise zweimal destrukturieren, einmal mit let, und einmal mit const, wenn Sie möchten, dass einige Variablen neu zuweisbar und andere 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, in denen die Sprache eine Variable für Sie bindet, können Sie ein Bindungsdestructuring-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 destrukturierte Eigenschaft wird einem Ziel der Zuweisung zugewiesen - das 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 keine gültige Syntax ist:

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 linke Seite des Zuweisungs-Operators 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 beliebiger Ausdruck sein. Er wird nur ausgewertet, wenn es notwendig ist.

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 das Array-Destructuring sammelt es die verbleibenden Elemente des Iterables in einem neuen Array namens rest (oder einem beliebigen Namen, den Sie ihm geben). Für das Objekt-Destructuring kopiert es alle aufzählbaren eigenen Eigenschaften des Objekts, die nicht bereits vom Destructuring-Muster ausgewählt wurden, in ein neues Objekt namens rest.

Formaler gesagt, wird die ...rest-Syntax in Array-Destructuring "rest elements" genannt und in Objekt-Destructuring "rest properties", aber wir nennen sie oft einfach zusammen "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, werden nur die ersten N Variablen Werte zugewiesen, wenn die Anzahl der auf der linken Seiten der Zuweisung angegebenen Variablen größer als N ist. Die Werte der restlichen Variablen bleiben 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

Mit einem Destructuring-Ausdruck können die Werte zweier Variablen vertauscht werden.

Ohne Destructuring erfordert das Vertauschen zweier Werte eine temporäre Variable (oder in einigen Low-Level-Sprachen den XOR-Tauschtrick).

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 Array, das von einer Funktion zurückgegeben wird, parsen

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

In diesem Beispiel gibt f() die Werte [1, 2] als 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 Rückgabewerte 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 Rückgabewerte ignorieren:

[, ,] = f();

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

Verwendung eines Bindungsmusters als Rest-Eigenschaft

Die Rest-Eigenschaft des Array-Destructuring kann ein weiteres Array- oder Objekt-Bindungsmuster sein. Das innere Destructuring destrukturiert aus dem Array, das nach dem Sammeln der Rest-Elemente erstellt wurde, sodass Sie auf diese Weise nicht auf Eigenschaften zugreifen können, die im 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 geschachtelt 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 das Objekt-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 aus einem regulären Ausdrucks-Match entpacken

Wenn die Methode exec() eines regulären Ausdrucks einen Treffer findet, gibt sie ein Array zurück, das zuerst den gesamten übereinstimmenden Abschnitt der Zeichenkette und dann die Abschnitte der Zeichenkette enthält, die jedes geklammerte Gruppenelement im regulären Ausdruck übereinstimmten. Destructuring ermöglicht es Ihnen, die Teile einfach aus diesem Array zu entpacken und die volle Übereinstimmung zu ignorieren, falls sie 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"

Anwendung von Array-Destructuring auf beliebige Iterables

Das Array-Destructuring ruft das iterable protocol der rechten Seite auf. Daher kann jedes iterable, nicht unbedingt 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 alle Bindungen zugewiesen sind, 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-Bindung 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)

Grundlegende Zuweisung

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

const { id, isVerified } = user;

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

Zuweisung zu neuen Variablennamen

Eine Eigenschaft kann aus einem Objekt entpackt und einer Variablen mit einem anderen Namen als der Objekteigenschaft zugewiesen werden.

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

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

Hier zum Beispiel nimmt const { p: foo } = o aus dem Objekt o die Eigenschaft namens p und weist sie einer lokalen Variable namens foo zu.

Zuweisung zu neuen Variablennamen und Angabe von Standardwerten

Eine Eigenschaft kann sowohl

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

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

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

Eigenschaften aus Objekten, die als Funktionsparameter übergeben werden, entpacken

Objekte, die als Funktionsparameter übergeben werden, können auch in Variablen entpackt werden, die dann im Funktionskörper verwendet werden können. Wie bei der Objektzuweisung erlaubt die Destructuring-Syntax, dass die neue Variable den gleichen Namen oder einen anderen Namen als die ursprüngliche Eigenschaft hat und Standardwerte angegeben werden können, falls die ursprüngliche Eigenschaft des Objekts nicht definiert ist.

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 sollte, die dann in der Funktion verwendet werden kann.

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

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

Sie können den Namen der entpackten Variable definieren. Hier entpacken wir die Eigenschaft displayName und benennen sie für die Verwendung im Funktionskörper in dname um.

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

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

Verschachtelte Objekte können ebenfalls entpackt werden. Das folgende Beispiel zeigt, wie die Eigenschaft fullname.firstName 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 Standard-Größe 'big' ist, die Standard-Koordinaten x: 0, y: 0 und der Standard-Radius 25.

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 Funktionssignature von drawChart oben hat die destrukturierte linke Seite einen Standardwert des leeren Objekts = {}.

Sie könnten die Funktion auch ohne diesen Standardwert schreiben. Jedoch wird die Funktion mindestens ein Argument erwarten, wenn sie aufgerufen wird, falls Sie diesen Standardwert weglassen, während Sie in der aktuellen Form drawChart() können, ohne Parameter zu übergeben. Ansonsten müssten Sie zumindest ein leeres Objektliteral übergeben.

Für weitere Informationen siehe Standardparameter > 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 Objekteigenschaftennamen und Destructuring

Berechnete Eigenschaftsnamen, 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 alternativer gültiger Bezeichner angegeben wird.

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

console.log(fizzBuzz); // true

Objekt-Destructuring ist fast gleichwertig zum Eigenschaftszugriff. Das bedeutet, dass wenn Sie versuchen, einen primitiven Wert zu destrukturieren, der Wert in das entsprechende Wrapper-Objekt eingewickelt wird und die Eigenschaft auf dem Wrapper-Objekt zugreift wird.

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

Wie beim Zugriff auf Eigenschaften, wird das Destructuring von null oder undefined einen TypeError werfen.

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 passiert 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 kann kombiniert werden. Angenommen, Sie möchten das dritte Element im Array props unten und dann die Eigenschaft name im Objekt erhalten, 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 nach oben durchsucht, wenn das Objekt dekonstruieren wird

Beim Dekonstruieren eines Objekts, wenn eine Eigenschaft nicht in sich selbst zugegriffen wird, wird es weiterhin entlang der Prototypenkette aufwärts durchsucht.

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)