Існує безліч різних видів циклів, але всі вони по суті роблять те саме: повторюють будь-яку дію кілька разів (не забувайте про нульовий раз повторення, відлік у масиві починається з 0). Різні за будовою цикли пропонують різні способи для визначення початку та закінчення циклу. Для різних завдань програмування Існують свої оператори циклу, за допомогою яких вони вирішуються набагато простіше.
Цикл while буде виконуватися доти, доки вірно (істинно) вираз, переданий йому параметром. Дивіться синтаксис:
while ( поки вираз істинний ) {
виконуємо цей код циклічно;
на початку кожного циклу перевіряємо вираз у круглих дужках
}
/*
Цикл закінчиться, коли вираз перестане бути істинним.
Якщо воно було хибним спочатку - то він не виконається жодного разу!
*/
В принципі, цикл while може виконуватися нескінченно (але це призведе до зависання скрипта!), достатньо передати йому вираз, який ніколи не стане хибним. Наприклад, так:
var test = true;
while (test === true) {
/*
Написаний тут код буде виконуватись 'вічно'
(Поки скрипт не буде припинено примусово).
Не варто це повторювати – це призведе до зависання сервера!
*/
}Давайте послідовно виведемо за допомогою циклу while числа від одного до п'яти:
var i = 0; //лічильник циклу
while (i < 5) {
/*
За допомогою оператора++ збільшуємо i на одиницю
при кожному проході циклу.
*/
i++;
alert(i);
}Зверніть увагу на змінну i – вона є так званим лічильником циклу. Лічильники використовуються для того, щоб підраховувати, скільки разів виконався цикл. Крім того, вони виконують допоміжну роль - у нашому завданні ми використовували лічильник, щоб вивести цифри від 1 до 5
Для лічильників прийнято використовувати літери i, j и k.
Цикл for є альтернативою while. Він більш складний для розуміння, але найчастіше його люблять більше, ніж при тому, що він займає менше рядків.
for ( початкові команди; умова закінчення циклу; команди після проходу циклу ) {
тіло циклу
}Початкові команди - це те, що виконається перед стартом циклу. Вони виконуються лише один раз. Зазвичай там розміщують початкові значення лічильників, наприклад: i = 0.
Умова закінчення циклу - поки вона істинна, цикл працюватиме, приклад: i <10.
Команда після проходу циклу - це команди, які будуть виконуватися щоразу після закінчення проходу циклу. Зазвичай там збільшують лічильники, наприклад: i++.
Давайте за допомогою циклу for виведемо послідовно числа від 0 до 9:
/*
На початку циклу i дорівнюватиме нулю,
цикл буде виконуватися доки i < 10,
після кожного проходу до i додається одиниця:
*/
for (var i = 0; i < 10; i++) {
alert(i); //Виведе 0, 1, 2 ... 9
}Фігурні дужки в циклах можна не вказувати у цьому випадку цикл виконає лише один рядок під ним (не рекомендую так робити, часто призводить до помилок):
for (var i = 0; i < 10; i++) //<--- точки з комою немає
alert(i); //виведе 0, 1, 2... 9А ось якщо після ) поставити крапку з комою - цикл закриється і наступний рядок до нього не потрапить, вийде так званий цикл без тіла, який у нашому випадку просто прокрутиться і в результаті змінить значення змінної i:
for (var i = 0; i < 10; i++); //<--- крапка з комою є
alert(i); //Виведе 9
Такий цикл іноді використовується, ви побачите приклади його застосування під час розбирання завдань на цикли.
Якщо нам потрібно виконати кілька команд у круглих дужках - вказуємо їх через кому:
for (var i = 0, j = 2; i < 10; i++, j++, i = i + j) {
}Давайте розберемо наведений цикл: до проходу циклу виконуються дві команди: var i = 0, j = 2 (зверніть увагу на те, що var тут пишеться один раз), а після кожної ітерації - цілих три: i++, j++, i = i + j.
Цей приклад із погляду програмування ніякої особливої ??користі не несе, просто схематично показує, що це можна робити. Запам'ятайте його, надалі це вам знадобиться.
За допомогою циклу for можна послідовно перебрати елементи масиву. Робиться це так:
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i <= arr.length-1; i++) {
alert(arr[i]); //виведе 1, 2, 3, 4, 5
}Ключовим моментом є те, що ми робимо перебір від нуля до довжини масиву мінус 1 (оскільки номер останнього елемента масиву на одиницю менше його довжини).
Можна не забирати одиницю, а місце <= зробити <:
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
alert(arr[i]); //Виведе 1, 2, 3, 4, 5
}Для перебору об'єкта використовується так званий цикл for-in. Погляньмо, як він працює.
Нехай у нас дано такий об'єкт:
var obj = {Коля: 200, Вася: 300;Петя :400;}
Давайте виведемо його ключі. Для цього використовуємо таку конструкцію: for (key in obj), де obj - це об'єкт, який ми перебираємо, а key - це змінна, в яку послідовно будуть лягати ключі об'єкта (її назва може бути будь-якою, яку придумаєте – така і буде).
Тобто в даному циклі не треба вказувати умову закінчення - він перебиратиме ключі об'єкта, доки вони не закінчаться.
Отже, ось так ми виведемо всі ключі об'єкта (по черзі):
var obj = {Коля: 200, Вася: 300;Петя :400;}
for (key in obj) {
alert(key); //Виведе 'Коля', 'Вася', 'Петя'
}Якщо нам потрібні не ключі, а значення, потрібно звернутися до нашого об'єкта за ключем, так: obj[key].
Як це працює: у змінній key спочатку буде 'Коля', тобто obj[key] в даному випадку байдуже, що obj['Коля'], при наступному проході циклу змінної key буде 'Вася' і так далі.
Отже, виведемо всі елементи об'єкта:
var obj = {Коля: 200, Вася: 300, Петя: 400};
for (key in obj) {
alert(obj[key]); //виведе 200, 300, 400
}Оператор for...of створює цикл, що проходить перерахованими об'єктами (включаючи Array, Map, Set тощо), викликаючи на кожній ітерації функцію з виразами, які треба виконати для набуття значення кожної окремої властивості.
for (варіальний предмет) { вирази }
Наступний приклад показує різницю між циклами for...of та for...in. Тоді як for...in проходить за іменами властивостей, for...of проходить за значеннями властивостей:
let arr = [3, 5, 7];
arr.foo = "hello";
for (let i in arr) {
console.log(i); // виводе "0", "1", "2", "foo"
}
for (let i of arr) {
console.log(i); // виводе "3", "5", "7"
}
Іноді нам необхідно перервати виконання циклу достроково, у випадку з циклом for це означає до того, як цикл перебере всі елементи масиву.
Навіщо таке може знадобитися? Наприклад, перед нами стоїть завдання виводити елементи масиву доти, поки не зустрінеться число 3. Як тільки зустрінеться - цикл має завершити свою роботу.
Таке можна зробити за допомогою інструкції break - якщо виконання циклу дійде до неї, цикл закінчить свою роботу.
Давайте вирішимо наведене вище завдання - обірвемо цикл, як тільки нам зустрінеться число 3:
var arr = [1, 2, 3, 4, 5];
for (var i = 0; i < arr.length; i++) {
if (arr[i] === 3) {
break; //виходимо з циклу
} else {
alert(arr[i]);
}
}Існує також інструкція continue, при досягненні якої цикл починає нову ітерацію. Іноді може бути корисною для спрощення коду, хоча Майже завжди завдання можна вирішити і без неї.