Lekce 6 - Pole v JavaScriptu

JavaScript Základní konstrukce Pole v JavaScriptu

ONEbit hosting Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem. Vydávání, hosting a aktualizace umožňují jeho sponzoři.

V minulé lekci, Cykly v JavaScriptu, jsme se naučili používat cykly. V dnešním JavaScript tutoriálu si uvedeme datovou strukturu pole.

Představte si, že si chcete uložit nějaké údaje o více prvcích. Např chcete v paměti uchovávat 10 čísel, 30 pozic posledních souřadnic myši nebo jména 50ti uživatelů. Asi vám dojde, že v programování bude nějaká lepší cesta, než začít bušit proměnné uzivatel1, uzivatel2... až uzivatel50. Nehledě na to, že jich může být třeba 1000. A jak by se v tom potom hledalo? Brrr, takhle ne :)

Pokud potřebujeme uchovávat větší množství proměnných stejného typu, tento problém nám řeší pole. Můžeme si ho představit jako řadu přihrádek, de v každé máme uložený jeden prvek. Přihrádky jsou očíslované tzv. indexy, první má index 0. Můžeme si však prvky pole místo číslovaní i přímo pojmenovat, tedy je indexovat textovým řetězcem. V některých jazycích musíme při vytváření pole zadat jeho přesnou velikost a stejný datový typ (typ proměnné - číslo, řetězec, objekt...) pro všechny prvky. V JavaScriptu nemusíme specifikovat vůbec nic a můžeme si do pole nahrávat co chceme :) Pole úzce souvisí s cykly, protože se potom používají na manipulaci s prvky.

Vytvoření pole

Pole můžeme vytvořit pomocí objektu Array:

let a = new Array();
a[0] = 1;

K prvkům pole potom přistupujeme přes hranatou závorku, zde jsme na první index (tedy index 0) uložili číslo 1. Pomocí hranatých závorek můžeme pole rovněž vytvořit. Následující kód funguje úplně stejně jako ten výše, ale je kratší a proto tento zápis polí budeme preferovat:

let a = [];
a[0] = 1;

Naplnění pole cyklem

Naplníme si pole čísly od 1 do 10 pomocí for cyklu:

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

Abychom pole vypsali, můžeme za předchozí kód připsat:

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

Všimněte si, že pole má vlastnost length, kde je uložena jeho délka, tedy počet prvků.

Výsledek:

Pole v JavaScriptu
localhost

Foreach

Pro čtení všech prvků z pole můžeme použít zjednodušenou verzi cyklu pro práci s kolekcemi, známou jako foreach. Ten projede všechny prvky v poli a jeho délku si zjistí sám:

let prvky = [];
// Zde by se nacházel nějaký kód pro naplnění pole
// ...
for (prvek of prvky) {
        document.write(prvek);
}

V minulosti v JavaScriptu existoval ještě cyklus for...in. Ten byl ovšem zrušen, protože měl v proměnné místo prvku jeho index, což bylo matoucí.

Naplnění pole výčtem prvků

Pole samozřejmě můžeme naplnit ručně, nabízí se to například k uložení dnů v týdnu nebo jmen v kalendáři k vypsání svátku. Oboje si tu vysvětlíme.

Začněme vypsáním dne v týdnu, k tomu využijeme metody getDay(), která se volá na objektu Date a vrací den v týdnu. Bohužel jsou dny v americkém formátu začínajícím nedělí, to nám však tolik nevadí:

let dny = ["Neděle", "Pondělí", "Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"];
let d = new Date();
let den = d.getDay(); // vrátí číslo 0 - 6
document.write("Dnes je " + dny[den]);

Skript vytvořil pole textových řetězců (stringů) s názvy dnů, dále si zjistí číslo aktuálního dne. Potom je vypsán několikátý prvek v poli podle tohoto čísla dne.

Pole v JavaScriptu
localhost

Do pole můžeme prvky libovolně přidávat nebo je mazat:

let dny = ["Úterý", "Středa", "Čtvrtek", "Pátek", "Sobota"];
dny.push("Neděle"); // přidá nový prvek na konec pole
dny.unshift("Pondělí"); // přidá nový prvek na začátek pole
dny.splice(2,3); // smaže 3. a 4. prvek (indexy jsou od nuly)

Řazení prvků v poli

Prvky v poli lze jednoduše seřadit metodou sort(), bez předání dalších parametrů se seřadí podle abecedy (vzestupně):

