Destructuring

Probieren Sie es aus

let a, b, rest;
[a, b] = [10, 20];

console.log(a);
// Expected output: 10

console.log(b);
// Expected output: 20

[a, b, ...rest] = [10, 20, 30, 40, 50];

console.log(rest);
// Expected output: Array [30, 40, 50]

Syntax

const [a, b] = array;
const [a, , b] = array;
const [a = aDefault, b] = array;
const [a, b, ...rest] = array;
const [a, , b, ...rest] = array;
const [a, b, ...{ pop, push }] = array;
const [a, b, ...[c, d]] = array;

const { a, b } = obj;
const { a: a1, b: b1 } = obj;
const { a: a1 = aDefault, b = bDefault } = obj;
const { a, b, ...rest } = obj;
const { a: a1, b: b1, ...rest } = obj;
const { [key]: a } = obj;

let a, b, a1, b1, c, d, rest, pop, push;
[a, b] = array;
[a, , b] = array;
[a = aDefault, b] = array;
[a, b, ...rest] = array;
[a, , b, ...rest] = array;
[a, b, ...{ pop, push }] = array;
[a, b, ...[c, d]] = array;

({ a, b } = obj); // parentheses are required
({ a: a1, b: b1 } = obj);
({ a: a1 = aDefault, b = bDefault } = obj);
({ a, b, ...rest } = obj);
({ a: a1, b: b1, ...rest } = obj);

Beschreibung

Die Objekt- und Array-Literal-Ausdrcke bieten eine einfache Mglichkeit, ad hoc-Pakete von Daten zu erstellen.

const arr = [a, b, c];

Das Destructuring verwendet hnlichen Syntax, jedoch auf der linken Seite der Zuweisung. Es fhrt die umgekehrte Operation einer Array-Deklaration durch, indem es jedes Element in der Sammlung als separate Variable deklariert.

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

Was Objekte betrifft, vergleichen Sie die beiden Zeilenpaare unten und sehen Sie, wie es eine direkte Entsprechung innerhalb jedes Paares 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 Fhigkeit ist hnlich wie Funktionen, die in Sprachen wie Perl und Python vorhanden sind.

Fr spezifische Funktionen des Array- oder Objekt-Destructuring beziehen Sie sich auf die einzelnen Beispiele unten.

Bindung und Zuweisung

Fr das Destructuring von Objekten und Arrays gibt es zwei Arten von Destructuring-Mustern: Bindungsmuster und Zuweisungsmuster, mit leicht unterschiedlichen Syntaxen.

