Úloha 4 – Iterace objektu a výpis vlastností

Úvod do úlohy

Když už umíme objekty vytvářet a přistupovat k jejich jednotlivým vlastnostem, dalším krokem je naučit se s nimi pracovat hromadně. V reálných aplikacích často potřebujeme projít všechny vlastnosti objektu, například abychom vypsali všechny údaje uživatele, sečetli hodnoty nebo je převedli do jiného formátu. Proto je důležité znát různé způsoby, jak iterovat přes klíče a hodnoty objektu – od klasického cyklu for…in až po moderní metody Object.keys(), Object.values() a Object.entries().

Teorie a principy

• for…in

  • Tradiční cyklus procházející všechny výčtové vlastnosti objektu.

  • U každé iterace dostaneme klíč.

• Object.keys(objekt)

  • Vrací pole se všemi klíči objektu.

  • Hodí se, pokud chceme například počítat délku (.length) nebo použít metody polí (forEach, map, …).

• Object.values(objekt)

  • Vrací pole hodnot vlastností.

• Object.entries(objekt)

  • Vrací pole dvojic [klíč, hodnota].

  • Je velmi praktické pro procházení i transformace dat.

Praktické příklady kódu

Typické chyby / záludnosti

• Záměna for…in a for…of – for…in je určen pro klíče objektu, zatímco for…of funguje pro iterovatelné kolekce (např. pole).

• Přístup k hodnotám v for…in – v těle cyklu získáme pouze klíč, hodnotu musíme získat jako objekt[klic].

• Očekávání pořadí – objekty v JavaScriptu negarantují pevné pořadí vlastností (i když v praxi je často stabilní). Pokud záleží na pořadí, je lepší převést vlastnosti na pole.

• Neporozumění rozdílu mezi klíči a hodnotami – Object.keys() a Object.values() vrací různé typy informací, studenti si je často pletou.

Shrnutí

• Pro průchod vlastnostmi objektu máme více variant: for…in, Object.keys(), Object.values(), Object.entries().

• for…in poskytuje klíče, ale hodnoty musíme získat přes objekt[klic].

• Object.keys() a Object.values() vrací pole, které můžeme dále zpracovávat metodami polí.

• Object.entries() je praktické pro práci s dvojicemi klíč–hodnota.

• Dávejte si pozor na záměnu s cyklem for…of a na očekávání pevného pořadí vlastností.

Úloha

Zadání (kontext úlohy):

Máš k dispozici objekt, který obsahuje několik údajů o jedné knize. Tvým úkolem je vypsat všechny jeho vlastnosti a vyzkoušet si různé způsoby, jak k nim přistupovat – od klasického cyklu až po moderní metody, které vracejí pole.

Cíl úlohy:

Procvičit si práci s cyklem for…in a metodami Object.keys(), Object.values() a Object.entries().

Vstupní podmínky:

• Student pracuje se soubory index.html a script.js.

• Do stránky bude vypisovat pomocí document.write().

Požadovaný výstup:

1. Vytvoř objekt kniha se třemi vlastnostmi (např. název, autor, rok).

2. Pomocí for…in vypiš všechny klíče a jejich hodnoty do stránky.

3. Pomocí Object.keys() vypiš seznam všech klíčů jako řetězec oddělený čárkou.

4. Pomocí Object.values() vypiš seznam všech hodnot.

5. Pomocí Object.entries() projdi dvojice klíč–hodnota a vypiš je v podobě klíč = hodnota.

Doplňující pokyny:

• Pamatuj, že for…in dává jen klíče – hodnoty získáš přes objekt[klic].

• Při použití Object.entries() můžeš projít pole dvojic pomocí forEach.

• Výstupy odděluj <br> pro lepší čitelnost.

Řešení úlohy

Co je zde splněno

• Vytvořen objekt kniha se třemi vlastnostmi.

• Použit cyklus for…in pro výpis klíčů a hodnot.

• Použití Object.keys() → výpis seznamu klíčů.

• Použití Object.values() → výpis seznamu hodnot.

• Použití Object.entries() → výpis dvojic klíč = hodnota.