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

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

Składnia

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});

Opis

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

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

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.

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

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

Destrukturyzacja tablic

Podstawowe przypisanie zmiennych

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

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

Przypisanie oddzielne od deklaracji

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

var a, b;

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

Domyślne wartości

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

var a, b;

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

Zamiana zmiennych

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

Bez wyrażenia destrukturyzującego, zamiana zmiennych wymaga zmiennej tymaczasowej (bądź, w niektórych językach niskiego poziomu, tricku XOR-swap).

var a = 1;
var b = 3;

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

Parsowanie tablicy zwróconej przez funkcję

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.

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

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

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

Ignorowanie niektórych zwróconych wartości

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

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

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

Możesz także zignorować wszystkie zwrócone wartości:

[,,] = f();

Przypisanie reszty tablicy do zmiennej

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

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

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

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

Wypakowywanie wartości z wyników wyrażenia regularnego

Gdy metoda wyrażenia regularnego  exec() 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. 

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"

Destrukturyzacja obiektów

Podstawowe przypisanie

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

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

Przypisanie bez deklaracji

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

var a, b;

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

Nawiasy( .. ) na krawędziach wyrażenia przypisania są składnią wymaganą podczas używania wyrażenia destrukturyzującego literał obiektowy bez deklaracji.

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

Ale już, ({a, b} = {a:1, b:2}) jest poprawne, tak samo jak var {a, b} = {a:1, b:2}

Przypisanie do nowych nazw zmiennych

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

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

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

Wartości domyślne

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

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

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

Przypisywanie do nowych nazw zmiennych i zapewnienie wartości domyślnych

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

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

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

Ustawianie domyślnej wartości parametru funkcji 

Wersja ES5

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
});

Wersja ES2015 (ES6)

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
});

W definicji funkcji drawES2015Chart() powyżej, destrukturyzowana lewa strona wyrażenia jest przypisana do pustego literału obiektowego z prawej strony: {size = 'big', cords = {x: 0, y: 0}, radius = 25} = {}. 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ć drawES2015Chart() 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.

Obiekt zagnieżdżony i destrukturyzacja tablic

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"

Iteracja for..of i destrukturyzacja

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"

Wyciąganie pól z obiektów przekazanych jako parametr funkcji

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"

To wyciąga id, displayName i firstName z obiektu user i wypisuje je.

Wyznaczane nazwy właściwości obiektów i destrukturyzacja

Wyznaczane nazwy waściwości, tak samo jak wh literałach obiektowych, mogą być używane z destrukturyzacją.

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

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

Reszta w destrukturyzacji obiektów

Własciwości reszty/rozproszenia dla ECMAScript (proponowane, etap 3) dodają składnię reszty do destrukturyzacji. Właściwości reszty zbierają pozostałe klucze, które nie zostały pobrane poprzez wzorzec destrukturyzacji.

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

Nipoprawny identyfikator JavaScript jako nazwa własności

Destrukturyzacja może zostać użyta z nazwami własności, które nie są poprawnymi identyfikatorami JavaScript poprzez zapewnienie alternatywnego, poprawnego identyfikatora.

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

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

Specyfikacje

Specification Status Comment
{{SpecName('ES2015', '#sec-destructuring-assignment', 'Destructuring assignment')}} {{Spec2('ES2015')}} Definicja wstępna.
{{SpecName('ESDraft', '#sec-destructuring-assignment', 'Destructuring assignment')}} {{Spec2('ESDraft')}}

Kompatybilność przeglądarek

{{CompatibilityTable}}
Feature Chrome Firefox (Gecko) Edge Internet Explorer Opera Safari
Basic support {{CompatChrome(49.0)}} {{ CompatGeckoDesktop("1.8.1") }} 14 {{CompatNo}} {{CompatNo}} 7.1
Computed property names {{CompatChrome(49.0)}} {{ CompatGeckoDesktop("34") }} 14 {{CompatNo}} {{CompatNo}} {{CompatNo}}
Spread operator {{CompatChrome(49.0)}} {{ CompatGeckoDesktop("34") }} 12[1] {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}}
Feature Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile Chrome for Android
Basic support {{CompatNo}} {{CompatChrome(49.0)}} {{ CompatGeckoMobile("1.0") }} {{CompatNo}} {{CompatNo}} 8 {{CompatChrome(49.0)}}
Computed property names {{CompatNo}} {{CompatChrome(49.0)}} {{ CompatGeckoMobile("34") }} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatChrome(49.0)}}
Spread operator {{CompatNo}} {{CompatChrome(49.0)}} {{ CompatGeckoMobile("34") }} {{CompatUnknown}} {{CompatUnknown}} {{CompatUnknown}} {{CompatChrome(49.0)}}

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

Notatki specyficzne dla Firefox'a

Zobacz też