7.1 KiB

Raw Permalink Blame History

Základy JavaScriptu: Pole a cykly

Sketchnote od Tomomi Imura

Kvíz před lekcí

Tato lekce se zabývá základy JavaScriptu, jazyka, který zajišťuje interaktivitu na webu. V této lekci se naučíte o polích a cyklech, které se používají k manipulaci s daty.

🎥 Klikněte na obrázky výše pro videa o polích a cyklech.

Tuto lekci si můžete projít na Microsoft Learn!

Pole

Práce s daty je běžný úkol v každém programovacím jazyce, a je mnohem jednodušší, když jsou data organizována ve strukturovaném formátu, jako jsou pole. V polích jsou data uložena ve struktuře podobné seznamu. Jednou z hlavních výhod polí je, že můžete uložit různé typy dat do jednoho pole.

✅ Pole jsou všude kolem nás! Dokážete si představit příklad pole z reálného života, například pole solárních panelů?

Syntaxe pole je dvojice hranatých závorek.

let myArray = [];

Toto je prázdné pole, ale pole mohou být deklarována již naplněná daty. Více hodnot v poli je odděleno čárkou.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

Hodnotám v poli je přiřazena jedinečná hodnota nazývaná index, což je celé číslo, které je přiřazeno na základě jeho vzdálenosti od začátku pole. V příkladu výše má řetězcová hodnota "Chocolate" index 0 a index "Rocky Road" je 4. Použijte index s hranatými závorkami k získání, změně nebo vložení hodnot pole.

✅ Překvapuje vás, že pole začínají na indexu nula? V některých programovacích jazycích začínají indexy na 1. Existuje zajímavá historie kolem tohoto, kterou si můžete přečíst na Wikipedii.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors[2]; //"Vanilla"

Pomocí indexu můžete změnit hodnotu, například takto:

iceCreamFlavors[4] = "Butter Pecan"; //Changed "Rocky Road" to "Butter Pecan"

A můžete vložit novou hodnotu na daný index takto:

iceCreamFlavors[5] = "Cookie Dough"; //Added "Cookie Dough"

✅ Běžnější způsob, jak přidat hodnoty do pole, je použití operátorů pole, jako je array.push()

Chcete-li zjistit, kolik položek je v poli, použijte vlastnost length.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];
iceCreamFlavors.length; //5

✅ Vyzkoušejte si to sami! Použijte konzoli svého prohlížeče k vytvoření a manipulaci s polem podle svého návrhu.

Cykly

Cykly nám umožňují provádět opakující se nebo iterativní úkoly a mohou ušetřit spoustu času a kódu. Každá iterace se může lišit svými proměnnými, hodnotami a podmínkami. V JavaScriptu existují různé typy cyklů, které mají drobné rozdíly, ale v podstatě dělají totéž: procházejí data.

For cyklus

Cyklus for vyžaduje 3 části k iteraci:

counter Proměnná, která je obvykle inicializována číslem, které počítá počet iterací
condition Výraz, který používá operátory porovnání k zastavení cyklu, když je false
iteration-expression Spouští se na konci každé iterace, obvykle se používá ke změně hodnoty counteru

// Counting up to 10
for (let i = 0; i < 10; i++) {
  console.log(i);
}

✅ Spusťte tento kód v konzoli prohlížeče. Co se stane, když provedete malé změny v counteru, podmínce nebo iterativním výrazu? Dokážete ho spustit pozpátku, vytvořit odpočítávání?

While cyklus

Na rozdíl od syntaxe cyklu for vyžadují cykly while pouze podmínku, která zastaví cyklus, když se podmínka stane false. Podmínky v cyklech obvykle závisí na jiných hodnotách, jako jsou countery, a musí být spravovány během cyklu. Počáteční hodnoty counterů musí být vytvořeny mimo cyklus a jakékoli výrazy pro splnění podmínky, včetně změny counteru, musí být udržovány uvnitř cyklu.

//Counting up to 10
let i = 0;
while (i < 10) {
 console.log(i);
 i++;
}

✅ Proč byste si vybrali for cyklus místo while cyklu? 17 tisíc uživatelů mělo stejnou otázku na StackOverflow a některé názory by vás mohly zajímat.

Cykly a pole

Pole se často používají s cykly, protože většina podmínek vyžaduje délku pole k zastavení cyklu a index může být také hodnotou counteru.

let iceCreamFlavors = ["Chocolate", "Strawberry", "Vanilla", "Pistachio", "Rocky Road"];

for (let i = 0; i < iceCreamFlavors.length; i++) {
  console.log(iceCreamFlavors[i]);
} //Ends when all flavors are printed

✅ Experimentujte s procházením pole podle svého návrhu v konzoli prohlížeče.

🚀 Výzva

Existují i jiné způsoby procházení polí než pomocí for a while cyklů. Existují forEach, for-of a map. Přepište svůj cyklus pole pomocí jedné z těchto technik.

Kvíz po lekci

Přehled & Samostudium

Pole v JavaScriptu mají mnoho metod, které jsou velmi užitečné pro manipulaci s daty. Přečtěte si o těchto metodách a vyzkoušejte některé z nich (jako push, pop, slice a splice) na poli podle svého návrhu.

Úkol

Procházení pole

Prohlášení:
Tento dokument byl přeložen pomocí služby pro automatický překlad Co-op Translator. I když se snažíme o co největší přesnost, mějte prosím na paměti, že automatické překlady mohou obsahovat chyby nebo nepřesnosti. Původní dokument v jeho původním jazyce by měl být považován za závazný zdroj. Pro důležité informace doporučujeme profesionální lidský překlad. Neodpovídáme za žádná nedorozumění nebo nesprávné výklady vyplývající z použití tohoto překladu.

7.1 KiB Raw Permalink Blame History