Цикли та ітерації

Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава посібника JavaScript  представляє різні ітераційні оператори, доступні в JavaScript.

Ви можете уявити цикли комп'ютерною версією гри, де ви кажете комусь зробити X кроків в одному напрямку, а потім Y кроків в іншому; наприклад, ідею піти 5 кроків на схід можна задати циклом:

var step;
for (step = 0; step < 5; step++) {
  // Іти 5 разів від значення 0 до 4.
  console.log('Іти на схід 1 крок');
}

Є багато різних видів циклів, але вони всі роблять істотно одне і те ж саме: вони повторюють дію певну кількість разів (можливо, 0 разів!) . Механізми різних циклів пропонують різні способи задати початкову і кінцеву точку циклу. Є різні ситуації, які легко вирішуються тим чи іншим циклом.

Оператори циклів у JavaScript:

• for statement
• do...while statement
• while statement
• labeled statement
• break statement
• continue statement
• for...in statement
• for...of statement

Цикл for повторюється, доки певний вираз не стане false. Цикл for у JavaScript подібний до циклу  for у мовах Java і C. Має такий вигляд:

for ([початковийВираз(initialExpression)]; [умова(condition)]; [приріст(incrementExpression)])
  інструкція(statement)

Коли цикл for виконується, відбувається наступне:

1. Виконується вираз initialExpression, якщо він заданий. Цей вираз зазвичай ініціалізує один або кілька лічильників, але синтаксис допускає вирази будь-якого рівня складності. Цей вираз також дозволяє оголошувати змінні.
2. Оцінюється вираз condition. Якщо вираз приймає значення  true,  ітерація циклу виконується, якщо false - цикл завершується.
3. Виконується statement. Щоб виконати кілька інструкцій, використовуйте ({ ... }), щоб згрупувати їх.
4. Потім виконується  вираз incrementExpression.
5. Далі все повертається до кроку 2.

Наступна функція містить вираз for, що рахує цифри вибраних варіантів в прокручуваному списку (елемента  <select> (en-US) , що дозволяє мультивибір). Вираз 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 повторює дії поки певна умова не прийме значення 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 виконується доти доки спеціальна умова приймає значення true. Вираз while виглядає наступним чином:

while (condition)
  statement

Якщо умова стає false, statement перестає виконуватись і відбувається вихід із цикла.

Вираз перевіряється перед тим як виконається тіло цикла. Якщо вираз повертає true, statement виконується і умова тестується заново. Якщо вираз повертає false, виконання зупиняється і відбувається вихід з циклу while.

Щоб виконати кілька виразів в циклі використовуйте ({ ... }), щоб згрупувати їх.

Наступний цикл 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, тому цикл припиняється.

Уникайте безкінечних циклів. Переконайтесь, що вираз в циклі прийме значення false; інакше вихід з цикла ніколи не відбудеться. Вираз в наступному циклі while виконуватиметься постійно тому, що умова ніколи не стане false:

while (true) {
  console.log('Hello, world!');
}

 label забезпечує вираз з ідентифікатором, що дозволяє вам зсилатися до цього місця з будь-якого місця вашої програми. Наприклад, ви можете використати label, щоб позначити цикл, а потім скористатися операторами break або continue, щоб вказати, чи повинна програма переривати цей цикл або продовжувати його виконання.

Синтаксис оператора виглядає наступним чином:

label :
   statement

Значення label може бути будь-яким ідентифікатором JavaScript, що не є зарезервованим словом. statement, який ви ідентифікуєте може бути будь-яким виразом.

В цьому прикладі позначка markLoop ідентифікує цикл while.

markLoop:
while (theMark == true) {
   doSomething();
}

Використовуйте оператор break для виходу з циклу, switch, чи в поєднанні з оператором label.

• Коли ви використовуєте break без label, це завершує поточний while, do-while, for, або switch і відразу переходить до наступного оператора.
• Коли ви використовуєте break із label, це завершує конкретний вираз позначений за допомогою цього label.

Синтаксис оператора break виглядає наступним чином:

break [label];

Перша форма синтаксису завершує перший батьківський цикл, або оператор switch; Друга форма завершує певний оператор позначений за допомогоюю label.

Наступний приклад проходиться по елементам масива доки не знайде індекс елемента значення якого співпадає із значенням theValue:

for (var i = 0; i < a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}

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 може використовуватись для перезапуску while, do-while, for, чи виразу label.

• Коли ви використовуєте оператор continue без label,  це завершує дану ітерацію цикла і переходить на наступну. На відміну від оператора break, continue не завершує виконання всього цикла. В циклі while, Воно повертається до умови, у циклі for воно переходить до increment-expression.
• Коли ви використовуєте continue з label, це переходить до виразу цикла позначеного за допомогою label.

Синтаксис оператора continue виглядає наступним чином:

continue [label];

Наступний приклад показує цикл 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

Вираз позначений 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 ітерує певну змінну по усіх перечислювальних властивостях об'єкта. Для кожної окремої властивості 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 створює цикл, що проходиться по ітерованому об'єкту (включно з 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
}

• « Previous
• Next »