JavaScript patří mezi nejpoužívanější programovací jazyky. Vývojáři, kteří se chtějí stát inženýry JavaScriptu, se musí naučit základy smyček, jejich typy a to, jak fungují.
Smyčka JavaScriptu je nástroj používaný k provádění opakovaných úkolů na základě určité podmínky. Na druhou stranu, „iterovat“ je obecný termín, který znamená opakování v kontextu smyčky. Smyčka bude pokračovat v iteraci, dokud nebude splněna podmínka zastavení.
Abyste tomu lépe porozuměli, můžete si to představit jako počítačovou hru, ve které jste instruováni udělat X kroků na sever a poté Y kroků doleva.
Můžete reprezentovat, že udělejte 7 kroků na sever jako;
for (let step = 0; step < 7; step++) {
// Runs 7 times, with values of steps 0 through 6.
console.log("Walking northwards one step");
}
po provedení výše uvedeného bloku kódu budete mít toto;
Table of Contents
Proč se obvykle používají smyčky?
- Provádění opakujících se úloh: K provádění instrukcí můžete používat smyčky, dokud nejsou splněny určité podmínky.
- Iterace přes objekty nebo pole: Pomocí cyklů můžete iterovat vlastnosti objektu nebo prvků pole, což vám umožní provádět určité akce pro každou vlastnost nebo prvek.
- Filtrování dat: Pomocí smyčky můžete filtrovat data na základě konkrétních podmínek.
JavaScriptové smyčky přicházejí v různých formách; Pro, Zatímco, Dělejte… Zatímco, Pro…z a Pro…v. Pojďme je podrobně prozkoumat a ukázat, jak každý funguje.
Pro smyčku
Cyklus for se bude opakovat, dokud se zadaná podmínka nevyhodnotí jako pravdivá. Smyčka for má tři volitelné výrazy, za nimiž následuje blok kódu.
for (initialization; condition; finalExpression) {
// code
}
- Inicializační výraz přichází před provedením první smyčky. Tento výraz obvykle inicializuje jeden nebo více čítačů.
- Výraz podmínky je zkontrolován pokaždé před spuštěním cyklu for. Kód ve smyčce nebo příkazu se provede pokaždé, když je výraz vyhodnocen jako true. Na druhou stranu se smyčka zastaví, když se výraz vyhodnotí jako nepravda. Pokud je však výraz vynechán, výraz se automaticky vyhodnotí jako true.
- FinalExpression se spustí po každé iteraci smyčky. Výraz se většinou používá ke zvýšení čítače.
Můžete použít {}, blokový příkaz, k seskupení a provedení více příkazů. Pokud chcete smyčku ukončit dříve, než se výraz podmínky vyhodnotí jako nepravda, použijte příkaz break.
Příklady smyček for s kódem
for (let i = 0; i < 7; i++) {
console.log(i);
}
V tomto bloku kódu;
- Proměnná i je inicializována na nulu (ať i=0).
- Podmínkou je, že i by mělo být menší než 7 (i=7).
- Smyčka se bude opakovaně opakovat, pokud je hodnota i menší než 7 (i<7>.
- Iterace přidá 1 k hodnotě i po každé iteraci (++1).
for (let i = 1; i < 11; i += 2) {
if (i === 9) {
break;
}
console.log('Total developers: ' + i);
}
- Blok kódu iteruje od 1 do 10 (i<11).
- Cyklus inicializuje proměnnou i s hodnotou 1 (ať i = 1).
- Podmínka smyčky bude pokračovat v provádění, pokud je hodnota i menší než 11 (i < 11).
- Hodnota i se po každé iteraci zvýší o 2 (i += 2).
Příkaz if vyhodnocuje, zda je hodnota i=9. Pokud je podmínka pravdivá, provede se příkaz break a smyčka se ukončí.
(obraz)
Pro…smyčku
Cyklus for…of iteruje přes iterovatelné objekty, jako je mapa, pole, argumenty a sada. Tato smyčka vyvolá vlastní iterační hák s příkazy, které se provádějí pro hodnotu každé odlišné vlastnosti.
Základní struktura smyčky for… je;
for (variable of object) statement
Příklady smyčky for…of v akci
const frontendLanguages = [ "HTML", "CSS", "JavaScript" , “React”];
for (let i of frontendLanguages) {
console.log(i);
}
V tomto kódu;
- Definujeme pole s názvem frontendLanguages
- Pole má tři prvky; „HTML“, „CSS“, „JavaScript“ a „Reagovat“.
- Smyčka for…of se iteruje přes každý prvek ve frontendLanguages.
- I v bloku kódu přebírá hodnotu každého prvku během každé iterace a hodnoty vytištěné na konzole.
const s = new Set();
s.add(2);
s.add("grey");
for (let n of s) {
console.log(n);
}
V tomto bloku kódu;
- Deklarujeme proměnnou s, kterou pomocí konstruktoru Set() přiřadíme nové množině.
- Pomocí metody add() jsou do kódu přidány dva prvky
- For….of iteruje přes objekt elementů.
- Smyčka přiřadí aktuální prvek n před provedením příkazu console.log(n).
const m = new Map();
m.set(4, "rabbit");
m.set(6, "monkey");
m.set(8, "elephant");
m.set(10, "lion");
m.set(12, "leopard");
for (let n of m) {
console.log(n);
}
V tomto bloku kódu;
- K vytvoření nového objektu Map použijeme konstruktor Map().
- Je deklarována proměnná m.
- Pomocí metody .set() přidáme pět párů klíč–hodnota.
- Cyklus for…of iteruje prvky objektu mapy m.
Pro…ve smyčce
Smyčka for…in se používá k iteraci vlastností objektu. Základní struktura cyklu for…in je;
for (property in object) {
// code
}
Smyčku for…in můžete použít k iteraci přes pole a objekty podobné poli.
const shoppingList = { kales: 4, tomatoes: 2, cabbage: 0, lettuce:6, pumpkin:5 };
for (const vegetable in shoppingList) {
console.log(vegetable);
}
V tomto bloku kódu;
- Představíme objekt JavaScriptu a pojmenujeme jej shoppingList.
- Smyčku for používáme k iteraci každé vlastnosti na nákupním seznamu pomocí operátoru in.
- V každé iteraci přiřadí smyčka aktuální název vlastnosti v nákupním seznamu.
Zatímco
Cyklus while vyhodnocuje podmínku, pokud zjistí, že je pravdivá, provede se blok kódu. Pokud je však podmínka nepravdivá, smyčka skončí a blok kódu nebude proveden.
Toto je základní struktura smyčky while;
while (condition) Statement
Testovací podmínka musí nastat před provedením příkazu ve smyčce. Můžete provést více příkazů pomocí {} nebo blokových příkazů.
Příklad smyčky while v akci
let n = 0;
while (n < 9) {
console.log(n);
n++;
}
V tomto kódu;
- Proměnná n je inicializována nulovou hodnotou (nechť n=0).
- Smyčka bude probíhat, dokud je hodnota n menší než 9 (n<9)
- Hodnota n se zobrazí na konzole a po každé iteraci se zvýší o 1 (n++)
- Kód se přestane provádět v 8.
Do… Zatímco smyčka
Cyklus do…while se opakuje, dokud se konkrétní podmínka nevyhodnotí jako nepravda.
Obecná struktura příkazu do…while je;
do statement while (condition);
Příkaz se provede jednou, ale před kontrolou podmínky. Příkaz se provede, pokud je podmínka pravdivá. Pokud je však vyhodnocená podmínka nepravdivá, provádění se zastaví a ovládací prvek přejde na příkaz po do..while. Je zaručeno, že kód ve smyčce do…while se spustí alespoň jednou, i když se podmínka vyhodnotí jako pravdivá.
Příklad do… while
let n = 0;
do {
n += 1;
console.log(n);
} while (n < 7);
V tomto kódu;
- Zavedeme proměnnou n a její počáteční hodnotu nastavíme na 0 (nechť n=0).
- Naše proměnná n vstupuje do cyklu do…while, kde se její hodnota po každé iteraci zvýší o 1 (n+=1)
- Hodnota n se zaprotokoluje.
- Smyčka bude pokračovat, dokud bude hodnota n menší než 7 (n<7).
Když spustíte tento kód, konzola zobrazí hodnoty n počínaje 1 až 7, protože se smyčka provede 7krát.
Vnořená smyčka
Vnořená smyčka je situace, kdy máme smyčku uvnitř smyčky. Například můžeme mít smyčku for vnořenou do jiné smyčky for.
for (let outer = 0; outer < 5; outer += 2) {
for (let inner = 0; inner < 6; inner += 2) {
console.log(`${outer}-${inner}`);
}
}
- Existují dvě proměnné; vnější a vnitřní a obě jsou inicializovány hodnotou nula.
- Obě proměnné se po každé iteraci zvýší o 2
- Vnější a vnitřní smyčka se opakují třikrát.
Příkazy řízení smyčky
Příkazy řízení smyčky, někdy známé jako „příkazy skoku“, přerušují normální tok programu. Přestávka a pokračování jsou příklady příkazů řízení smyčky.
Přerušení prohlášení
Příkazy Break ukončí smyčku okamžitě, i když podmínka nebyla splněna.
for (let n = 1; n <= 26; n++) {
if (n === 13) {
console.log("Loop stops here. We have reached the break statement");
break;
}
console.log(n);
}
Vykreslený kód se zobrazí jako;
Pokračujte ve výpovědích
Příkazy Continue se používají k přeskočení určitého bloku kódu a provedení iterace pro novou smyčku.
for (let n = 0; n <= 10; n++) {
if (n === 5) {
continue;
}
console.log(n);
}
Vykreslený kód se zobrazí jako;
Závěr
Výše jsou běžné smyčky, se kterými se můžete setkat ve vanilla JavaScript a jeho rámcích/knihovnách. Jak bylo zvýrazněno, každý typ smyčky má svůj případ použití a různé chování. Pokud vyberete nesprávný typ smyčky, pravděpodobně budete mít chyby a váš kód bude pravděpodobně vykazovat neočekávané chování.
Pokud máte co do činění s JavaScriptovým frameworkem nebo knihovnou, vždy si zkontrolujte jeho dokumentaci a použijte vestavěné smyčky.