path: root/files/uk/web/javascript/guide/loops_and_iteration/index.html

---
title: Цикли та ітерації
slug: Web/JavaScript/Guide/Loops_and_iteration
tags:
  - JavaScript
  - Інструкція
  - Синтаксис
  - Цикл
translation_of: Web/JavaScript/Guide/Loops_and_iteration
---
<div>{{jsSidebar("JavaScript Guide")}} {{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</div>

<p class="summary">Цикли пропонують швидкий та легкий спосіб робити щось неодноразово. Ця глава <a href="/en-US/docs/Web/JavaScript/Guide">посібника JavaScript </a> представляє різні ітераційні оператори, доступні в JavaScript.</p>

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

<pre class="brush: js notranslate">var step;
for (step = 0; step &lt; 5; step++) {
  // Іти 5 разів від значення 0 до 4.
  console.log('Іти на схід 1 крок');
}
</pre>

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

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

<ul>
 <li>{{anch("for statement")}}</li>
 <li>{{anch("do...while statement")}}</li>
 <li>{{anch("while statement")}}</li>
 <li>{{anch("labeled statement")}}</li>
 <li>{{anch("break statement")}}</li>
 <li>{{anch("continue statement")}}</li>
 <li>{{anch("for...in statement")}}</li>
 <li>{{anch("for...of statement")}}</li>
</ul>

<h2 id="Оператор_for">Оператор <code>for</code></h2>

<p>Цикл {{jsxref("statements/for","for")}} повторюється, доки певний вираз не стане false. Цикл <code>for</code> у JavaScript подібний до циклу  <code>for</code> у мовах Java і C. Має такий вигляд:</p>

<pre class="syntaxbox notranslate">for ([початковийВираз(<code>initialExpression)</code>]; [умова(<code>condition)</code>]; [приріст(<code>incrementExpression)</code>])
  інструкція(<code>statement)</code>
</pre>

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

<ol>
 <li>Виконується вираз <code>initialExpression</code>, якщо він заданий. Цей вираз зазвичай ініціалізує один або кілька лічильників, але синтаксис допускає вирази будь-якого рівня складності. Цей вираз також дозволяє оголошувати змінні.</li>
 <li>Оцінюється вираз <code>condition</code>. Якщо вираз приймає значення  true,  ітерація циклу виконується, якщо false - цикл завершується.</li>
 <li><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Виконується </span></font>statement</code>. Щоб виконати кілька інструкцій, використовуйте (<code>{ ... }</code>), щоб згрупувати їх.</li>
 <li>Потім виконується  вираз <code>incrementExpression</code>.</li>
 <li>Далі все повертається до кроку 2.</li>
</ol>

<h3 id="Приклад"><strong>Приклад</strong></h3>

<p>Наступна функція містить вираз <code>for</code>, що рахує цифри вибраних варіантів в прокручуваному списку (елемента  {{HTMLElement("select")}} , що дозволяє мультивибір). Вираз <code>for</code>  оголошує змінну <code>i</code> і задає їй значення 0. Перевіряється чи <code>i</code> менша чим кількість виборів в елементі <code>&lt;select&gt;</code> , виконує наступний вираз <code>if</code>та збільшує <code>i</code> на одиницю після кожного кроку цикла.</p>

<pre class="brush: html notranslate">&lt;form name="selectForm"&gt;
  &lt;p&gt;
    &lt;label for="musicTypes"&gt;Виберіть деякі музичні жанри, а потім натисніть на кнопку нижче:&lt;/label&gt;
    &lt;select id="musicTypes" name="musicTypes" multiple="multiple"&gt;
      &lt;option selected="selected"&gt;R&amp;B&lt;/option&gt;
      &lt;option&gt;Jazz&lt;/option&gt;
      &lt;option&gt;Blues&lt;/option&gt;
      &lt;option&gt;New Age&lt;/option&gt;
      &lt;option&gt;Classical&lt;/option&gt;
      &lt;option&gt;Opera&lt;/option&gt;
    &lt;/select&gt;
  &lt;/p&gt;
  &lt;p&gt;&lt;input id="btn" type="button" value="Скільки ви вибрали?" /&gt;&lt;/p&gt;
&lt;/form&gt;

&lt;script&gt;
function howMany(selectObject) {
  var numberSelected = 0;
  for (var i = 0; i &lt; 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));
});
&lt;/script&gt;

</pre>

<h2 id="Оператор_do...while">Оператор <code>do...while</code></h2>

<p>Оператор {{jsxref("statements/do...while", "do...while")}} повторює дії поки певна умова не прийме значення false. Оператор <code>do...while</code> виглядатиме наступним чином:</p>

<pre class="syntaxbox notranslate">do
  statement
