9. diel - Poľa v JavaScripte

V dnešnom tutoriále základov JavaScriptu si predstavíme dátovú štruktúru poľa a vyskúšame si, čo všetko vie.

Poľa v JavaScripte

Predstavme si, že si chceme uložiť nejaké údaje o viacerých prvkoch. Napríklad chceme v pamäti uchovávať desať čísel, políčka šachovnice alebo mená registrovaných užívateľov. Asi nám dôjde, že v programovaní bude nejaká lepšia cesta, než začať vytvárať premenné uzivatel1, uzivatel2 až uzivatel50. Nehľadiac na to, že ich môže byť treba 1000!

Tento problém nám rieši pole, v ktorom je možné uchovávať väčšie množstvo premenných. Môžeme si ho predstaviť ako množstvo priehradiek, v každej potom máme uložený jeden prvok. Priehradky sú očíslované tzv. indexy, prvá má index 0:

(Na obrázku je vidieť pole ôsmich čísel.)

Veľkosť poľa je možné meniť za behu programu a do rovnakého poľa je možné ukladať rôzne dátové typy. V niektorých jazykoch musíme pri vytváraní poľa zadať jeho presnú veľkosť a dátový typ premenných, ktoré chceme ukladať. Dátový typ potom musí byť rovnaký pre všetky prvky v poli. V JavaScripte nemusíme špecifikovať vôbec nič.

Výhody poľa

Pole je jednoduchou dátovou štruktúrou. Jeho prvky sú v pamäti jednoducho uložené za sebou, preto sa k nim pomocou indexov rýchlo pristupuje. Veľa vstavaných funkcií a metód v JavaScripte pracuje s poľami alebo poľa vracia. Je to kľúčová štruktúra.

Pole úzko súvisí s cyklami, pretože sa potom používajú na manipuláciu s prvkami.

Práca s poľom

Teraz si už ukážeme, ako s poľom pracovať. V JavaScripte môžeme deklarovať pole a zároveň ho inicializovať dátami alebo ho môžeme deklarovať ako prázdne a neskôr ho dátami naplniť.

Vytvorenie poľa

Pole vytvoríme pomocou objektu Array a kľúčového slova new, ku ktorému sa podrobne dostaneme až v kurze OOP. Uvedieme len, že pole je referenčné (môžeme chápať ako zložitejšie) dátový typ:

let cisla = new Array();

Nasledujúci kód funguje úplne rovnako ako ten vyššie, ale je kratší. Preto tento zápis polí budeme preferovať:

let cisla = [];

Hranaté zátvorky [] na slovenskej klávesnici zapíšeme pomocou pravého ALT a znakov F a G:

Prístup k prvkom poľa

K prvkom poľa potom pristupujeme aj cez hranatú zátvorku. Poďme na prvý index (teda index 0) uložiť číslo 1:

let cisla = [];
cisla[0] = 1;

Teraz vytvoríme pole predstavujúce nákupný košík a vložíme doň nejaké ovocie. Následne vložené položky vypíšeme:

let kosik = []; // máme prázdny košík
kosik[0] = "jablko"; // ako prvé do košíka vložíme jablko
kosik[1] = "banán"; // na druhé miesto pridáme banán

document.write(kosik[0] + "<br>" + kosik[1]);  // obsah košíka potom vypíšeme

V prehliadači sa nám po spustení zobrazí tento výstup:

Na deklaráciu poľa by sme rovnako dobre mohli použiť konštantu ako const kosik = []. Pole v konštante by sme následne mohli ľubovoľne upravovať. Iba by do danej konštanty nešla vložiť iná hodnota, napr. iné pole.

Naplnenie poľa cyklom

Ak chceme naplniť pole číslami od 1 do 10, nebudeme to robiť ručne, ale využijeme cyklus for:

let cisla = [];
for (let i = 0; i < 10; i++) {
    cisla[i] = i + 1;
}

Aby sme pole vypísali, stačí za predchádzajúci kód pripísať:

for (let i = 0; i < cisla.length; i++) {
    document.write(cisla[i] + " ");
}

Vo výpise sme použili vlastnosť length, v ktorej je uložená dĺžka poľa, teda počet jeho prvkov.

Cyklus for...of

Na čítanie prvkov poľa môžeme použiť zjednodušenú verziu cyklu pre prácu s kolekciami, známu niekedy ako cyklus foreach. Ten prejde všetky prvky v poli, dĺžku poľa potom teda nemusíme zisťovať. Jeho syntax je nasledovná:

for (let nazevPromenne of nazevPole) {
    // príkazy
}

Cyklus prejde prvky v kolekcii (to je všeobecný názov pre štruktúry, ktoré obsahujú viac prvkov, u nás to bude pole) postupne od prvého do posledného.

V minulosti sa na prehliadanie polí v JavaScripte používal aj cyklus for...in. Ten však do premennej neukladá prvok, ale index, čo je na tento účel mätúce.

Prepíšme teda náš doterajší program a na výpis použijeme cyklus for...of. Tento cyklus nemá riadiacu premennú a nie je teda vhodný na vytvorenie nášho poľa. Použijeme ho preto len na výpis:

let cisla = [];
for (let i = 0; i < 10; i++) {
    cisla[i] = i + 1;
}

for (let cislo of cisla) {
    document.write(cislo + " ");
}

Aktuálne získaný prvok máme v každej iterácii cyklu uložený v premennej cislo.

Výsledok v prehliadači:

