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.
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.
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š.
Stiahnuť
Stiahnutím nasledujúceho súboru súhlasíš s licenčnými podmienkami
Stiahnuté 821x (3.62 kB)
Aplikácia je vrátane zdrojových kódov v jazyku JavaScript