path: root/files/de/web/javascript/reference/operators/destrukturierende_zuweisung/index.html

---
title: Destrukturierende Zuweisung
slug: Web/JavaScript/Reference/Operators/Destrukturierende_Zuweisung
tags:
  - Destructuring
  - ECMAScript 2015
  - JavaScript
  - Operator
translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
---
<div>{{jsSidebar("Operators")}}</div>

<p>Die <strong>destrukturierende Zuweisung</strong> 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.</p>

<div>{{EmbedInteractiveExample("pages/js/expressions-destructuringassignment.html")}}</div>



<h2 id="Syntax">Syntax</h2>

<pre class="brush:js">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}
</pre>

<h2 id="Beschreibung">Beschreibung</h2>

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

<pre class="brush: js">var x = [1, 2, 3, 4, 5];</pre>

<p>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.</p>

<pre class="brush: js">var x = [1, 2, 3, 4, 5];
var [y, z] = x;
console.log(y); // 1
console.log(z); // 2
</pre>

<p>Diese Fähigkeit ist so ähnlich wie in den Sprachen Perl und Python.</p>

<h2 id="Array-Destrukturierung">Array-Destrukturierung</h2>

<h3 id="Einfaches_Variablenzuweisung">Einfaches Variablenzuweisung</h3>

<pre class="brush: js">var foo = ['one', 'two', 'three'];

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

<h3 id="Zuweisung_separat_von_Deklaration">Zuweisung separat von Deklaration</h3>

<p>Eine destrukturierende Zuweisung kann ohne Deklaration im Zuweisungsstatement vorgenommen werden.</p>

<pre class="brush:js">var a, b;

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

<h3 id="Standardwerte">Standardwerte</h3>

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

<pre class="brush: js">var a, b;

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

<h3 id="Variablen_tauschen">Variablen tauschen</h3>

<p>Zwei Variablenwerte können mit destrukturierenden Zuweisungen vertauscht werden.</p>

<p>Ohne destrukturierende Zuweisung benötigt man für den Tausch zweier Werte eine temporäre Variable (oder, in manchen Low-level Sprachen, den <a class="external" href="http://en.wikipedia.org/wiki/XOR_swap">XOR-swap Trick</a>).</p>

<pre class="brush:js">var a = 1;
var b = 3;

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

<h3 id="Array_von_Funktion_zurückgeben_und_einlesen">Array von Funktion zurückgeben und einlesen</h3>

<p>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.</p>

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

<pre class="brush:js">function f() {
  return [1, 2];
}

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

<h3 id="Rückgabewerte_teilweise_ignorieren">Rückgabewerte teilweise ignorieren</h3>

<p>Man kann auch Rückgabewerte, an denen man nicht interessiert ist, ignorieren:</p>

<pre class="brush:js">function f() {
  return [1, 2, 3];
}

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

<p>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:</p>

<pre class="brush:js">[,,] = f();</pre>

<h3 id="Den_Rest_eines_Arrays_einer_Variablen_zuweisen">Den Rest eines Arrays einer Variablen zuweisen</h3>

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

<pre class="brush: js">var [a, ...b] = [1, 2, 3];
console.log(a); // 1
console.log(b); // [2, 3]</pre>

<p>Zu beachten ist, dass ein {{jsxref("SyntaxError")}} erzeugt wird, wenn auf der linken Seite des Restelements ein trennendes Komma steht:</p>

<pre class="brush: js example-bad">var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma</pre>

<h3 id="Auspacken_von_Treffern_eines_regulären_Ausdrucks">Auspacken von Treffern eines regulären Ausdrucks</h3>

<p>Wenn die Methode <code><a href="/de/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> 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.</p>

<pre class="brush:js">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"
</pre>

<h2 id="Objektdestrukturierung">Objektdestrukturierung</h2>

<h3 id="Einfache_Zuweisung">Einfache Zuweisung</h3>

<pre class="brush: js">var o = {p: 42, q: true};
var {p, q} = o;

console.log(p); // 42
console.log(q); // true
</pre>

<h3 id="Zuweisung_ohne_Deklaration">Zuweisung ohne Deklaration</h3>

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

<pre class="brush:js">var a, b;

({a, b} = {a: 1, b: 2});</pre>

<div class="note">
<p>Die runden Klammern <code>( ... )</code> wird benötigt wenn man die destrukturierende Zuweisung mit Objektliteralen ohne eine Deklaration durchführen möchte.</p>

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

<p><code>({a, b} = {a: 1, b: 2})</code> ist genauso gültig wie <code>var {a, b} = {a: 1, b: 2}</code></p>

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

<h3 id="Zu_neuen_Varaiblennamen_zuweisen">Zu neuen Varaiblennamen zuweisen</h3>

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

<pre class="brush: js">var o = {p: 42, q: true};
var {p: foo, q: bar} = o;

console.log(foo); // 42
console.log(bar); // true</pre>

<h3 id="Standardwerte_2">Standardwerte</h3>