Naplnenie poľa výpočtom prvkov

Pole samozrejme môžeme naplniť ručne aj bez toho, aby sme dosadzovali jeho položky postupne do každého indexu. Jednoducho ich v hranatých zátvorkách uvedieme všetky a oddelíme ich čiarkou. Textové reťazce zapisujeme samozrejme s úvodzovkami:

let dny = ["nedeľa", "pondelok", "utorok", "streda", "štvrtok", "piatok", "sobota"];

Rozšírme si ešte tento príklad. Zistíme aktuálny dátum a pomocou metódy getDay() získame číslo od 0 do 6, ktoré zodpovedá danému dňu v týždni. Vrátená hodnota vychádza z americkom vnímaní týždňa a začína nedeľou. Nedeľu teda vložíme do poľa ako prvú (na index 0) a posledným dňom v poli bude sobota:

let dny = ["nedeľa", "pondelok", "utorok", "streda", "štvrtok", "piatok", "sobota"];
let dnes = new Date();
let denTydne = dnes.getDay();
document.write("Dnes je " + dny[denTydne]);

Skript vytvorí pole textových reťazcov s názvami dní. Potom zistí aktuálny dátum a uloží ich do premennej dnes. Metóda getDay() vráti číslo dňa v týždni pre aktuálny dátum. To uložíme do premennej denTydne, ktorú odovzdáme ako index nášmu poľu a získame tak zodpovedajúci názov dňa z poľa:

Práca s prvkami v poli

Poďme si teraz popísať niektoré metódy, ktoré pri práci s poľami využijeme.

Pridávanie prvkov do poľa

Pre pridanie nového prvku do poľa máme k dispozícii dve metódy:

• Metóda push() vloží novú položku na koniec poľa.
• Metóda unshift() vloží novú položku na začiatok poľa.

Do poľa so všednými dňami pridáme na začiatok nedeľu a na koniec sobotu takto:

let dny = ["pondelok", "utorok", "streda", "štvrtok", "piatok"];
dny.push("sobota"); // sobotu vloží na koniec poľa
dny.unshift("nedeľa"); // nedeľu vloží na začiatok poľa

for (let den of dny) {
    document.write(den + " ");
}

Výstup v prehliadači:

Všimnite si, že na rozdiel od metód na reťazcoch, ktoré vracali upravený reťazec, metódy na poli dané pole rovno menia.

Odoberanie prvkov z poľa

Na odobratie prvku z poľa využijeme metódy pop() a shift():

• Metóda pop() odoberie položku, ktorá je na konci poľa.
• metódy shift() zmaže prvý prvok v poli.

Ukážme si ich použitie opäť na poli s názvami dní:

let dny = ["nedeľa", "pondelok", "utorok", "streda", "štvrtok", "piatok", "sobota"];
dny.pop(); // odstráni sa sobota
dny.shift(); // odstráni sa nedeľa

for (let den of dny) {
    document.write(den + " ");
}

Výstup v prehliadači:

Metóda splice()

Pokiaľ chceme vložiť alebo odstrániť prvok, ktorý nie je ani na začiatku ani na konci poľa, použijeme na modifikáciu poľa metódu splice().

Ako prvý parameter berie index prvku, od ktorého bude pole upravené. Druhý parameter je voliteľný a špecifikujeme v ňom, koľko prvkov má byť modifikovaných. Pokiaľ ho neuvedieme, vykoná sa úprava až do konca poľa. Nasledujú ďalšie voliteľné parametre, v ktorých uvádzame položky, ktoré chceme do poľa pridať alebo nimi nahradiť existujúce prvky.

Ukážme si najskôr mazanie prvkov:

let ovoce = ["jablko", "hruška", "banán", "malina", "jahoda", "marhuľa", "kiwi", "slivka"];
ovoce.splice(2, 3);
for (let aktualniOvoce of ovoce) {
    document.write(aktualniOvoce + " ");
}
document.write("<br >");
ovoce.splice(3);
for (let aktualniOvoce of ovoce) {
    document.write(aktualniOvoce + " ");
}

Najprv sme zmazali tri prvky počnúc indexom 2. Z poľa nám teda zmizol banán, malina a jahoda. Potom sme znova zavolali metódu splice() s jedným parametrom, čím sme zmazali prvky s indexom 3 a vyššie.

Výstup v prehliadači:

Metóda splice() dokáže tiež pridávať nové prvky. Prvý parameter určí pozíciu vkladaného prvku, do druhého zadáme 0 a ako tretí doplníme prvok, ktorý chceme vložiť. Do ukážky vyššie teda doplníme ďalší riadok a položky poľa znovu vypíšeme:

ovoce.splice(2, 0, "malina"); // výstup: ["jablko", "hruška", "malina", "marhuľa"]

V prehliadači sa nám vypíše:

Ak chceme prvok nahradiť, zadáme do druhého parametra 1:

ovoce.splice(0, 1, "banán"); // výstup: ["banán", "hruška", "malina", "marhuľa"]

Výstup:

Nakoniec budeme chcieť nahradiť banán aj hrušku. Do ukážky pridáme posledný riadok:

ovoce.splice(0, 2, "jahoda", "jablko"); // výstup: ["jahoda", "jablko", "malina", "marhuľa"]

Výstup v prehliadači:

 

Mal si s čímkoľvek problém? Stiahni si vzorovú aplikáciu nižšie a porovnaj ju so svojím projektom, chybu tak ľahko nájdeš.