path: root/files/pl/web/javascript/reference/operators/destructuring_assignment/index.html

---
title: Przypisanie destrukturyzujące
slug: Web/JavaScript/Reference/Operators/Destructuring_assignment
translation_of: Web/JavaScript/Reference/Operators/Destructuring_assignment
original_slug: Web/JavaScript/Referencje/Operatory/Destructuring_assignment
---
<div>{{jsSidebar("Operators")}}</div>

<p>Składnia <strong>przypisania destrukturyzującego</strong> jest wyrażeniem w JavaScript, które pozwala na wyciągnięcie danych z tablic bądź obiektów do odrębnych zmiennych.</p>

<h2 id="Składnia">Składnia</h2>

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

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

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

// ES2016 - nie zaimplementowane w przeglądarce Firefox 47a01
({a, b, ...rest} = {a:1, b:2, c:3, d:4}); </pre>

<h2 id="Opis">Opis</h2>

<p>Wyrażenie literału obiektowego i tablicowego umożliwiają łatwe tworzenie paczek danych <em>ad-hoc</em>. </p>

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

<p>Składnia przypisania destrukturyzacyjnego używa podobnej składni, ale z lewej strony przypisania definiujemy, które elementy wyciągnąć ze zmiennej źródłowej.</p>

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

<p>Funkcjonalność ta jest podobna do tych obecnych w językach takich jak Perl i Python.</p>

<h2 id="Destrukturyzacja_tablic">Destrukturyzacja tablic</h2>

<h3 id="Podstawowe_przypisanie_zmiennych">Podstawowe przypisanie zmiennych</h3>

<pre class="brush: js notranslate">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="Przypisanie_oddzielne_od_deklaracji">Przypisanie oddzielne od deklaracji</h3>

<p>Zmiennej można przypisać wartość poprzez destrukturyzację oddzielnie od deklaracji tej zmiennej.</p>

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

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

<h3 id="Domyślne_wartości">Domyślne wartości</h3>

<p>Zmiennej można przypisać wartość domyślną, w wypadku, gdy wartość wyciągnięta z tablicy jest niezdefiniowana - <code>undefined</code>.</p>

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

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

<h3 id="Zamiana_zmiennych">Zamiana zmiennych</h3>

<p>Dwie zmienne mogą zamienić się miejscami przy wykorzystaniu jednego wyrażenia destrukturyzującego.</p>

<p>Bez wyrażenia destrukturyzującego, zamiana zmiennych wymaga zmiennej tymaczasowej (bądź, w niektórych językach niskiego poziomu, tricku <a class="external" href="https://en.wikipedia.org/wiki/XOR_swap_algorithm">XOR-swap</a>).</p>

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

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

<h3 id="Parsowanie_tablicy_zwróconej_przez_funkcję">Parsowanie tablicy zwróconej przez funkcję</h3>

<p>Zwrócenie tablicy poprzez funkcję zawsze było możliwe. Destrukturyzacja może sprawić, że praca ze zwróconymi wartościami typu array będzie bardziej zwięzła.</p>

<p>W tym przykładzie, <code>f()</code> zwraca wartości <code>[1, 2]</code> jako jej wyjście, mogą one być sparsowane w jednej linijce poprzez użycie destrukturyzacji.</p>

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

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

<h3 id="Ignorowanie_niektórych_zwróconych_wartości">Ignorowanie niektórych zwróconych wartości</h3>

<p>Możesz zignorować zwrócone wartości, którymi nie jesteś zainteresowany.</p>

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

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

<p>Możesz także zignorować wszystkie zwrócone wartości:</p>

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



<h3 id="Przypisanie_reszty_tablicy_do_zmiennej">Przypisanie reszty tablicy do zmiennej</h3>

<p>Podczas destrukturyzacji array'a możesz wypakować i przypisać jego pozostałą część do zmiennej używając operatora reszty:</p>

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

<p>Zwróć uwagę, że zostanie wyrzucony {{jsxref("SyntaxError")}} jeśli końcowy przecinek będzie użyty z prawej strony wyrażenia z elementem reszty: </p>

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

<h3 id="Wypakowywanie_wartości_z_wyników_wyrażenia_regularnego">Wypakowywanie wartości z wyników wyrażenia regularnego</h3>

<p>Gdy metoda wyrażenia regularnego  <code><a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/exec">exec()</a></code> znajdzie pasujący element, zwraca ona tablicę zawierającą kolejno cały string zawierajacy pasujące elementy, a później elementy stringa, które pasowały do każdej grupy wyrażenia regularnego znajdującej się w nawiasach. Wyrażenie destrukturyzujące pozwala na łatwe wypakowanie elementów tej tablicy ignorując pełny string, gdy nie jest on potrzebny. </p>

<pre class="brush: js notranslate">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="Destrukturyzacja_obiektów">Destrukturyzacja obiektów</h2>

<h3 id="Podstawowe_przypisanie">Podstawowe przypisanie</h3>

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

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

