Smyčky mohou provést blok kódu několikrát.
Smyčky jsou užitečné, pokud chcete spouštět stejný kód znovu a znovu, každý čas s jinou hodnotou.
Často se tak děje při práci s poli:
text += cars[0] + "<br>";
text += cars[1] + "<br>";
text += cars[2] + "<br>";
text += cars[3] + "<br>";
text += cars[4] + "<br>";
text += cars[5] + "<br>";for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford", "Fiat", "Audi"];
let text = "";
for (let i = 0; i < cars.length; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
JavaScript podporuje různé druhy smyček:
for - několikrát projde blok kódu
pro/v - prochází vlastnosti objektu
for/of - prochází hodnoty an iterovatelný objekt
zatímco - prochází blok kódu, když je zadaná podmínka pravdivá
do/while - také prochází blok kódu, když je zadaná podmínka pravdivá
forPříkaz for vytváří smyčku se 3 volitelnými výrazy:
for (expression 1; expression 2; expression 3) {
// code block to be executed
}Výraz 1 se provede (jednou) před provedením bloku kódu.
Výraz 2 definuje podmínku pro provedení bloku kódu.
Výraz 3 se provede (pokaždé) po provedení bloku kódu.
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
let text = "";
for (let i = 0; i < 5; i++) {
text += "The number is " + i + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Z výše uvedeného příkladu můžete vyčíst:
Výraz 1 nastavuje proměnnou před začátkem cyklu (ať i=0).
Výraz 2 definuje podmínku pro běh smyčky (i musí být menší než 5).
Výraz 3 zvyšuje hodnotu (i++) pokaždé, když má blok kódu ve smyčce byl popraven.
Normálně použijete výraz 1 k inicializaci proměnné použité ve smyčce (ať i=0).
Není tomu tak vždy. JavaScriptu je to jedno. Výraz 1 je volitelný.
Ve výrazu 1 můžete iniciovat mnoho hodnot (oddělených čárkou):
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i, len, text;
for (i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
A můžete vynechat výraz 1 (jako když jsou vaše hodnoty nastaveny před začátkem smyčky):
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Výraz 2 se často používá k vyhodnocení podmínky počáteční proměnné.
Není tomu tak vždy. JavaScriptu je to jedno. Výraz 2 je také volitelný.
Pokud výraz 2 vrátí hodnotu true, cyklus začne znovu. Pokud vrátí hodnotu false, smyčka skončí.
Pokud vynecháte výraz 2, musíte zadat zalomení uvnitř smyčka. Jinak smyčka nikdy neskončí. To způsobí zhroucení vašeho prohlížeče. Přečtěte si o přestávkách v další kapitole tohoto návodu.
Výraz 3 často zvyšuje hodnotu počáteční proměnné.
Není tomu tak vždy. JavaScriptu je to jedno. Výraz 3 je volitelný.
Výraz 3 může dělat cokoliv jako záporný přírůstek (i--), kladný přírůstek (i=i + 15), nebo cokoliv jiného.
Výraz 3 lze také vynechat (jako když zvyšujete hodnoty uvnitř smyčky):
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript For Loop</h2>
<p id="demo"></p>
<script>
const cars = ["BMW", "Volvo", "Saab", "Ford"];
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
document.getElementById("demo").innerHTML = text;
</script>
</body>
</html>
Použití var ve smyčce:
var i = 5;
for (var i = 0; i < 10; i++) {
// some code
}
// Here i is 10Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
var i = 5;
for (var i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
Použití let ve smyčce:
let i = 5;
for (let i = 0; i < 10; i++) {
// some code
}
// Here i is 5Zkuste to sami →
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript let</h2>
<p id="demo"></p>
<script>
let i = 5;
for (let i = 0; i < 10; i++) {
// some statements
}
document.getElementById("demo").innerHTML = i;
</script>
</body>
</html>
V prvním příkladu pomocí var, proměnné deklarované v smyčka znovu deklaruje proměnnou mimo smyčku.
Ve druhém příkladu pomocí let je proměnná deklarovaná v smyčka znovu nedeklaruje proměnnou mimo smyčku.
Když se let použije k deklaraci proměnné i ve smyčce, proměnná bude viditelná pouze v rámci smyčky.
For/Of a For/InCyklus for/in a cyklus for/of jsou vysvětleny v další kapitole.
při smyčkySmyčka při a do/při jsou vysvětleny v dalších kapitolách.