ES6 – destructuring
Destructuring jest kolejną nowością, którą wprowadza standard ECMAScript 2015. Konstrukcja pozwala wykorzystać dopasowanie wzorca (pattern matching) w operowaniu na tablicach i obiektach.
Zobacz całą serię: Let-s talk about ECMAScript 2015
arrays
Dzisiaj często możemy spotkać kod podobny do:
// ES5 var point = [1, 2]; var xVal = point[0], yVal = point[1]; console.log(xVal); // 1 console.log(yVal); // 2
Jednak ES6 daje nam dostęp do nowych możliwości. Konstrukcja pozwalająca na dopasowanie wzorca umożliwia nam pisanie kodu w bardziej intuicyjny i przejrzysty sposób. Spójrzmy na przykład:
// ES6 let point = [1, 2]; let [xVal, yVal] = point; console.log(xVal); // 1 console.log(yVal); // 2 // .. and reverse! [xVal, yVal] = [yVal, xVal]; console.log(xVal); // 2 console.log(yVal); // 1
Dopasowanie wzorca pozwala nam na przypisywanie wartości poszczególnych elementów tablicy do zmiennych, bez odwoływania się bezpośrednio do ich indeksów.
Kolejny przykład pokazuje, że możemy także pomijać poszczególne elementy:
let threeD = [1, 2, 3]; let [a, , c] = threeD; console.log(a); // 1 console.log(c); // 3
.. lub sięgać po zagnieżdżone elementy tablic:
let nested = [1, [2, 3], 4]; let [a, [b], d] = nested; console.log(a); // 1 console.log(b); // 2 console.log(d); // 4
objects
Podobnie jak w przypadku tablic, ES6 daje nam możliwość wyciągania z obiektów konkretnych wartości. Składnia jest bardzo podobna jak w powyższych przykładach. Tym razem musimy jednak użyć literału obiektu:
let point = { x: 1, y: 2 }; let { x: a, y: b } = point; console.log(a); // 1 console.log(b); // 2
I również podobnie jak w tablicach, możemy sięgać po zagnieżdżone obiekty:
let point = { x: 1, y: 2, z: { one: 3, two: 4 } }; let { x: a, y: b, z: { one: c, two: d } } = point; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(d); // 4
mixed
Nic nie stoi również na przeszkodzie by mieszać tablice oraz obiekty w naszych strukturach danych i jednocześnie korzystać z dopasowania wzorca:
let mixed = { one: 1, two: 2, values: [3, 4, 5] }; let { one: a, two: b, values: ['c, , e'] } = mixed; console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(e); // 5
Jednak według mnie, najciekawszą formą użycia dopasowania wzorca jest wykorzystanie funkcji. Spójrzmy na przykład kodu:
function mixed () { return { one: 1, two: 2, values: [3, 4, 5] }; } let { one: a, two: b, values: ['c, , e'] } = mixed(); console.log(a); // 1 console.log(b); // 2 console.log(c); // 3 console.log(e); // 5
Rezultat dokładnie ten sam, a możliwości jakby więcej.
uwaga!
1. Jeżeli obiekt lub tablica nie posiadają wartości w ramach użycia wzorca dopasowania, zwrócona zostanie wartość undefined:
let point = { x: 1 }; let { x: a, y: b } = point; console.log(a); // 1 console.log(b); // undefined
2. Jeżeli ominiemy var, let lub const z lewej strony naszego wyrażenia, to zwrócony zostanie wyjątek:
let point = { x: 1 }; { x: a } = point; // throws error
.. jest jednak proste obejście tego problemu. Wystarczy, że do całego wyrażenia dostawimy nawiasy i stanie się ono zupełnie poprawne:
let point = { x: 1 }; ({ x: a } = point); console.log(a); // 1