<h3 id="Przypisanie_bez_deklaracji">Przypisanie bez deklaracji</h3>

<p>Zmiennej można przypisać wartość poprzez destrukturyazację oddzielnie od deklaracji tej zmiennej.</p>

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

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

<div class="note">
<p>Nawiasy<code>( .. )</code> na krawędziach wyrażenia przypisania są składnią wymaganą podczas używania wyrażenia destrukturyzującego literał obiektowy bez deklaracji.</p>

<p><code>{a, b} = {a:1, b:2}</code> nie jest poprawną składnią samą w sobie, ponieważ <code>{a, b}</code> z lewej strony wyrażenia jest odbierana jako blok, a nie literał obiektowy.</p>

<p>Ale już, <code>({a, b} = {a:1, b:2})</code> jest poprawne, tak samo jak <code>var {a, b} = {a:1, b:2}</code></p>
</div>

<h3 id="Przypisanie_do_nowych_nazw_zmiennych">Przypisanie do nowych nazw zmiennych</h3>

<p>Zmienna może być wyciągnięta z obiektu i przypisana do zmiennej z inną nazwą niż nazwa właściwości obiektu.</p>

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

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

<h3 id="Wartości_domyślne">Wartości domyślne</h3>

<p>Zmiennej można przypisać wartość domyślną, w wypadku, gdy wartość wyciągnięta z obiektu jest <code>undefined</code>.</p>

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

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



<h3 id="Przypisywanie_do_nowych_nazw_zmiennych_i_zapewnienie_wartości_domyślnych">Przypisywanie do nowych nazw zmiennych i zapewnienie wartości domyślnych</h3>

<p>Właściwość może być zarówno 1) wypakowana z obiektu i przypisana do zmiennej z inną nazwą 2) może być jej przypisana wartość domyślna, gdy wypakowana wartość jest <code>undefined</code>.</p>

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

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



<h3 id="Ustawianie_domyślnej_wartości_parametru_funkcji">Ustawianie domyślnej wartości parametru funkcji </h3>

<h4 id="Wersja_ES5">Wersja ES5</h4>

<pre class="brush: js notranslate">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);
  // now finally do some chart drawing
}

drawES5Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});</pre>

<h4 id="Wersja_ES2015_ES6">Wersja ES2015 (ES6)</h4>

<pre class="brush: js notranslate">function drawES2015Chart({size = 'big', cords = { x: 0, y: 0 }, radius = 25} = {}) {
  console.log(size, cords, radius);
  // do some chart drawing
}

// In Firefox, default values for destructuring assignments are not yet implemented (as described below).
// The workaround is to write the parameters in the following way:
// ({size: size = 'big', cords: cords = { x: 0, y: 0 }, radius: radius = 25} = {})

drawES2015Chart({
  cords: { x: 18, y: 30 },
  radius: 30
});</pre>

<div class="note">
<p>W definicji funkcji <strong><code>drawES2015Chart()</code></strong> powyżej, destrukturyzowana lewa strona wyrażenia jest przypisana do pustego literału obiektowego z prawej strony: <code>{size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}</code>. Można by było również napisać funkcję bez prawostronnego przypisania. Jednakże jeśli zostawisz prawą stroę przypisania, funkcja będzie szukać przynajmniej jednego argumentu podczas wywołania, natomiast w jej obecnej formie możesz po prostu wywołać <code><strong>drawES2015Chart()</strong></code> bez podawania parametrów. Ten sposób jest użyteczny gdy chcesz mieć możliwość wywołania funkcji bez podawania parametrów, ten drugi może być użyteczny, gdy chcesz być pewny, że obiekt został wprowadzony do funkcji.</p>
</div>

<h3 id="Obiekt_zagnieżdżony_i_destrukturyzacja_tablic">Obiekt zagnieżdżony i destrukturyzacja tablic</h3>

<pre class="brush:js notranslate">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="Iteracja_for..of_i_destrukturyzacja">Iteracja for..of i destrukturyzacja</h3>

<pre class="brush: js notranslate">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="Wyciąganie_pól_z_obiektów_przekazanych_jako_parametr_funkcji">Wyciąganie pól z obiektów przekazanych jako parametr funkcji</h3>

<pre class="brush:js notranslate">function userId({id}) {
  return id;
}