let slova = ['Dálava', 'Blýskavice', 'Erb', 'Cílovníci', 'Akát'];
slova.sort(); // Změní slova na ["Akát", "Blýskavice", "Cílovníci", "Dálava", "Erb"]

Pokud máme v poli čísla, seřadí se bohužel jako textové řetězce, takže je např. 25 před 3. Chování řadící metody můžeme upravit předáním tzv. anonymní funkce (bude plně vysvětleno v příští lekci). Setřídění pole čísel by vypadalo takto:

let cisla = [5, 3, 1, 30, 25, 80];
cisla.sort(function(a, b) { return a - b }); // Změní cisla na [1, 3, 5, 25, 30, 80]

Pořadí prvků v poli můžeme otočit pomocí metody reverse():

dny.reverse(); // otočí pole tak, aby byly prvky pozpátku

Výpis svátků

Zkusíme si udělat ještě skript na vypsání toho, kdo má dnes svátek. Nejprve si musíme vytvořit pole se všemi jmény v roce. Bude to trochu složitější než minulý příklad, protože budeme potřebovat dvourozměrné pole, přesněji pole polí. Budeme mít pole měsíců a v každém prvku (tedy měsíci) bude další pole s dny, které bude obsahovat daná jména. Tu otrockou práci přepisování jmen do pole jsem za vás udělal :) Pojďme tedy programovat:

// Tento skript pochází z webu itnetwork.cz
// Smí být libovolně používán i modifikován, ale nesmí z něj být umazán tento text

