Destruování polí a objektů v JavaScriptu část-2

V mém posledním článku (Destructuring Array Part-1) jsme se dozvěděli o destrukci pole. Pokud si pamatujete, jak jsem vysvětlil v mém předchozím článku, Destructuring je funkce ES6 a je to v podstatě způsob, jak rozbalit hodnoty z pole nebo objektu do samostatných proměnných. Jinými slovy, destrukcí znamená rozdělit složitou datovou strukturu na menší datovou strukturu, jako je proměnná.

Tento článek se bude zabývat destrukcí objektů.

Abychom mohli provést destrukturaci objektu, musíme vytvořit objekt.

const restaurant ={
    restaurantName: "Bombay Night",
    location: "james street 52, New York,
    openingHours:{
      mon:{
        open:10,
        close:22,
     },
     fri:{
       open:11,
       close:23,
    },
    sat:{
      open:13,
      close:23,
    },
  },
}

Základy destrukce

používáme složené závorky k destrukci objektu, pak vše, co musíme udělat, je začít s const a poskytnout/definovat názvy proměnných, které přesně odpovídají názvům vlastností, které chceme z objektu získat. Jednu věc si pamatujte v objektu na pořadí prvků nezáleží, nemusíme prvky přeskakovat, jako jsme to dělali v poli.

const { restaurantName, openingHours } = restaurant;
console.log( restaurantName,openingHours);
// output Bombay Night
// output openingHours:{
      mon:{
        open:10,
        close:22,
     },
     fri:{
       open:11,
       close:23,
    },
    sat:{
      open:13,
      close:23,
    },
  }

Toto jsou základy ničení objektů. To je mimořádně užitečné zejména tehdy, když se zabýváme výsledky API, získáváme data z jiné webové aplikace. Data obvykle přicházejí ve formě objektů, pak je můžeme destruovat a provádět další akce.

Přepínání názvu vlastnosti

Udělejme o krok dále, předpokládejme, že chcete, aby se název proměnné lišil od názvu vlastnosti. Takže tady to můžeme udělat takto, ale samozřejmě musíme stále odkazovat na názvy vlastností, jako jsme to udělali výše, a používáme dvojtečku k zadání nového názvu proměnné.

const {restaurantName: name , openingHours:hours} = restaurant;
console.log(name,hours);
// output Bombay Night
// output openingHours:{
      mon:{
        open:10,
        close:22,
     },
     fri:{
       open:11,
       close:23,
    },
    sat:{
      open:13,
      close:23,
    },
  }

Tímto způsobem jim můžeme dát nový název proměnné. To je opravdu užitečné při práci s daty třetích stran.

Výchozí hodnoty

Další užitečná funkce, když se zabýváme daty třetích stran, jako je objekt, který získáme odjinud, například volání API, může být opravdu užitečné mít výchozí hodnoty pro případ, že se snažíme číst vlastnost, která neexistuje na objektu, takže obvykle pak dostaneme nedefinováno, například nemáme název vlastnosti restaurantMenu, pokud se pokusíme získat tuto vlastnost, bude to nedefinované, protože neexistuje žádná vlastnost volání restaurantMenu, takže můžeme nastavit výchozí hodnoty jen jako jsme to udělali v polích.

const {restaurantName: name , restaurantMenu = [] } = restaurant;
console.log(name,restaurantMenu);
// output Bombay Night
// output here will get empty Array [] instead undefined 

Mějte na paměti, že je to opravdu užitečné, když nemáme pevně zakódovaná data, jak je máme výše, pak je užitečné nastavit výchozí hodnoty.

Mutující proměnné

Dále budeme hovořit o mutování proměnných při destrukci objektů, takže jsme to udělali v předchozím článku s poli, ale v objektech, které fungují trochu jinak.

// here we define two variables x and y
let x = 50;
let y = 100;
// here we define one object z with property name x and y
const Z = { x:10, y:50 };

// and now we want to destructure this object
// keep in mind we can't do it like this here, like we did in array, this will throw error
 **{x,y} = z;**

// to destructure this object we need to wrap this destructuring assignment in to parenthesis like this 
({x,y} = z);
console.log(x,y);//output : x = 10  y = 50

Vnořené objekty

Řekněme, že chceme vytvořit dvě proměnné open and close a ty by měly obsahovat otevírací a zavírací hodiny pro pátek. Jak víme, máme objekt otevírací hodiny, který je uvnitř objektu restaurace, pak v tomto objektu máme další objekty. Takže pátek je objekt uvnitř objektu otevírací hodiny.

//lets say we want retrieve friday 
const {restaurantName,openingHours } = restaurant;
const{fri} = openingHours;
console.log(fri); 
// output : {
       open:11,
       close:23,
    }  

Ve skutečnosti chceme dvě proměnné, jednu nazvanou open a druhou nazvanou close, abychom to udělali, musíme dále destrukovat

 const{fri : {open,close} } = openingHours;
console.log(open,close); 
// output : 11 23

Mohli bychom to samozřejmě vzít ještě dále a přiřadit jim různé proměnné, stejně jako jsme to udělali výše s dvojtečkou.

const{fri : {open: openTime , close: closeTime} } = openingHours;
console.log(openTime,closeTime); 
// output : 11 23

Chcete-li se dozvědět více o javaScript Destructuring

Uvidíme se! zůstaňte v bezpečí a udržujte kódování.......