Web-Dev-For-Beginners/translations/sk/2-js-basics/4-arrays-loops

Základy JavaScriptu: Polia a cykly

Sketchnote od Tomomi Imura

Kvíz pred prednáškou

Kvíz pred prednáškou

Táto lekcia pokrýva základy JavaScriptu, jazyka, ktorý poskytuje interaktivitu na webe. V tejto lekcii sa naučíte o poliach a cykloch, ktoré sa používajú na manipuláciu s dátami.

🎥 Kliknite na obrázky vyššie pre videá o poliach a cykloch.

Túto lekciu si môžete prejsť na Microsoft Learn!

Polia

Práca s dátami je bežnou úlohou v akomkoľvek jazyku, a je oveľa jednoduchšia, keď sú dáta organizované v štruktúrovanom formáte, ako sú polia. V poliach sú dáta uložené v štruktúre podobnej zoznamu. Jednou z hlavných výhod polí je, že môžete uložiť rôzne typy dát do jedného poľa.

✅ Polia sú všade okolo nás! Dokážete si predstaviť reálny príklad poľa, ako napríklad pole solárnych panelov?

Syntax pre pole je pár hranatých zátvoriek.

let myArray = [];

Toto je prázdne pole, ale polia môžu byť deklarované už naplnené dátami. Viaceré hodnoty v poli sú oddelené čiarkou.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Hodnotám v poli je priradená jedinečná hodnota nazývaná index, celé číslo, ktoré je priradené na základe jeho vzdialenosti od začiatku poľa. V príklade vyššie má reťazcová hodnota "Chocolate" index 0 a index "Rocky Road" je 4. Použite index s hranatými zátvorkami na získanie, zmenu alebo vloženie hodnôt poľa.

✅ Prekvapuje vás, že polia začínajú na indexe nula? V niektorých programovacích jazykoch indexy začínajú na 1. Je za tým zaujímavá história, ktorú si môžete prečítať na Wikipédii.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Index môžete využiť na zmenu hodnoty, napríklad takto:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

A môžete vložiť novú hodnotu na daný index takto:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Bežnejší spôsob pridávania hodnôt do poľa je pomocou operátorov poľa, ako je array.push()

Ak chcete zistiť, koľko položiek je v poli, použite vlastnosť length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Vyskúšajte si to sami! Použite konzolu vášho prehliadača na vytvorenie a manipuláciu s vlastným poľom.

Cykly

Cykly nám umožňujú vykonávať opakujúce sa alebo iteratívne úlohy, a môžu ušetriť veľa času a kódu. Každá iterácia môže byť odlišná vo svojich premenných, hodnotách a podmienkach. V JavaScripte existujú rôzne typy cyklov, ktoré majú malé rozdiely, ale v podstate robia to isté: prechádzajú dáta.

For cyklus

Cyklus for vyžaduje 3 časti na iteráciu:

• counter Premenná, ktorá je zvyčajne inicializovaná číslom, ktoré počíta počet iterácií
• condition Výraz, ktorý používa porovnávacie operátory na zastavenie cyklu, keď je false
• iteration-expression Spúšťa sa na konci každej iterácie, zvyčajne sa používa na zmenu hodnoty počítadla

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Spustite tento kód v konzole prehliadača. Čo sa stane, keď urobíte malé zmeny v počítadle, podmienke alebo výraze iterácie? Dokážete ho spustiť opačne, vytvoriť odpočítavanie?

While cyklus

Na rozdiel od syntaxe cyklu for, cykly while vyžadujú iba podmienku, ktorá zastaví cyklus, keď sa podmienka stane false. Podmienky v cykloch zvyčajne závisia od iných hodnôt, ako sú počítadlá, a musia byť spravované počas cyklu. Počiatočné hodnoty počítadiel musia byť vytvorené mimo cyklu a akékoľvek výrazy na splnenie podmienky, vrátane zmeny počítadla, musia byť udržiavané vo vnútri cyklu.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Prečo by ste si vybrali for cyklus namiesto while cyklu? 17 tisíc divákov malo rovnakú otázku na StackOverflow, a niektoré názory môžu byť pre vás zaujímavé.

Cykly a polia

Polia sa často používajú s cyklami, pretože väčšina podmienok vyžaduje dĺžku poľa na zastavenie cyklu, a index môže byť tiež hodnotou počítadla.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Experimentujte s prechádzaním poľa, ktoré si sami vytvoríte, v konzole vášho prehliadača.

---

🚀 Výzva

Existujú aj iné spôsoby prechádzania polí než for a while cykly. Existujú forEach, for-of a map. Prepíšte svoj cyklus poľa pomocou jednej z týchto techník.

Kvíz po prednáške

Kvíz po prednáške

Prehľad a samostatné štúdium

Polia v JavaScripte majú mnoho metód, ktoré sú mimoriadne užitočné na manipuláciu s dátami. Prečítajte si o týchto metódach a vyskúšajte niektoré z nich (ako push, pop, slice a splice) na poli, ktoré si sami vytvoríte.

Zadanie

Prejdite pole pomocou cyklu

---

Upozornenie:
Tento dokument bol preložený pomocou služby na automatický preklad Co-op Translator. Aj keď sa snažíme o presnosť, upozorňujeme, že automatické preklady môžu obsahovať chyby alebo nepresnosti. Pôvodný dokument v jeho pôvodnom jazyku by mal byť považovaný za záväzný zdroj. Pre kritické informácie sa odporúča profesionálny ľudský preklad. Nezodpovedáme za akékoľvek nedorozumenia alebo nesprávne interpretácie vyplývajúce z použitia tohto prekladu.