// vytvoříme si prázdné pole měsíců
let mesice = [];
// postupně přidáme měsíce se svátky, prvky pole tedy bude další pole
// leden
mesice.push(["Nový rok, Den obnovy samostatného českého státu", "Karina", "Radmila", "Diana", "Dalimil", "Tři králové", "Vilma", "Čestmír", "Vladan", "Břetislav", "Bohdana", "Pravoslav", "Edita", "Radovan", "Alice", "Ctirad", "Drahoslav", "Vladislav", "Doubravka", "Ilona", "Běla", "Slavomír", "Zdeněk", "Milena", "Miloš", "Zora", "Ingrid", "Otýlie", "Zdislava", "Robin", "Marika"]);
// únor
mesice.push(["Hynek", "Nela", "Blažej", "Jarmila", "Dobromila", "Vanda", "Veronika", "Milada", "Apolena", "Mojmír", "Božena", "Slavěna", "Věnceslav", "Valentýn", "Jiřina", "Ljuba", "Miloslava", "Gizela", "Patrik", "Oldřich", "Lenka", "Petr", "Svatopluk", "Matěj", "Liliana", "Dorota", "Alexandr", "Lumír", "Horymír"]);
// březen
mesice.push(["Bedřich", "Anežka", "Kamil", "Stela", "Kazimír", "Miroslav", "Tomáš", "Gabriela", "Františka", "Viktorie", "Anděla", "Řehoř", "Růžena", "Rút, Matylda", "Ida", "Elena, Herbert", "Vlastimil", "Eduard", "Josef", "Světlana", "Radek", "Leona", "Ivona", "Gabriel", "Marián", "Emanuel", "Dita", "Soňa", "Taťána", "Arnošt", "Kvido"]);
// duben
mesice.push(["Hugo", "Erika", "Richard", "Ivana", "Miroslava", "Vendula", "Heřman, Hermína", "Ema", "Dušan", "Darja", "Izabela", "Julius", "Aleš", "Vincenc", "Anastázie", "Irena", "Rudolf", "Valérie", "Rostislav", "Marcela", "Alexandra", "Evženie", "Vojtěch", "Jiří", "2Marek", "Oto", "Jaroslav", "Vlastislav", "Robert", "Blahoslav"]);
// květen
mesice.push(["Svátek práce", "Zikmund", "Alexej", "Květoslav", "Klaudie", "Radoslav", "Stanislav", "Den vítězství", "Ctibor", "Blažena", "Svatava", "Pankrác", "Servác", "Bonifác", "Žofie", "Přemysl", "Aneta", "Nataša", "Ivo", "Zbyšek", "Monika", "Emil", "Vladimír", "Jana", "Viola", "Filip", "Valdemar", "Vilém", "Maxmilián", "Ferdinand", "Kamila"]);
// červen
mesice.push(["Laura", "Jarmil", "Tamara", "Dalibor", "Dobroslav", "Norbert", "Iveta, Slavoj", "Medard", "Stanislava", "Gita", "Bruno", "Antonie", "Antonín", "Roland", "Vít", "Zbyněk", "Adolf", "Milan", "Leoš", "Květa", "Alois", "Pavla", "Zdeňka", "Jan", "Ivan", "Adriana", "Ladislav", "Lubomír", "Petr a Pavel", "Šárka"]);
// červenec
mesice.push(["Jaroslava", "Patricie", "Radomír", "Prokop", "Cyril, Metoděj", "Den upálení mistra Jana Husa", "Bohuslava", "Nora", "Drahoslava", "Libuše, Amálie", "Olga", "Bořek", "Markéta", "Karolína", "Jindřich", "Luboš", "Martina", "Drahomíra", "Čeněk", "Ilja", "Vítězslav", "Magdaléna", "Libor", "Kristýna", "Jakub", "Anna", "Věroslav", "Viktor", "Marta", "Bořivoj", "Ignác"]);
// srpen
mesice.push(["Oskar", "Gustav", "Miluše", "Dominik", "Kristián", "Oldřiška", "Lada", "Soběslav", "Roman", "Vavřinec", "Zuzana", "Klára", "Alena", "Alan", "Hana", "Jáchym", "Petra", "Helena", "Ludvík", "Bernard", "Johana", "Bohuslav", "Sandra", "Bartoloměj", "Radim", "Luděk", "Otakar", "Augustýn", "Evelína", "Vladěna", "Pavlína"]);
// září
mesice.push(["Linda, Samuel", "Adéla", "Bronislav", "Jindřiška", "Boris", "Boleslav", "Regína", "Mariana", "Daniela", "Irma", "Denisa", "Marie", "Lubor", "Radka", "Jolana", "Ludmila", "Naděžda", "Kryštof", "Zita", "Oleg", "Matouš", "Darina", "Berta", "Jaromír", "Zlata", "Andrea", "Jonáš", "Václav, Den české státnosti", "Michal", "Jeroným"]);
// říjen
mesice.push(["Igor", "Olivie, Oliver", "Bohumil", "František", "Eliška", "Hanuš", "Justýna", "Věra", "Štefan, Sára", "Marina", "Andrej", "Marcel", "Renáta", "Agáta", "Tereza", "Havel", "Hedvika", "Lukáš", "Michaela", "Vendelín", "Brigita", "Sabina", "Teodor", "Nina", "Beáta", "Erik", "Šarlota, Zoe", "Den vzniku samostatného československého státu", "Silvie", "Tadeáš", "Štěpánka"]);
// listopad
mesice.push(["Felix", "Památka zesnulých (dušičky)", "Hubert", "Karel", "Miriam", "Liběna", "Saskie", "Bohumír", "Bohdan", "Evžen", "Martin", "Benedikt", "Tibor", "Sáva", "Leopold", "Otmar", "Mahulena, Den boje za svobodu a demokracii", "Romana", "Alžběta", "Nikola", "Albert", "Cecílie", "Klement", "Emílie", "Kateřina", "Artur", "Xenie", "René", "Zina", "Ondřej"]);
// prosinec
mesice.push(["Iva", "Blanka", "Svatoslav", "Barbora", "Jitka", "Mikuláš", "Benjamín", "Květoslava", "Vratislav", "Julie", "Dana", "Simona", "Lucie", "Lýdie", "Radana", "Albína", "Daniel", "Miloslav", "Ester", "Dagmar", "Natálie", "Šimon", "Vlasta", "Adam, Eva, Štědrý den", "1. svátek vánoční,", "Štěpán, 2. svátek vánoční", "Žaneta", "Bohumila", "Judita", "David", "Silvestr"]);

// nyní přestoupíme k samotnému výpisu
let d = new Date();
let den = d.getDate()-1;
let mesic = d.getMonth();
document.write("Dnes má svátek " + mesice[mesic][den]);

Výsledek:

Pole v JavaScriptu
localhost

Tak a to byl konec naší práce s datem a časem. V příští lekci, Funkce v JavaScriptu, se budeme věnovat funkcím, bez kterých se v JavaScriptu neobejdeme.


 

Stáhnout

Staženo 190x (4.46 kB)
Aplikace je včetně zdrojových kódů v jazyce JavaScript

 

 

