Przypisanie destrukturyzujące

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.

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

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.

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

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

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

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

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

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

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

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

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"

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

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

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

var a, b;

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

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  

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

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

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

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"

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"

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 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"

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 }

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"

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

• Firefox zapewnił niestandardowe rozszerzenie języka w JS1.7 dla destrukturyzacji. To rozszerzenie zostało usunięte w Gecko 40 (Firefox 40 / Thunderbird 40 / SeaMonkey 2.37). Zobacz błąd 1083498.
• Poczynając od Gecko 41 (Firefox 41 / Thunderbird 41 / SeaMonkey 2.38) żeby dostosować się do specyfikacji ES2015, składnia destrukturyzacji używająca nawiasów, takia jak([a, b]) = [1, 2]) lub ({a, b}) = { a: 1, b: 2 }, jest teraz uważana za niepoprawną i spowoduje SyntaxError. Zobaczpost Jeffa Waldena oraz błąd 1146136 aby uzyskać więcej informacji.

• Assignment operators
• "ES6 in Depth: Destructuring" on hacks.mozilla.org