Bei Bindungsmustern beginnt das Muster mit einem Deklarationsschlsselwort (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 dieselbe Deklaration, sodass Sie mglicherweise zweimal destrukturieren mssen einmal mit let, einmal mit const wenn einige Variablen neu zuweisbar, whrend andere schreibgeschtzt sein sollen.

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 fr Sie bindet, knnen Sie ein Bindungs-Destructuring-Muster verwenden. Dazu gehren:

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

Bei Zuweisungsmustern beginnt das Muster nicht mit einem Schlsselwort. Jede destrukturierte Eigenschaft wird einem Ziel der Zuweisung zugewiesen das entweder zuvor 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 gltige 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 knnen nur Zuweisungsmuster als linke Seite des Zuweisungsoperators verwenden. Sie knnen sie nicht mit zusammengesetzten Zuweisungsoperatoren wie += oder *= verwenden.

Standardwert

Jeder 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 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.

Rest-Eigenschaften und Rest-Elemente

Sie knnen ein Destructuring-Muster mit einer Rest-Eigenschaft ...rest abschlieen. Fr Array-Destructuring sammelt es die verbleibenden Elemente der iterierbaren Daten in einem neuen Array mit dem Namen rest (oder einem beliebigen Namen, den Sie ihm geben). Fr Objekt-Destructuring kopiert es alle aufzhlbaren eigenen Eigenschaften des Objekts, die nicht bereits durch das Destructuring-Muster ausgewhlt wurden, in ein neues Objekt namens rest.

Formell wird die ...rest-Syntax bei Array-Destructuring als "Rest-Elemente" und bei Objekt-Destructuring als "Rest-Eigenschaften" bezeichnet, aber wir nennen sie oft einfach "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 nachgestelltes 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

Wie jede andere JavaScript-Sprachfunktion gibt es kein implizites tiefes Kopieren. Die Rest-Eigenschaft erstellt ein neues Objekt (oder Array), aber alle seine Mitgliedswerte bleiben gleich, wenn es sich um Objektreferenzen handelt.

Beispiele

Array-Destructuring

Grundlegende Variablen-Zuweisung

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 Quelle

In einem Array-Destructuring von einem Array der Lnge N, das auf der rechten Seite der Zuweisung angegeben ist, werden, wenn die Anzahl der Variablen auf der linken Seite der Zuweisung grer ist als N, nur die ersten N Variablen Werte zugewiesen. Die Werte der verbleibenden Variablen werden undefined sein.

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 knnen in einem Destructuring-Ausdruck getauscht werden.

Ohne Destructuring erfordert das Tauschen zweier Werte eine temporre Variable (oder in einigen niedrigstufigen Sprachen den XOR-Tausch-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 Array analysieren, das von einer Funktion zurckgegeben wird

Es war schon immer mglich, ein Array von einer Funktion zurckzugeben. Durch Destructuring kann das Arbeiten mit einem zurckgegebenen Array-Wert prgnanter werden.

In diesem Beispiel gibt f() die Werte [1, 2] als Ausgabe zurck, die mit Destructuring in einer einzigen Zeile analysiert werden knnen.

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

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

Einige zurckgegebene Werte ignorieren

Sie knnen Rckgabewerte ignorieren, die Sie nicht interessieren:

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 knnen auch alle zurckgegebenen Werte ignorieren:

[, ,] = f();

Obwohl es in diesem Fall wahrscheinlich klarer ist, einfach die Funktion aufzurufen und Destructuring berhaupt nicht zu verwenden. Sie mssen den Rckgabewert nicht verwenden.

Ein Bindungsmuster als Rest-Eigenschaft verwenden

Die Rest-Eigenschaft des Array-Destructuring kann ein anderes Array oder ein Objekt-Bindungsmuster sein. Das innere Destructuring destrukturiert aus dem Array, das nach dem Sammeln der restlichen Elemente erstellt wurde, sodass Sie auf keine Eigenschaften zugreifen knnen, die auf dem ursprnglichen Iterablen in dieser Weise 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 knnen 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 desobject-Destructuring als Rest-Eigenschaft nur einen Bezeichner 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 regulren Ausdrucks-Match entpacken

Wenn die Methode exec() eines regulren Ausdrucks einen Treffer findet, gibt sie ein Array zurck, das zuerst den gesamten bereinstimmenden Teil des Strings und dann die Teile des Strings enthlt, die mit jeder geklammerten Gruppe im regulren Ausdruck bereinstimmen. Destructuring ermglicht es Ihnen, die Teile dieses Arrays einfach zu entpacken und den vollstndigen Treffer zu ignorieren, wenn er nicht bentigt 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 Iterablen verwenden

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

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

Nicht-Iterables knnen 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 solange iteriert, bis alle Bindungen zugewiesen sind.

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

Die Restbindung wird sofort ausgewertet und erstellt ein neues Array, anstatt das alte Iterabele 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)

Objekt-Destructuring

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 mit dem Namen p und weist sie einer lokalen Variablen mit dem Namen foo zu.

Zuweisung zu neuen Variablennamen und Bereitstellung 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 entpacken, die als Funktionsparameter bergeben werden

Objekte, die in Funktionsparameter bergeben werden, knnen auch in Variablen entpackt werden, auf die dann innerhalb des Funktionskrpers zugegriffen werden kann. Wie bei der Objekt-Zuweisung ermglicht es die Destructuring-Syntax, dass die neue Variable denselben oder einen anderen Namen als die ursprngliche Eigenschaft hat, und Standardwerte fr den Fall zuzuweisen, dass das ursprngliche Objekt die Eigenschaft nicht definiert.

Betrachten Sie dieses Objekt, das Informationen ber einen Benutzer enthlt.

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

Hier zeigen wir, wie eine Eigenschaft des bergebenen Objekts in eine Variable mit demselben Namen entpackt wird. Der Parameterwert { id } gibt an, dass die id-Eigenschaft des Objekts, das der 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 knnen den Namen der entpackten Variablen definieren. Hier entpacken wir die Eigenschaft mit dem Namen displayName und benennen sie in dname fr die Verwendung im Funktionskrper um.

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

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

Verschachtelte Objekte knnen ebenfalls entpackt werden. Das Beispiel unten 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"

Festlegen eines Standardwerts fr Funktionsparameter

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

Unten zeigen wir eine Funktion, bei der die Standardgre 'big' ist, die Standardkoordinaten x: 0, y: 0 sind und der Standardradius 25 ist.

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 Funktionssignatur von drawChart oben hat die destrukturierte linke Seite einen Standardwert von einem leeren Objekt = {}.

Sie knnten die Funktion auch ohne diesen Standardwert schreiben. Wird dieser Standardwert jedoch nicht angegeben, sucht die Funktion mindestens ein Argument, das beim Aufrufen bereitgestellt werden soll, whrend Sie in ihrer aktuellen Form drawChart() aufrufen knnen, ohne Parameter bereitzustellen. Ansonsten mssen Sie mindestens ein leeres Objekt geben.

Fr mehr Informationen siehe Standardparameter > Destrukturierter Parameter mit Standardwertzuweisung.

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"

Fr 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 Eigenschaftsnamen, wie bei Objektliteralen, knnen beim Destructuring verwendet werden.

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

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

Ungltiger JavaScript-Identifier als Eigenschaftsname

Destructuring kann mit Eigenschaftsnamen verwendet werden, die keine gltigen JavaScript-Bezeichner sind, indem ein alternativer Bezeichner bereitgestellt wird, der gltig ist.

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

console.log(fizzBuzz); // true

Destructuring primitiver Werte

Objekt-Destructuring ist fast gleichbedeutend mit Eigenschafts-Zugriff. Das heit, wenn Sie versuchen, einen primitiven Wert zu destrukturieren, wird der Wert in das entsprechende Wrapper-Objekt eingewickelt und die Eigenschaft wird auf dem Wrapper-Objekt abgerufen.

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 kann kombiniert werden. Angenommen, Sie mchten das dritte Element im Array props unten und dann die Eigenschaft name im Objekt, knnen 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 Prototyp-Kette wird durchsucht, wenn das Objekt dekonstruiert wird

Wenn ein Objekt dekonstruiert wird, und eine Eigenschaft nicht in sich selbst vorhanden ist, wird die Prototyp-Kette weiter durchsucht.

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

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

Spezifikationen

Browser-Kompatibilitt

Siehe auch

• Zuweisungs-Operatoren
• ES6 in Depth: Destructuring auf hacks.mozilla.org (2015)