Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава посібника JavaScript представляє різні ітераційні оператори, доступні в JavaScript.
Ви можете уявити цикли комп'ютерною версією гри, де ви кажете комусь зробити X кроків в одному напрямку, а потім Y кроків в іншому; наприклад, ідею піти 5 кроків на схід можна задати циклом:
var step;
for (step = 0; step < 5; step++) {
// Іти 5 разів від значення 0 до 4.
console.log('Іти на схід 1 крок');
}
Є багато різних видів циклів, але вони всі роблять істотно одне і те ж саме: вони повторюють дію певну кількість разів (можливо, 0 разів!) . Механізми різних циклів пропонують різні способи задати початкову і кінцеву точку циклу. Є різні ситуації, які легко вирішуються тим чи іншим циклом.
Оператори циклів у JavaScript:
Оператор for
Цикл for
повторюється, доки певний вираз не стане false. Цикл for
у JavaScript подібний до циклу for
у мовах Java і C. Має такий вигляд:
for ([початковийВираз(initialExpression)
]; [умова(condition)
]; [приріст(incrementExpression)
]) інструкція(statement)
Коли цикл for
виконується, відбувається наступне:
- Виконується вираз
initialExpression
, якщо він заданий. Цей вираз зазвичай ініціалізує один або кілька лічильників, але синтаксис допускає вирази будь-якого рівня складності. Цей вираз також дозволяє оголошувати змінні. - Оцінюється вираз
condition
. Якщо вираз приймає значення true, ітерація циклу виконується, якщо false - цикл завершується. Виконується statement
. Щоб виконати кілька інструкцій, використовуйте ({ ... }
), щоб згрупувати їх.- Потім виконується вираз
incrementExpression
. - Далі все повертається до кроку 2.
Приклад
Наступна функція містить вираз for
, що рахує цифри вибраних варіантів в прокручуваному списку (елемента <select>
, що дозволяє мультивибір). Вираз for
оголошує змінну i
і задає їй значення 0. Перевіряється чи i
менша чим кількість виборів в елементі <select>
, виконує наступний вираз if
та збільшує i
на одиницю після кожного кроку цикла.
<form name="selectForm">
<p>
<label for="musicTypes">Виберіть деякі музичні жанри, а потім натисніть на кнопку нижче:</label>
<select id="musicTypes" name="musicTypes" multiple="multiple">
<option selected="selected">R&B</option>
<option>Jazz</option>
<option>Blues</option>
<option>New Age</option>
<option>Classical</option>
<option>Opera</option>
</select>
</p>
<p><input id="btn" type="button" value="Скільки ви вибрали?" /></p>
</form>
<script>
function howMany(selectObject) {
var numberSelected = 0;
for (var i = 0; i < selectObject.options.length; i++) {
if (selectObject.options[i].selected) {
numberSelected++;
}
}
return numberSelected;
}
var btn = document.getElementById('btn');
btn.addEventListener('click', function() {
alert('Кількість вибраних варіагьів: ' + howMany(document.selectForm.musicTypes));
});
</script>
Оператор do...while
Оператор do...while
повторює дії поки певна умова не прийме значення false. Оператор do...while
виглядатиме наступним чином:
do statement while (condition);
statement
завжди виконується принаймні один раз перед тим як умова буде перевірена (і потім знову поки умова не прийме false). Щоб виконати кілька виразів необхідно використати ({ ... }
) щоб згрупувати ці вирази. Якщо condition
приймає значення true, тіло цикла виконується повторно. В кінці всіх виконань вираз перевіряється. Коли вираз приймає false, ітерації цикла do...while
зупиняються.
Приклади
В наступному прикладі цикл do
ітерується принаймні один раз і повторюється доки i менша чим 5.
var i = 0;
do {
i += 1;
console.log(i);
} while (i < 5);
Оператор while
Вираз while
виконується доти доки спеціальна умова приймає значення true. Вираз while
виглядає наступним чином:
while (condition) statement
Якщо умова стає false, statement
перестає виконуватись і відбувається вихід із цикла.
Вираз перевіряється перед тим як виконається тіло цикла. Якщо вираз повертає true, statement
виконується і умова тестується заново. Якщо вираз повертає false, виконання зупиняється і відбувається вихід з циклу while
.
Щоб виконати кілька виразів в циклі використовуйте ({ ... }), щоб згрупувати їх.
Приклад 1
Наступний цикл while
виконує цикл доти доки n
менше трьох:
var n = 0;
var x = 0;
while (n < 3) {
n++;
x += n;
}
З кожною ітерацією, цикл збільшує n,
та додає це до значення x
. Тому, x
і n
приймають наступні значення:
- Після першого виконання:
n
= 1 іx
= 1 - Після другого виконання:
n
= 2 іx
= 3 - Після третього виконання:
n
= 3 іx
= 6
Після третьої ітерації умова n < 3
більше не true
, тому цикл припиняється.
Приклад 2
Уникайте безкінечних циклів. Переконайтесь, що вираз в циклі прийме значення false; інакше вихід з цикла ніколи не відбудеться. Вираз в наступному циклі while
виконуватиметься постійно тому, що умова ніколи не стане false
:
while (true) {
console.log('Hello, world!');
}
Оператор labeled
label
забезпечує вираз з ідентифікатором, що дозволяє вам зсилатися до цього місця з будь-якого місця вашої програми. Наприклад, ви можете використати label
, щоб позначити цикл, а потім скористатися операторами break
або continue,
щоб вказати, чи повинна програма переривати цей цикл або продовжувати його виконання.
Синтаксис оператора виглядає наступним чином:
label : statement
Значення label
може бути будь-яким ідентифікатором JavaScript, що не є зарезервованим словом. statement
, який ви ідентифікуєте може бути будь-яким виразом.
Приклад
В цьому прикладі позначка markLoop
ідентифікує цикл while
.
markLoop:
while (theMark == true) {
doSomething();
}
Оператор break
Використовуйте оператор break
для виходу з циклу, switch
, чи в поєднанні з оператором label
.
- Коли ви використовуєте
break
безlabel
, це завершує поточнийwhile
,do-while
,for
, абоswitch
і відразу переходить до наступного оператора. - Коли ви використовуєте
break
ізlabel
, це завершує конкретний вираз позначений за допомогою цього label.
Синтаксис оператора break
виглядає наступним чином:
break [label];
Перша форма синтаксису завершує перший батьківський цикл, або оператор switch
; Друга форма завершує певний оператор позначений за допомогоюю label
.
Приклад 1
Наступний приклад проходиться по елементам масива доки не знайде індекс елемента значення якого співпадає із значенням theValue
:
for (var i = 0; i < a.length; i++) {
if (a[i] == theValue) {
break;
}
}
Приклад 2: Переривання позначки
var x = 0;
var z = 0;
labelCancelLoops: while (true) {
console.log('Зовнішні цикли: ' + x);
x += 1;
z = 1;
while (true) {
console.log('Внутрішні цикли: ' + z);
z += 1;
if (z === 10 && x === 10) {
break labelCancelLoops;
} else if (z === 10) {
break;
}
}
}
Оператор continue
Оператор continue
може використовуватись для перезапуску while
, do-while
, for
, чи виразу label
.
- Коли ви використовуєте оператор
continue
без label, це завершує дану ітерацію цикла і переходить на наступну. На відміну від оператораbreak
,continue
не завершує виконання всього цикла. В цикліwhile
, Воно повертається до умови, у цикліfor
воно переходить доincrement-expression
. - Коли ви використовуєте
continue
з label, це переходить до виразу цикла позначеного за допомогою label.
Синтаксис оператора continue
виглядає наступним чином:
continue [label];
Приклад 1
Наступний приклад показує цикл while
з оператором continue,
що виконується коли значення i
дорівнює трьом. Тоді як, n
приймає значення 1, 3, 7, 12.
var i = 0;
var n = 0;
while (i < 5) {
i++;
if (i == 3) {
continue;
}
n += i;
console.log(n);
}
//1,3,7,12
var i = 0;
var n = 0;
while (i < 5) {
i++;
if (i == 3) {
// continue;
}
n += i;
console.log(n);
}
// 1,3,6,10,15
Приклад 2
Вираз позначений checkiandj
містить вираз позначений checkj
. Якщо continue
зустрічається програма зупинить ітерацію checkj
і почнеться з наступної ітерації. Кожен раз як continue
зустрічається, checkj
переітеровується поки вираз не поверне false
. Коли false
повертається, решта виразу checkiandj
виконується іcheckiandj
переітеровується доки умова не поверне false
. Колиfalse
повертається програма продовжує вираз слідуючогоcheckiandj
.
Якщо continue
має label checkiandj
, програма буде продовжуватись зверху виразаcheckiandj.
var i = 0;
var j = 10;
checkiandj:
while (i < 4) {
console.log(i);
i += 1;
checkj:
while (j > 4) {
console.log(j);
j -= 1;
if ((j % 2) == 0) {
continue checkj;
}
console.log(j + ' is odd.');
}
console.log('i = ' + i);
console.log('j = ' + j);
}
Оператор for...in
Оператор for...in
ітерує певну змінну по усіх перечислювальних властивостях об'єкта. Для кожної окремої властивості JavaScript виконує певний вираз. Операторfor...in
виглядає наступним чином:
for (variable in object) { statements }
Приклад
Наступна функція приймає як аргумент об'єкт і ім'я об'єкта. Потім вона ітерує всі властивості і повертає рядок, де перераховуються всі імена властивостей та їх значення.
function dump_props(obj, obj_name) {
var result = '';
for (var i in obj) {
result += obj_name + '.' + i + ' = ' + obj[i] + '<br>';
}
result += '<hr>';
return result;
}
Для об'єкту car
з властивостями make
і model
, result
результат буде:
car.make = Ford
car.model = Mustang
Масиви
Також це може підходити для ітерування елементів Array
, Оператор for...in буде повертати ім'я визначених користувачем властивостей і додаткових номерних індексів. Таким чином, краще використовувати традиційний цикл for
з номерними індексами коли ітеруєте масив, так як for...in ітерує властивості окрім елементів масиву, якщо ви змінюєте об'єкт масиву, наприклад, додаючи нові властивості чи методи.
Оператор for...of
Оператор for...of
створює цикл, що проходиться по ітерованому об'єкту (включно з Array
, Map
, Set
, об'єкт arguments
і т.д), викликаючи в кожній ітерації функцію з виразами для значення кожної окремої властивості.
for (variable of object) { statement }
Наступний приклад показує різницю між циклами for...of
і for...in
. У той час як for...in
проходиться по іменах властивостей, цикл for...of
проходиться по значеннях цих властивостей:
var arr = [3, 5, 7];
arr.foo = 'hello';
for (var i in arr) {
console.log(i); // logs "0", "1", "2", "foo"
}
for (var i of arr) {
console.log(i); // logs 3, 5, 7
}