while (condition);
</pre>

<p><code>statement</code> завжди виконується принаймні один раз перед тим як умова буде перевірена (і потім знову поки умова не прийме false). Щоб виконати кілька виразів необхідно використати (<code>{ ... }</code>)  щоб згрупувати ці вирази.  Якщо <code>condition</code> приймає значення true, тіло цикла виконується повторно. В кінці всіх виконань вираз перевіряється. Коли вираз приймає false, ітерації цикла <code>do...while</code> зупиняються.</p>

<h3 id="Приклади"><strong>Приклади</strong></h3>

<p>В наступному прикладі цикл <code>do</code> ітерується принаймні один раз і повторюється доки i менша чим 5.</p>

<pre class="brush: js notranslate">var i = 0;
do {
  i += 1;
  console.log(i);
} while (i &lt; 5);</pre>

<h2 id="Оператор_while">Оператор <code>while</code></h2>

<p>Вираз {{jsxref("statements/while","while")}} виконується доти доки спеціальна умова приймає значення true. Вираз <code>while</code> виглядає наступним чином:</p>

<pre class="syntaxbox notranslate">while (condition)
  statement
</pre>

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

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

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

<h3 id="Приклад_1"><strong>Приклад 1</strong></h3>

<p>Наступний цикл <code>while</code> виконує цикл доти доки <code>n</code> менше трьох:</p>

<pre class="brush: js notranslate">var n = 0;
var x = 0;
while (n &lt; 3) {
  n++;
  x += n;
}
</pre>

<p>З кожною ітерацією, цикл збільшує <code>n,</code> та додає це до значення <code>x</code>. Тому, <code>x</code> і <code>n</code> приймають наступні значення:</p>

<ul>
 <li>Після першого виконання: <code>n</code> = 1 і<code>x</code> = 1</li>
 <li>Після другого виконання: <code>n</code> = 2 і <code>x</code> = 3</li>
 <li>Після третього виконання: <code>n</code> = 3 і <code>x</code> = 6</li>
</ul>

<p>Після третьої ітерації умова <code>n &lt; 3</code> більше не <code>true</code>, тому цикл припиняється.</p>

<h3 id="Приклад_2"><strong>Приклад 2</strong></h3>

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

<pre class="brush: js notranslate">while (true) {
  console.log('Hello, world!');
}</pre>

<h2 id="Оператор_labeled">Оператор <code>labeled</code></h2>

<p> {{jsxref("statements/label","label")}} забезпечує вираз з ідентифікатором, що дозволяє вам зсилатися до цього місця з будь-якого місця вашої програми. Наприклад, ви можете використати <code>label</code>, щоб позначити цикл, а потім скористатися операторами <code>break</code> або <code>continue,</code> щоб вказати, чи повинна програма переривати цей цикл або продовжувати його виконання.</p>

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

<pre class="syntaxbox notranslate">label :
   statement
</pre>

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

<h3 id="Приклад_3"><strong>Приклад</strong></h3>

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

<pre class="brush: js notranslate">markLoop:
while (theMark == true) {
   doSomething();
}</pre>

<h2 id="Оператор_break">Оператор <code>break</code></h2>

<p>Використовуйте оператор {{jsxref("statements/break","break")}} для виходу з циклу, <code>switch</code>, чи в поєднанні з оператором <code>label</code>.</p>

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

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

<pre class="syntaxbox notranslate">break [<em>label</em>];
</pre>

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

<h3 id="Приклад_1_2"><strong>Приклад 1</strong></h3>

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

<pre class="brush: js notranslate">for (var i = 0; i &lt; a.length; i++) {
  if (a[i] == theValue) {
    break;
  }
}</pre>

<h3 id="Приклад_2_Переривання_позначки"><strong>Приклад 2: </strong>Переривання позначки</h3>

<pre class="brush: js notranslate">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 &amp;&amp; x === 10) {
      break labelCancelLoops;
    } else if (z === 10) {
      break;
    }
  }
}
</pre>

<h2 id="Оператор_continue">Оператор <code>continue</code></h2>

<p>Оператор {{jsxref("statements/continue","continue")}} може використовуватись для перезапуску <code>while</code>, <code>do-while</code>, <code>for</code>, чи виразу <code>label</code>.</p>

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

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

<pre class="syntaxbox notranslate">continue [<em>label</em>];
</pre>

<h3 id="Приклад_1_3"><strong>Приклад 1</strong></h3>

<p>Наступний приклад показує цикл <code>while</code> з оператором <code>continue,</code> що виконується коли значення <code>i</code> дорівнює трьом. Тоді як, <code>n</code> приймає значення 1, 3, 7, 12.</p>

