Die destrukturierende Zuweisung ermöglicht es, Daten aus Arrays oder Objekten zu extrahieren, und zwar mit Hilfe einer Syntax, die der Konstruktion von Array- und Objekt-Literalen nachempfunden ist.

Syntax

var a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
console.log(b); // 20

[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(a); // 10
console.log(b): // 20
console.log(rest); // [30, 40, 50]

({ a, b } = { a: 10, b: 20 });
console.log(a); // 10
console.log(b); // 20


// Stage 3 Vorschlag
({a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40 });
console.log(a); // 10
console.log(b); // 20
console.log(rest); // {c: 30, d: 40}

Beschreibung

Die Objekt- und Array-Literal Ausdrücke stellen einen einfachen Weg für die Erstellung von ad hoc Datenpaketen zur Verfügung.

var x = [1, 2, 3, 4, 5];

Die destrukturierende Zuweisung nutzt eine ähnliche Syntax, aber auf der linken Seite der Zuweisung, um zu definieren, welche Werte von der Quellvariablen ausgepackt werden muss.

var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2

Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.

Array-Destrukturierung

Einfaches Variablenzuweisung

var foo = ['one', 'two', 'three'];

var [one, two, three] = foo;
console.log(one); // "one"
console.log(two); // "two"
console.log(three); // "three"

Zuweisung seperat von Deklaration

Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.

var a, b;

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

Standardwerte

Einer Variablen kann ein Standardwert zugewiesen werden, welcher greift, wenn der Wert im Fall vom auspacken des Arrays undefined ist.

var a, b;

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

Variablen tauschen

Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.

Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den XOR-swap Trick).

var a = 1;
var b = 3;

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

Array von Funktion zurückgeben und einlesen

Es ist immer möglich einen Array von einer Funktion zurückzugeben. Destrukturierung kann mit dem Arrayrückgabewert verwendet werden um mehrerer Werte auszuwählen.

In diesem Beispiel gibt f() den Wert [1, 2] zurück, welcher in einer Zeile mittels Destrukturierung eingelesen werden kann.

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

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

Rückgabewerte teilweise ignorieren

Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:

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

var [a, , b] = f();
console.log("A ist " + a + " B ist " + b);

Nach Ausführung dieses Codes ist a =1 und b = 3. Der Wert 2 wird ignoriert. Auf diese Art kann man jegliche (auch alle) zurückgegebene Werte ignorieren. Zum Beispiel:

[,,] = f();

Den Rest eines Arrays einer Variablen zuweisen

Wenn ein Array destrukturiert wird, kann man beim Auspacken den restlichen Teil eines Arrays einer Varaible mit dem Restpattern zuweisen:

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

Zu beachten ist, dass ein SyntaxError erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:

var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

Auspacken von Treffern eines regulären Ausdrucks

Wenn die Methode exec() für reguläre Ausdrücke einen Treffer findet, gibt sie ein Array zurück, das erstens, den gesamten, passenden Teil des Strings und dann die Teile des Strings enthält, die den einzelnen geklammerten Gruppen im regulären Ausdruck entsprechen. Destrukturierende erlaubt es die Teile aus diesem Array auf einfache Art herauszuziehen, wobei der String mit dem kompletten Treffer ignoriert werden kann, falls er nicht benötigt wird.

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

  var [, protocol, fullhost, fullpath] = parsedURL;
  return protocol;
}

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

Objektdestrukturierung

Einfache Zuweisung

var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true 

Zuweisung ohne Deklaration

Die destrukturierende Zuweisung kann ohne eine Deklaration im Zuweisungs-Statement durchgeführt werden.

var a, b;

({a, b} = {a: 1, b: 2});

Die runden Klammern ( ... ) wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.

{a, b} = {a: 1, b: 2} ist keine valide eigenständige Syntax, weil {a, b} auf der linken Seite als ein Block und nicht als Objektliteral erkannt wird.

({a, b} = {a: 1, b: 2}) ist genauso gültig wie var {a, b} = {a: 1, b: 2}

HINWEIS: Der ( ... ) Ausdruck muss durch ein vorangestelltes Semikolen benutzt werden oder es führt eine Funktion aus der vorherigen Zeile aus.

Zu neuen Varaiblennamen zuweisen

Eine Eigenschaft kann aus einem Objekt ausgepackt werden und zu einer Variablen mit einem anderen Namen zugewiesen werden.

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

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

Standardwerte

Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt undefined ist.

var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5

Zuweisen eines neuen Variablennamen und eines Standardwertes

Eine Eigenschaft kann sowohl 1) aus einem Objekt ausgepackt werden und einer Variablen mit einem andern Namen zugewiesen werden und 2) einen Standardwert unterstützen, wenn der ausgepackte Wert undefined ist.

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

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

Standardwerte für Funktionsparamter setzen

ES5 Version

function drawES5Chart(options) {
  options = options === undefined ? {} : options;
  var size = options.size === undefined ? 'big' : options.size;
  var cords = options.cords === undefined ? { x: 0, y: 0 } : options.cords;
  var radius = options.radius === undefined ? 25 : options.radius;
  console.log(size, cords, radius);
  // jetzt zeichnen wir endlich ein paar Charts
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

ES2015-Version

function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) 
{
  console.log(size, cords, radius);
  // zeichne ein paar Graphen
}

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});