function whois({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>To wyciąga <code>id</code>, <code>displayName</code> i <code>firstName</code> z obiektu <em>user </em>i wypisuje je.</p>

<h3 id="Wyznaczane_nazwy_właściwości_obiektów_i_destrukturyzacja">Wyznaczane nazwy właściwości obiektów i destrukturyzacja</h3>

<p>Wyznaczane nazwy waściwości, tak samo jak wh <a href="/en-US/docs/Web/JavaScript/Reference/Operators/Object_initializer#Computed_property_names">literałach obiektowych</a>, mogą być używane z destrukturyzacją.</p>

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

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



<h3 id="Reszta_w_destrukturyzacji_obiektów">Reszta w destrukturyzacji obiektów</h3>

<p><a href="https://github.com/tc39/proposal-object-rest-spread">Własciwości reszty/rozproszenia dla ECMAScript</a> (proponowane, etap 3) dodają składnię <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters">reszty</a> do destrukturyzacji. Właściwości reszty zbierają pozostałe klucze, które nie zostały pobrane poprzez wzorzec destrukturyzacji.</p>

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

<h3 id="Nipoprawny_identyfikator_JavaScript_jako_nazwa_własności">Nipoprawny identyfikator JavaScript jako nazwa własności</h3>

<p>Destrukturyzacja może zostać użyta z nazwami własności, które nie są poprawnymi <a href="https://developer.mozilla.org/en-US/docs/Glossary/Identifier">identyfikatorami</a> JavaScript poprzez zapewnienie alternatywnego, poprawnego identyfikatora.</p>

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

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



<h2 id="Specyfikacje">Specyfikacje</h2>

<table class="standard-table">
 <tbody>
  <tr>
   <th scope="col">Specification</th>
   <th scope="col">Status</th>
   <th scope="col">Comment</th>
  </tr>
  <tr>
   <td>{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
   <td>{{Spec2('ES2015')}}</td>
   <td>Definicja wstępna.</td>
  </tr>
  <tr>
   <td>{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}}</td>
   <td>{{Spec2('ESDraft')}}</td>
   <td></td>
  </tr>
 </tbody>
</table>

<h2 id="Kompatybilność_przeglądarek">Kompatybilność przeglądarek</h2>

<div>{{CompatibilityTable}}</div>

<div id="compat-desktop">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Edge</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{ CompatGeckoDesktop("1.8.1") }}</td>
   <td>14</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>7.1</td>
  </tr>
  <tr>
   <td>Computed property names</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{ CompatGeckoDesktop("34") }}</td>
   <td>14</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
  </tr>
  <tr>
   <td>Spread operator</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{ CompatGeckoDesktop("34") }}</td>
   <td>12<sup>[1]</sup></td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
  </tr>
 </tbody>
</table>
</div>

<div id="compat-mobile">
<table class="compat-table">
 <tbody>
  <tr>
   <th>Feature</th>
   <th>Android</th>
   <th>Chrome for Android</th>
   <th>Firefox Mobile (Gecko)</th>
   <th>IE Mobile</th>
   <th>Opera Mobile</th>
   <th>Safari Mobile</th>
   <th>Chrome for Android</th>
  </tr>
  <tr>
   <td>Basic support</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{ CompatGeckoMobile("1.0") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>8</td>
   <td>{{CompatChrome(49.0)}}</td>
  </tr>
  <tr>
   <td>Computed property names</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{ CompatGeckoMobile("34") }}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(49.0)}}</td>
  </tr>
  <tr>
   <td>Spread operator</td>
   <td>{{CompatNo}}</td>
   <td>{{CompatChrome(49.0)}}</td>
   <td>{{ CompatGeckoMobile("34") }}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatUnknown}}</td>
   <td>{{CompatChrome(49.0)}}</td>
  </tr>
 </tbody>
</table>
</div>

<p>[1] Wymaga odblokowanej flagi "Enable experimental Javascript features" w `about:flags`</p>

<h2 id="Notatki_specyficzne_dla_Firefoxa">Notatki specyficzne dla Firefox'a</h2>

<ul>
 <li>Firefox zapewnił niestandardowe rozszerzenie języka w <a href="/en-US/docs/Web/JavaScript/New_in_JavaScript/1.7">JS1.7</a> dla destrukturyzacji. To rozszerzenie zostało usunięte w Gecko 40 {{geckoRelease(40)}}. Zobacz {{bug(1083498)}}.</li>
 <li>Poczynając od Gecko 41 {{geckoRelease(41)}} żeby dostosować się do specyfikacji ES2015, składnia destrukturyzacji używająca nawiasów, takia jak<code>([a, b]) = [1, 2])</code> lub <code>({a, b}) = { a: 1, b: 2 }</code>, jest teraz uważana za niepoprawną i spowoduje {{jsxref("SyntaxError")}}. Zobacz<a class="external external-icon" href="http://whereswalden.com/2015/06/20/new-changes-to-make-spidermonkeys-and-firefoxs-parsing-of-destructuring-patterns-more-spec-compliant/">post Jeffa Waldena </a>oraz {{bug(1146136)}} aby uzyskać więcej informacji.</li>
</ul>

<h2 id="Zobacz_też">Zobacz też</h2>

<ul>
 <li><a href="/en-US/docs/Web/JavaScript/Reference/Operators/Assignment_Operators">Assignment operators</a></li>
 <li><a href="https://hacks.mozilla.org/2015/05/es6-in-depth-destructuring/">"ES6 in Depth: Destructuring" on hacks.mozilla.org</a></li>
</ul>