Článek pro vás napsal David Čápka
Avatar
Jak se ti líbí článek?
26 hlasů
Autor pracuje jako softwarový architekt a pedagog na projektu ITnetwork.cz (a jeho zahraničních verzích). Velmi si váží svobody podnikání v naší zemi a věří, že když se člověk neštítí práce, tak dokáže úplně cokoli.
Unicorn College Autor sítě se informační technologie naučil na Unicorn College - prestižní soukromé vysoké škole IT a ekonomie.
Miniatura
Předchozí článek
Cykly v JavaScriptu
Miniatura
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Miniatura
Následující článek
Cvičení k 6. lekci JavaScriptu
Aktivity (11)

 

 

Komentáře
Zobrazit starší komentáře (42)

Avatar
Jan Bezdíček
Redaktor
Avatar
Jan Bezdíček:14.7.2016 18:06

Protoze cervenec je v poli na 6. indexu (protoze pole je indexovane od 0) ... kdyby si pouzil jeste -1, tak ti to bude vypisovat svatky v cervnu

 
Odpovědět  +1 14.7.2016 18:06
Avatar
Libor Šimo (libcosenior):15.7.2016 5:57

Kazde pole zacina indexovat od nuly.
Funkcia pusch() prida hodnotu na dalsi index v poradi. Teda ak je pole prazdne, tak na pole[0].

Odpovědět  +1 15.7.2016 5:57
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Matyáš Hájek:1.4.2017 19:38

Ahoj, skvělý návod, jen tam máte menší chybu.
Můžeme si ho představit jako řadu přihrádek, de v každé máme uložený jeden prvek.
Máte napsané "de" a má tam být "kde", tedy alespoň myslím :)

Editováno 1.4.2017 19:39
 
Odpovědět 1.4.2017 19:38
Avatar
Ondřej Muller:18.7.2017 16:03

Co mám dělat když se mi čísla z pole při sčítání sčítají jako textové řetězce?

 
Odpovědět 18.7.2017 16:03
Avatar
Krebic
Člen
Avatar
Odpovídá na Ondřej Muller
Krebic:18.7.2017 19:12

Pokud máš ta čísla v uvozovkách, tak ty uvozovky smaž. :-)

 
Odpovědět 18.7.2017 19:12
Avatar
Marian Benčat
Redaktor
Avatar
Marian Benčat:18.7.2017 19:50

To není moc dobrý nápad naplňovat pole pomocí push pokud chci od 0 do 15. Ono je totiž pole v js poněkud retardovane (ostatně jako vše) a tudíž array.length na základě kterého se řídí push, nevrací počet prvku, ale velikost pole. Var a = []; a[1234]=7; a.length // 1235 push by byl na 1235 pozici a před tím jsou null.. Proto je rozhodně bezpečnější použít vždy index protože to pole může být parametr a může být takto dojebany :)

Editováno 18.7.2017 19:50
Odpovědět 18.7.2017 19:50
Totalitní admini..
Avatar
Odpovídá na Marian Benčat
Libor Šimo (libcosenior):18.7.2017 21:06

Sorry, ja som hlavne ceckar a tam by sa malo vsetko sledovat, pretoze kazda blbost sa ti vypomsti.

Odpovědět 18.7.2017 21:06
Aj tisícmíľová cesta musí začať jednoduchým krokom.
Avatar
Marian Benčat
Redaktor
Avatar
Odpovídá na Libor Šimo (libcosenior)
Marian Benčat:18.7.2017 23:21

Cecko má ale hlavu a patu.. Vše tam má rozumne a logické vysvětlení. To bohužel u JavaScriptu má minorita věci.

Odpovědět 18.7.2017 23:21
Totalitní admini..
Avatar
Jakub Hrubčo:3. ledna 17:10

Myslim, že v článku je drobná chybička. Metóda splice(2,3) zmaže 3. 4. a 5. prvok v poli (od pozície 2 zmaže 3 prvky).

 
Odpovědět 3. ledna 17:10
Avatar
Igor Šula
Člen
Avatar
Igor Šula:20. května 16:27

Mám dotaz na poslední ukázku v tomto článku, kde je dáno, že pole mesice je dvourozměrné? Na mě zápis působí jakoby se jednalo pouze o vektor, do kterého jen přidáváme prvky, dvourozměrnost pole snad zajistí funkce push? Jak je to možné? Díky.

 
Odpovědět 20. května 16:27
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 10 zpráv z 52. Zobrazit vše