In der Funktionssignatur für drawES2015Chart oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. Man kann die Funktion auch ohne die rechte Zuweisungsseite schreiben. Wenn jedoch die Zuweisung auf der rechten Seite weglassen wird, sucht die Funktion nach mindestens einem Argument, das beim Aufruf bereitgestellt wird, während man in der aktuellen Form einfach drawES2015Chart() aufrufen kann, ohne Parameter anzugeben. Das aktuelle Design ist nützlich, wenn man die Funktion, ohne Parameter anzugeben, aufrufen möchte. Das andere ist nützlich, um sicherzustellen , dass ein Objekt an die Funktion übergeben wird.

Destrukturierung von verschachtelten Objekten und Arrays

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

var { title: englishTitle, translations: [{ title: localeTitle }] } = metadata;

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

"for of" Iteration und Destrukturierung

var 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 (var {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"

Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden

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

function whois({displayName: displayName, fullName: {firstName: name}}){
  console.log(displayName + " is " + name);
}

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

console.log("userId: " + userId(user)); // "userId: 42"
whois(user); // "jdoe is John"

Dies ermittelt id, displayName und firstName vom user Objekt und gibt sie aus.

Berechnete Objekteigenschaftsnamen und Destrukturierung

Berechnete Eigenschaftsnamen, wie bei Objektliteralen, können bei der Destruktierung verwendet werden.

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

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

Rest in Objektdestrukturierung

Die Rest/Spread Eigenschaften für den ECMAScript Vorschlag (Stage 3) fügt die Rest-Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.

var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
a; // 10
b; // 20
rest; // { c: 30, d: 40 }

Ungültige JavaScript Bezeichner als Eigenschaftsnamen

Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript Bezeichner sind, indem ein alternativer valider Beizeichner angegeben wird.

const foo = { 'fizz-buzz': true }
const { 'fizz-buzz': fizzBuzz } = foo

console.log(fizzBuzz); // "true"

Spezifikationen

Spezifikation Status Kommentar
ECMAScript 2015 (6th Edition, ECMA-262)
Die Definition von 'Destructuring assignment' in dieser Spezifikation.
Standard Initiale Definition.
ECMAScript Latest Draft (ECMA-262)
Die Definition von 'Destructuring assignment' in dieser Spezifikation.
Entwurf  
Rest/Spread Properties for ECMAScript Draft Stage 3 Entwurf.

Browserkompatibilität

Update compatibility data on GitHub
DesktopMobileServer
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid WebviewChrome für AndroidEdge MobileFirefox für AndroidOpera für AndroidSafari auf iOSSamsung InternetNode.js
Grundlegende UnterstützungChrome Vollständige Unterstützung 49Edge Vollständige Unterstützung 14Firefox Vollständige Unterstützung 41
Hinweise
Vollständige Unterstützung 41
Hinweise
Hinweise Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.
IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung 8WebView Android Vollständige Unterstützung 49Chrome Android Vollständige Unterstützung 49Edge Mobile Vollständige Unterstützung 14Firefox Android Vollständige Unterstützung 41
Hinweise
Vollständige Unterstützung 41
Hinweise
Hinweise Firefox provided a non-standard destructuring implementation from Firefox 2 to 40.
Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 8Samsung Internet Android Vollständige Unterstützung 5.0nodejs Vollständige Unterstützung 6.0.0
Computed property namesChrome Vollständige Unterstützung 49Edge Vollständige Unterstützung 14Firefox Vollständige Unterstützung 34IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 49Chrome Android Vollständige Unterstützung 49Edge Mobile Vollständige Unterstützung 14Firefox Android Vollständige Unterstützung 34Opera Android Vollständige Unterstützung JaSafari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 5.0nodejs Vollständige Unterstützung Ja
Rest in arraysChrome Vollständige Unterstützung 49Edge Vollständige Unterstützung 14
Deaktiviert
Vollständige Unterstützung 14
Deaktiviert
Deaktiviert From version 14: this feature is behind the Enable experimental Javascript features preference.
Firefox Vollständige Unterstützung 34IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Keine Unterstützung NeinWebView Android Vollständige Unterstützung 49Chrome Android Vollständige Unterstützung 49Edge Mobile Vollständige Unterstützung 14
Deaktiviert
Vollständige Unterstützung 14
Deaktiviert
Deaktiviert From version 14: this feature is behind the Enable experimental Javascript features preference.
Firefox Android Vollständige Unterstützung 34Opera Android Vollständige Unterstützung JaSafari iOS Keine Unterstützung NeinSamsung Internet Android Vollständige Unterstützung 5.0nodejs Vollständige Unterstützung 6.0.0
Rest in objects
Experimentell
Chrome Vollständige Unterstützung 60Edge Keine Unterstützung NeinFirefox Vollständige Unterstützung 55IE Keine Unterstützung NeinOpera Vollständige Unterstützung JaSafari Vollständige Unterstützung 11.1WebView Android Vollständige Unterstützung 60Chrome Android Vollständige Unterstützung 60Edge Mobile Keine Unterstützung NeinFirefox Android Vollständige Unterstützung 55Opera Android Vollständige Unterstützung JaSafari iOS Vollständige Unterstützung 11.1Samsung Internet Android Keine Unterstützung Neinnodejs Vollständige Unterstützung 8.3.0

Legende

Vollständige Unterstützung  
Vollständige Unterstützung
Keine Unterstützung  
Keine Unterstützung
Experimentell. Das Verhalten kann sich zukünftig ändern.
Experimentell. Das Verhalten kann sich zukünftig ändern.
Siehe Implementierungshinweise.
Siehe Implementierungshinweise.
Benutzer muss dieses Feature explizit aktivieren.
Benutzer muss dieses Feature explizit aktivieren.

Siehe auch

Schlagwörter des Dokuments und Mitwirkende

Zuletzt aktualisiert von: ldtr89,