Pouze tento týden sleva až 80 % na e-learning týkající se Javy. A zároveň využij akce až 30 % zdarma při nákupu e-learningu - Více informací.
Hledáme koordinátorku kurzů a programátora, 100% home office, 100% flexibilní. Prozkoumej aktuální pozice
Java week

Lekce 6 - Pole v JavaScriptu

V předešlém cvičení, Řešené úlohy k 5. lekci JavaScriptu, jsme si procvičili nabyté zkušenosti z předchozích lekcí.

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, kde 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.

 Hranaté závorky [] můžeme na české klávesnici zapsat pomocí pravého ALT a znaků F a G:

Větší a menší

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;
}
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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

for...of

Pro čtení všech prvků z pole můžeme použít zjednodušenou verzi cyklu pro práci s kolekcemi, for...of, známou někdy 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 (let prvek of prvky) {
    document.write(prvek);
}

V minulosti se pro procházení polí v JavaScriptu používal i cyklus for...in. Ten ovšem do proměnné neukládá prvek, ale index, což je pro tento účel 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 prvky od 3. prvku dále (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ří", "Marek", "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 následujícím cvičení, Řešené úlohy k 6. lekci JavaScriptu, si procvičíme nabyté zkušenosti z předchozích lekcí.


 

Měl jsi s čímkoli problém? Stáhni si vzorovou aplikaci níže a porovnej ji se svým projektem, chybu tak snadno najdeš.

Stáhnout

Stažením následujícího souboru souhlasíš s licenčními podmínkami

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

 

Předchozí článek
Řešené úlohy k 5. lekci JavaScriptu
Všechny články v sekci
Základní konstrukce jazyka JavaScript
Přeskočit článek
(nedoporučujeme)
Řešené úlohy k 6. lekci JavaScriptu
Článek pro vás napsal David Čápka
Avatar
Uživatelské hodnocení:
80 hlasů
David je zakladatelem ITnetwork a programování se profesionálně věnuje 13 let. Má rád Nirvanu, sushi a svobodu podnikání.
Unicorn university David se informační technologie naučil na Unicorn University - prestižní soukromé vysoké škole IT a ekonomie.
Aktivity

 

 

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

Avatar
Patrik Pastor:10.3.2019 18:26

diky podivam se

 
Odpovědět
10.3.2019 18:26
Avatar
Velda
Člen
Avatar
Velda:25.4.2019 8:08

25. dubna, když má svátek Marek tak před jeho jménem je napsána 2

 
Odpovědět
25.4.2019 8:08
Avatar
Jakub Podskalský:7.8.2019 21:06

Díky za odkaz, opravdu zajímavé postřehy. :D Na JavaScript jsem přecházel po předchozích zkušenostech s Pythonem kvůli webu, kde se teda všechno děje "behind the scenes" a řeší toho spoustu za tebe, ale tu logiku opravdu má. V Javascriptu mi fakt nejde do hlavy, jak může být tak populární, když tu logiku právě postrádá na každém rohu. Např. sčítání čísel v řetězci opravdu přidá řetězce k sobě ("2"+"5" == "25"), ale když se náhodou pokusím řetězce mezi sebou odečíst/vynáso­bit/vydělit (což by mě nikdy ani nenapadlo), tak se zas chovají jako čísla? :D

 
Odpovědět
7.8.2019 21:06
Avatar
David Čápka
Tým ITnetwork
Avatar
David Čápka:19.2.2020 12:00

Díky, opraveno :)

Odpovědět
19.2.2020 12:00
Jsem moc rád, že jsi na síti, a přeji ti top IT kariéru, ať jako zaměstnanec nebo podnikatel. Máš na to! :)
Avatar
Lubor Pešek
Člen
Avatar
Lubor Pešek:5.3.2020 12:59

Mimochodem.... víte o té čuňárně, co v JavaScriptu jde?

let pole = new Number();
pole[0] = "text";
console.log(pole[0]);

Samozřejmě, že bych to v kódu určitě takhle nepsal a rozhodně to není zápis, který bych někde doporučoval.
Ale je to svinstvo, že tohle vrátí skutečně hodnotu Stringu, i když se vytvořil OBJEKT Numberu.