<pre class="brush: js notranslate">var i = 0;
var n = 0;
while (i &lt; 5) {
  i++;
  if (i == 3) {
    continue;
  }
  n += i;
  console.log(n);
}
//1,3,7,12


var i = 0;
var n = 0;
while (i &lt; 5) {
  i++;
  if (i == 3) {
     // continue;
  }
  n += i;
  console.log(n);
}
// 1,3,6,10,15
</pre>

<h3 id="Приклад_2_2"><strong>Приклад 2</strong></h3>

<p>Вираз позначений <code>checkiandj</code> містить вираз позначений <code>checkj</code>. Якщо <code>continue</code> зустрічається програма зупинить ітерацію <code>checkj</code> і почнеться з наступної ітерації. Кожен раз як <code>continue</code> зустрічається, <code>checkj</code> переітеровується поки вираз не поверне <code>false</code>. Коли <code>false</code> повертається, решта виразу <code>checkiandj</code> виконується і<code>checkiandj</code> переітеровується доки умова не поверне <code>false</code>. Коли<code>false</code> повертається програма продовжує  вираз слідуючого<code>checkiandj</code>.</p>

<p><code><font face="Arial, x-locale-body, sans-serif"><span style="background-color: #ffffff;">Якщо </span></font>continue</code> має label <em><code>checkiandj</code></em>, програма буде продовжуватись зверху вираза<em><code>checkiandj.</code></em></p>

<pre class="brush: js notranslate">var i = 0;
var j = 10;
checkiandj:
  while (i &lt; 4) {
    console.log(i);
    i += 1;
    checkj:
      while (j &gt; 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);
  }</pre>

<h2 id="Оператор_for...in">Оператор <code>for...in</code></h2>

<p>Оператор {{jsxref("statements/for...in","for...in")}} ітерує певну змінну по усіх перечислювальних властивостях об'єкта. Для кожної окремої властивості JavaScript виконує певний вираз. Оператор<code>for...in</code> виглядає наступним чином:</p>

<pre class="syntaxbox notranslate">for (variable in object) {
  statements
}
</pre>

<h3 id="Приклад_4"><strong>Приклад</strong></h3>

<p>Наступна функція приймає як аргумент об'єкт і ім'я об'єкта. Потім вона ітерує всі властивості і повертає рядок, де перераховуються всі імена властивостей та їх значення.</p>

<pre class="brush: js notranslate">function dump_props(obj, obj_name) {
  var result = '';
  for (var i in obj) {
    result += obj_name + '.' + i + ' = ' + obj[i] + '&lt;br&gt;';
  }
  result += '&lt;hr&gt;';
  return result;
}
</pre>

<p>Для об'єкту <code>car</code> з властивостями <code>make</code> і <code>model</code>, <code>result</code> результат буде:</p>

<pre class="brush: js notranslate">car.make = Ford
car.model = Mustang
</pre>

<h3 id="Масиви"><strong>Масиви</strong></h3>

<p>Також це може підходити для ітерування елементів {{jsxref("Array")}}, Оператор <strong>for...in</strong> буде повертати ім'я визначених користувачем властивостей і додаткових номерних індексів. Таким чином, краще використовувати традиційний цикл {{jsxref("statements/for","for")}} з номерними індексами коли ітеруєте масив, так як <strong>for...in</strong> ітерує властивості окрім елементів масиву, якщо ви змінюєте об'єкт масиву, наприклад, додаючи нові властивості чи методи.</p>

<h2 id="Оператор_for...of">Оператор <code>for...of</code></h2>

<p>Оператор {{jsxref("statements/for...of","for...of")}} створює цикл, що проходиться по <a href="/en-US/docs/Web/JavaScript/Guide/iterable">ітерованому об'єкту</a> (включно з {{jsxref("Array")}}, {{jsxref("Map")}}, {{jsxref("Set")}}, об'єкт {{jsxref("functions/arguments","arguments")}} і т.д), викликаючи в кожній ітерації функцію з виразами для значення кожної окремої властивості.</p>

<pre class="syntaxbox notranslate">for (<em>variable</em> of <em>object</em>) {
  <em>statement
</em>}</pre>

<p>Наступний приклад показує різницю між циклами <code>for...of</code> і {{jsxref("statements/for...in","for...in")}}. У той час як <code>for...in</code> проходиться по іменах властивостей, цикл <code>for...of</code> проходиться по значеннях цих властивостей:</p>

<pre class="brush:js notranslate">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
}
</pre>

<p>{{PreviousNext("Web/JavaScript/Guide/Control_flow_and_error_handling", "Web/JavaScript/Guide/Functions")}}</p>

<div id="gtx-trans" style="position: absolute; left: 29px; top: 10988px;">
<div class="gtx-trans-icon"></div>
</div>