<p>Einer Variablen können Standardwerte zugewiesen werden, wenn der ausgepackte Wert aus dem Objekt <code>undefined</code> ist.</p>

<pre class="brush: js">var {a = 10, b = 5} = {a: 3};

console.log(a); // 3
console.log(b); // 5</pre>

<h3 id="Zuweisen_eines_neuen_Variablennamen_und_eines_Standardwertes">Zuweisen eines neuen Variablennamen und eines Standardwertes</h3>

<p>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 <code>undefined</code> ist.</p>

<pre class="brush: js">var {a:aa = 10, b:bb = 5} = {a: 3};

console.log(aa); // 3
console.log(bb); // 5</pre>

<h3 id="Standardwerte_für_Funktionsparamter_setzen">Standardwerte für Funktionsparamter setzen</h3>

<h4 id="ES5_Version">ES5 Version</h4>

<pre class="brush: js">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
});</pre>

<h4 id="ES2015-Version">ES2015-Version</h4>

<pre class="brush: js">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
});</pre>

<div class="note">
<p>In der Funktionssignatur für <strong><code>drawES2015Chart</code></strong> oben ist der destrukturierten linken Seite ein leeres Objektliteral zugewiesen, auf der rechten Seite: <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. 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 <code><strong>drawES2015Chart()</strong></code> 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.</p>
</div>

<h3 id="Destrukturierung_von_verschachtelten_Objekten_und_Arrays">Destrukturierung von verschachtelten Objekten und Arrays</h3>

<pre class="brush:js">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"</pre>

<h3 id="for_of_Iteration_und_Destrukturierung">"for of" Iteration und Destrukturierung</h3>

<pre class="brush: js">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"</pre>

<h3 id="Auspacken_von_Objektfeldern_die_als_Funktionsparameter_übergeben_werden">Auspacken von Objektfeldern, die als Funktionsparameter übergeben werden</h3>

<pre class="brush:js">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"</pre>

<p>Dies ermittelt <code>id</code>, <code>displayName</code> und <code>firstName</code> vom user Objekt und gibt sie aus.</p>

<h3 id="Berechnete_Objekteigenschaftsnamen_und_Destrukturierung">Berechnete Objekteigenschaftsnamen und Destrukturierung</h3>

<p>Berechnete Eigenschaftsnamen, wie bei <a href="/de/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">Objektliteralen</a>, können bei der Destruktierung verwendet werden.</p>

<pre class="brush: js">let key = "z";
let { [key]: foo } = { z: "bar" };

console.log(foo); // "bar"
</pre>

<h3 id="Rest_in_Objektdestrukturierung">Rest in Objektdestrukturierung</h3>

<p>Die <a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Eigenschaften für den ECMAScript</a> Vorschlag (Stage 3) fügt die <a href="/de/docs/Web/JavaScript/Reference/Functions/rest_parameters">Rest-</a>Syntax zur Destrukturierung hinzu. Rest Eigenschaften sammeln die restlichen, eigenen, aufzählbaren Eigenschaftsschlüssel, die noch nicht von der Destrukturierung erfasst wurden, auf.</p>

<pre class="brush: js">var {a, b, ...rest} = {a: 10, b: 20, c: 30, d: 40};
a; // 10
b; // 20
rest; // { c: 30, d: 40 }</pre>

<h3 id="Ungültige_JavaScript_Bezeichner_als_Eigenschaftsnamen">Ungültige JavaScript Bezeichner als Eigenschaftsnamen</h3>

<p>Destrukturierung kann mit Eigenschaftsnamen benutzt werden, die keine gültigen JavaScript <a href="/de/docs/Glossary/Identifier">Bezeichner</a> sind, indem ein alternativer valider Beizeichner angegeben wird.</p>

<pre class="brush: js">const foo = { 'fizz-buzz': true }
const { 'fizz-buzz': fizzBuzz } = foo

console.log(fizzBuzz); // "true"
</pre>

<h2 id="Spezifikationen">Spezifikationen</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Spezifikation</th>
   <th scope="col">Status</th>
   <th scope="col">Kommentar</th>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Initiale Definition.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td> </td>
  </tr>
  <tr>
   <td><a href="https://github.com/tc39/proposal-object-rest-spread">Rest/Spread Properties for ECMAScript</a></td>
   <td>Draft</td>
   <td>Stage 3 Entwurf.</td>
  </tr>
 </tbody>
</table>

<h2 id="Browserkompatibilität">Browserkompatibilität</h2>

<div>


<p>{{Compat("javascript.operators.destructuring")}}</p>
</div>

<h2 id="Siehe_auch">Siehe auch</h2>

<ul>
 <li><a href="/de/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Zuweisungsoperatoren</a></li>
 <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" auf hacks.mozilla.org</a></li>
 <li><a href="https://stackoverflow.com/questions/28532868/basic-nodejs-require-syntax#28532919">Multiple ways of using destructuring assignments (Stack Overflow)</a></li>
</ul>