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

Переклад цієї статті ще не завершено. Будь ласка, допоможіть перекласти цю статтю з англійської мови

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

Виконюється вираз 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, це завершує дану ітерацію цикла і переходить на наступну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
}

« Previous Next »

Востаннє змінено: Jun 19, 2020, помічниками MDN

Оператор for

Приклад

Оператор do...while

Приклади

Оператор while

Приклад 1

Приклад 2

Оператор labeled

Приклад

Оператор break

Приклад 1

Приклад 2: Переривання позначки

Оператор continue

Приклад 1

Приклад 2

Оператор for...in

Приклад

Масиви

Оператор for...of

Вивчайне найкраще з веб-розробки

Оператор `for`

Оператор `do...while`

Оператор `while`

Оператор `labeled`

Оператор `break`

Оператор `continue`

Оператор `for...in`

Оператор `for...of`