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

Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава посібника 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

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

for ([initialExpression]; [condition]; [incrementExpression])
  statement

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

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

Приклад 2

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

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

Оператор labeled

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

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

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: Breaking to a label

var x = 0;
var z = 0;
labelCancelLoops: while (true) {
  console.log('Outer loops: ' + x);
  x += 1;
  z = 1;
  while (true) {
    console.log('Inner loops: ' + z);
    z += 1;
    if (z === 10 && x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}

Оператор continue

Оператор continue може використовуватись для перезапуску while, do-while, for, чи виразу label.

• Коли ви використовуєте оператор continue без label,  це завершує дану ітерацію цикла і переходить на наступнуi. На відміну від оператора 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
}