Možná chápu, že je to tím, že JavaScript bere jako objekt úplně všechno (objekt = objekt, proměnná a dokonce i funkce) a v JS se z objektu vytváří automaticky pole, pokud s tím takhle budeme pracovat. Pokud to tak je, tak by se to dalo pochopit (funkčně), ale smyslem OOP je přizpůsobit programování co nejvíce skutečnému světu.
A mít v poli textové řetězce, když jsem si předtím do této proměnné vytvořil nový objekt Number.... To mi přijde, jako kdybych si koupil nové dveře k domu a pak na nich pěstoval pažitku... Ano, jde to, ale pokud budeme takhle přemýšlet, tak se potom nedivme, že technologie kolem nás často nefunguje....
Fuj Fuj Fuj

Editováno 5.3.2020 13:00
Odpovědět
5.3.2020 12:59
Existují dva způsoby, jak vyřešit problém. Za prvé vyhoďte počítač z okna. Za druhé vyhoďte okna z počítače.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jindřich Máca
Člen IT Redactor Gang
Avatar
Odpovídá na Lubor Pešek
Jindřich Máca:6.3.2020 22:42

Tebe tohle udivuje u čísla? :-D

// Naprosto validní kód

function example() {
    console.log('Hello World!');
}

example();
example['Baf!'] = 'Lek!';
example();
console.log(example['Baf!']);
example();

Laugh hysterically in JavaScript... :-D

Editováno 6.3.2020 22:43
 
Odpovědět
6.3.2020 22:42
Avatar
Jiří Petráš:30.11.2020 15:34

To jsem byl zvědavý jak to dopadne se svátkama a čekal jsem že autor pro nás svátky sežene nějak snadno a místo toho čtu: "Tu otrockou práci přepisování jmen do pole jsem za vás udělal"
Pro začátečníky to je ukázka schopností javascriptu. Čekal bych, že půjdou jména nějak nakopírovat z nějakého seznamu na internetu třeba přes poznámkový blok, nebo excelovou tabulku a že si to javasript nějak načte i když v šesté lekci to řešit nebudem. Dnes by mě stačilo vědět jestli nějaké seznamy jde dostat do javascriptu třeba z excelu nebo txt souboru a jestli to zvládne slabší uživatel nebo až větší borec :-D

 
Odpovědět
30.11.2020 15:34
Avatar
Odpovídá na Jindřich Máca
Tomas Matusek:11.8.2021 14:54
example(); //<--- vypise funkci
example['Baf!'] = 'Lek!'; //<--vytvori pole,co ktereho je prirazeno lek!
example(); //<--vypise zase jenom funkci
console.log(example['Baf!']); //<--pres console. log si vypsal pole,nikoliv funkci.
example(); //zase jsi vypsal funkci.

Funkci jsi nikdy neprepsal,takze vzdy vypisuje Hello ..,jen jsi vytvoril pole ,ktere jsi vypsal dale naslednym console.log

Pro lepsi pochopeni si smaz </> console.log u (example['Baf!'] </> a pochopis ze ti to vypise jenom 3x Hello ..
Celkem logicke.

Editováno 11.8.2021 14:56
 
Odpovědět
11.8.2021 14:54
Avatar
Jindřich Máca
Člen IT Redactor Gang
Avatar
Odpovídá na Tomas Matusek
Jindřich Máca:11.8.2021 15:44

Ahoj, to byla jenom demonstrace, že v JS je i funkce objekt. :-D

Mimochodem example['Baf!'] = 'Lek!'; neznamená vytvoření nového pole, ale že se do objektu v proměnné example uloží do jeho vlastnosti s názvem Baf! hodnota Lek! a to že je tento objekt zároveň volatelná funkce v tom nehraje roli. Což je právě hodně neobvyklé chování, protože ve většině jiných jazyků funkce není objekt a tohle by udělat nešlo.

Mám k tomu i pěkné YT video, akorát je v angličtině. :-`

 
Odpovědět
11.8.2021 15:44
Avatar
Jana Bod'ová:24.12.2021 8:44

Dotaz!

let den = d.getDate()-1;
Proč -1 ??

 
Odpovědět
24.12.2021 8:44
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 64. Zobrazit vše