JavaScript Цикл For
Цикли можуть виконувати блок коду кілька разів.
JavaScript Цикли
Цикли зручні, якщо ви хочете запускати один і той самий код знову і знову, кожен раз з іншим значенням.
Часто так буває при роботі з масивами:
Замість запису:
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>";
}
Спробуйте самі »
Різні види циклів
JavaScript підтримує різні види циклів:
for- проходить через блок коду кілька разівfor/in- перебирає властивості об’єктуfor/of- перебирає значення об’єкту, що ітеруєтьсяwhile- перебирає блок коду, поки виконується вказана умоваdo/while- також перебирає блок коду, поки виконується вказана умова
Цикл For
Цикл for має наступний синтаксис:
for (інструкція 1; інструкція 2; інструкція 3) {
// блок коду, який має бути виконаний
}
Інструкція 1 виконується (один раз) перед виконанням блоку коду.
Інструкція 2 визначає умову виконання блоку коду.
Інструкція 3 виконується (кожен раз) після виконання блоку коду.
Із наведеного вище прикладу ви можете прочитати:
Інструкція 1 встановлює змінну до початку циклу (let i = 0).
Інструкція 2 визначає умову для запуску циклу (i має бути менше ніж 5).
Інструкція 3 збільшує значення (i++) кожен раз, коли виконується блок коду в циклі.
Інструкція 1
Зазвичай, ви будете використовувати інструкцію 1 для ініціалізації змінної, що використовується в циклі (let i = 0).
Це не завжди так, JavaScript все одно. Інструкція 1 є не обов’язковою.
Ви можете вказати багато значень в інструкції 1 (розділених комами):
Приклад
for (let i = 0, len = cars.length, text = ""; i < len; i++) {
text += cars[i] + "<br>";
}
Спробуйте самі »
І ви можете опустити інструкцію 1 (наприклад, коли ваші значення встановлені до початку циклу):
Приклад
let i = 2;
let len = cars.length;
let text = "";
for (; i < len; i++) {
text += cars[i] + "<br>";
}
Спробуйте самі »
Інструкція 2
Часто інструкція 2 використовується для оцінки стану початкової змінної.
Це не завжди так, JavaScript все одно. Інструкція 2 є також необов’язковою.
Якщо інструкція 2 поверне true, цикл почнеться заново, якщо він поверне false, цикл завершиться.
Якщо ви опустите інструкцію 2, ви маєте зробити обрив (break) всередині циклу. Інакше цикл ніколи не закінчиться. Це призведе до збою роботи вашого браузера (зависанню). Прочитайте про обриви в наступному розділі цього підручника на нашому сайті W3Schools українською.
Інструкція 3
Часто інструкція 3 збільшує значення початкової змінної.
Це не завжди так, JavaScript все одно, а інструкція 3 є необов’язковою.
Інструкція 3 може робити що завгодно, наприклад, негативний інкремент (i--), позитивний інкремент (i = i + 15), або будь-що інше.
Інструкцію 3 також можна опустити (наприклад, коли ви збільшуєте свої значення всередині циклу):
Приклад
let i = 0;
let len = cars.length;
let text = "";
for (; i < len; ) {
text += cars[i] + "<br>";
i++;
}
Спробуйте самі »
Область дії циклу
Використання var в циклі:
Використання let в циклі:
В першому прикладі з використанням var змінна, оголошена в циклі, повторно оголошує змінну поза циклом.
В другому прикладі з використанням let змінна, оголошена в циклі, не оголошує змінну поза циклом.
Коли let використовується для оголошення змінної i в циклі, змінна i буде видима лише всередині циклу.
For/Of та For/In Цикли
Цикл for/in та цикл for/of пояснюються в наступному розділі.
Цикли While
Цикл while та цикл do/while пояснюються в наступних розділах.
