9. diel - Poľa v JavaScripte

V predchádzajúcom cvičení, Riešené úlohy k 7.-8. lekciu JavaScriptu, sme si precvičili získané skúsenosti z predchádzajúcich lekcií.

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é user1, user2 až user50. 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 numbers = new Array();

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

let numbers = [];

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 numbers = [];
numbers[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 basket = []; // Our basket is empty
basket[0] = "apple"; // first, we will add an apple into the basket (first index)
basket[1] = "banana"; // then we will add a banana into the second index

document.write(basket[0] + "<br>" + basket[1]);  // and now we will write out the contents of the basket

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 basket = []. 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 numbers = [];
for (let i = 0; i < 10; i++) {
    numbers[i] = i + 1;
}

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

for (let i = 0; i < numbers.length; i++) {
    document.write(numbers[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 nameOfVariable of nameOfArray) {
    // commands
}

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 numbers = [];
for (let i = 0; i < 10; i++) {
    numbers [i] = i + 1;
}

for (let number of numbers) {
    document.write(number + " ");
}

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

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 days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];

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 days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
let today = new Date();
let dayOfTheWeek = today.getDay();
document.write("Today is " + days[dayOfTheWeek]);

Skript vytvorí pole textových reťazcov s názvami dní. Potom zistí aktuálny dátum a uloží ich do premennej today. Metóda getDay() vráti číslo dňa v týždni pre aktuálny dátum. To uložíme do premennej `dayOfTheWeek `, 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 days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
days.push("Saturday"); // inserts Saturday at the end of the array
days.unshift("Sunday"); // inserts Sunday at the start of the array

for (let day of days) {
    document.write(day + " ");
}

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 days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
days.pop(); // removes Saturday from the array
days.shift(); // removes Sunday from the array

for (let day of days) {
    document.write(day + " ");
}

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 fruit = ["apple", "pear", "banana", "raspberry", "strawberry", "apricot", "kiwi", "plum"];
fruit.splice(2, 3);
for (let currentFruit of fruit) {
    document.write(currentFruit + " ");
}
document.write("<br >");
fruit.splice(3);
for (let currentFruit of fruit) {
    document.write(currentFruit + " ");
}

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:

fruit.splice(2, 0, "raspberry"); // output: ["apple", "pear", "raspberry", "apricot"]

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

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

fruit.splice(0, 1, "banana"); // output: ["banana", "pear", "raspberry", "apricot"]

Výstup:

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

fruit.splice(0, 2, "strawberry", "apple"); // output: ["strawberry", "apple", "raspberry", "apricot"]

Výstup v prehliadači:

V nasledujúcej lekcii, Poľa v JavaScripte druhýkrát - Radenie prvkov a 2D poľa , si ukážeme, ako zoradiť prvky v poli a ako pracovať s dvojrozmerným poľom.

 

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š.