Úloha 2 – Iterace pole objektů třemi typy cyklů

Úvod do úlohy

Pole objektů patří k základním strukturám, se kterými se v JavaScriptu setkáte na každém kroku. Umožňují uchovávat více záznamů stejného typu – například seznam studentů, produktů nebo objednávek – a zároveň ke každému objektu přistupovat podle potřeby. Klíčovou dovedností je naučit se pole projít a z každého objektu vyčíst jeho vlastnosti. K tomu můžeme využít různé způsoby: klasický for cyklus, moderní for…of a také velmi oblíbenou metodu forEach().

Teorie a principy

• Nejprve vždy získáme prvek pole podle indexu – například pole[0]. Tento prvek je objekt, a proto k jeho vlastnostem přistupujeme standardně: pole[0].name, pole[0].age.

• Procházení pole můžeme provést několika způsoby:

  • for – klasický cyklus s indexem.

  • for…of – zjednodušený cyklus, který rovnou pracuje s prvky pole.

  • forEach() – metoda pole, která spustí funkci pro každý prvek. Je čitelná a přehledná, ale neumí cyklus přerušit.

Praktické příklady kódu

Typické chyby / záludnosti

• Přístup k poli jako k objektu: studenti.name → špatně. Správně studenti[0].name.

• Záměna cyklů: for…in je určen pro vlastnosti objektu, nikoli pro prvky pole. Správně použít for, for…of nebo forEach().

• Zapomenutí závorek u metody: studenti.forEach je jen odkaz na funkci, zatímco studenti.forEach(...) ji opravdu spustí.

• Očekávání, že forEach lze přerušit – nefunguje break, proto pokud potřebujeme ukončit cyklus dříve, použijeme klasický for.

Shrnutí

• V poli objektů nejprve získáme prvek podle indexu, a až pak jeho vlastnost.

• Pro procházení pole můžeme využít:

  • for s indexem (největší kontrola),

  • for…of (jednodušší a čitelnější),

  • forEach() (pohodlná metoda pole, vhodná pro úplné projití).

• Dávej pozor na rozdíly mezi přístupem k polím a objektům a na správné použití notace.

Úloha

Zadání (kontext úlohy):

Vytváříš jednoduchý systém pro e-shop, kde je potřeba zobrazit seznam objednávek zákazníků. Každá objednávka má číslo, název produktu a cenu. Tvým úkolem je pole objednávek projít a vypsat je na stránku různými způsoby.

Cíl úlohy:

Procvičit si práci s polem objektů a jeho procházení pomocí for, for…of a forEach().

Vstupní podmínky:

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

• Do stránky se vypisuje pomocí document.write().

Požadovaný výstup:

1. Vytvoř pole objednavky, které bude obsahovat alespoň 3 objekty se stejnými vlastnostmi:

   • cislo (např. "ORD001"),

   • produkt (např. "Klávesnice"),

   • cena (např. 899).

2. Pomocí klasického for cyklu vypiš všechny objednávky ve formátu:
   Objednávka ORD001 – Klávesnice (899 Kč).

3. Pomocí for…of cyklu vypiš jen číslo objednávky a cenu.

4. Pomocí forEach() vypiš všechny objednávky s pořadovým číslem (1., 2., 3.…).

Doplňující pokyny:

• Dbej na konzistenci vlastností (cislo, produkt, cena).

• Nezaměň for…of za for…in (ten je určen pro objekty).

• Pro čitelnost odděluj části výstupu <hr>.

Řešení úlohy

Co je zde splněno

• Pole objednavky obsahuje 3 objekty se stejnými vlastnostmi.

• Výpis pomocí klasického for – celé údaje.

• Výpis pomocí for...of – číslo a cena.

• Výpis pomocí forEach() – s číslováním.

• Části výstupu odděleny <hr>.