Destrukturace v JavaScriptu se může zpočátku zdát matoucí, ale pravdou je, že destrukcí může být váš kód o něco logičtější a přímočařejší. Destrukce vypadá o něco složitější, když hledáte nemovitost hluboko v několika objektech, takže se pojďme podívat, jak na to!
Jednoduché zničení vypadá následovně:
const { target } = event;
Zde používáme {} a = pojmenovat proměnnou stejně jako název vlastnosti (při destrukci můžete také použít alias!). Získání hodnoty vnořeného objektu je však trochu složitější:
// Object for testing
const x = { y: { z: { a: 1, b: 2} } }
// Get "b"
const { y: { z: { b } } } = x;
console.log(b); // 2
console.log(z); // z is not defined
console.log(y); // y is not defined
Zde máme objektovou syntaxi s {} a : pro nastavení var na základě vnořené vlastnosti obect. Všimněte si, že pouze poslední vnořená vlastnost je dána jako proměnná; rodiče, na které cestou odkazujeme, ne.
Chcete-li získat odkaz na obě b a y , můžete například použít čárku:
const { y, y: { z: { b } } } = x;
console.log(b); // 2
console.log(y); // {z: {…}}
Na destrukci může chvíli trvat, než si na ni zvyknu, ale čím více ji používám, tím více oceňuji, jak jednoduchý může být můj kód:žádné „tečkové“ peklo a méně celkového kódu!