Розділ 7. Цикли

Для виконання дії певну кількість разів використовують цикли. Існують наступні види циклів:

1. for - має наступну конструкцію for (з чого почати ; умова при якій виконати дію ; крок) { дія } :

'use strict';

var arr = [1, 2, 3, 4, 5];
var i = 0;

for (i; i < arr.length; i++) {
    console.log(arr[i]);        // 1 2 3 4 5
}

В даному прикладі ми маємо масив arr з певними даними. Створюємо змінну і та збільшуючи її на 1 ( "++" - означає збільшення числа на 1 ) виводимо у консоль браузера кожен елемент масиву з індексом і, тобто arr[0], arr[1], arr[2] і т.д. поки існує умова що і менше за довжину масиву arr.length, яка дорівнює в даному прикладі 5.

Для спрощення, ініціацію змінної вписують першим аргументом :

'use strict';

var arr = [1, 2, 3, 4, 5];

for (var i = 0; i < arr.length; i++) {
    console.log(arr[i]);        // 1 2 3 4 5
}

2. while - по змісту такий же як і попередній цикл і має наступну конструкцію з чого почати; while (умова при якій виконати дію) { дія; крок } :

'use strict';

var arr = [1, 2, 3, 4, 5];

// цикл for
var i = 0;

for (i; i < arr.length; i++) {
    console.log(arr[i]);        // 1 2 3 4 5
}

// цикл while
var j = 0;

while (j < arr.length) {
    console.log(arr[j]);        // 1 2 3 4 5
    j++;
}

Конструкції схожі проте на практиці частіше використовують for за рахунок більш зрозумілого коду, проте while відомий через інше своє написання :

3. do while - конструкція даного циклу дозволяє в любій ситуації хоч раз але виконати дію, незалежно від умови do { дія; крок } while (умова при якій виконати дію):

'use strict';

var arr = [1, 2, 3, 4, 5];

var i = 0;

do {
    console.log(arr[i]);        // 1 2 3 4 5
    i++;
} while (i < arr.length);

4. for ... in - перебирання масиву по індексам, а об'єкта по його ключам :

'use strict';

var arr = [{
    name: 'test1',
    age: 11
},{
    name: 'test2',
    age: 14
}];

// у звичайному масиві повертає індекси

for (var el in arr) {
    console.log (el); // 0, 1
}

// в об'єкті повертає назви ключів

for (var el in arr[0]) {
    console.log (el); // name, age
}

5. for ... of - перебирання масиву по значенням елементів :

'use strict';

var arr = [1, 5, 18, 26];

for (var el of arr) {
    console.log (el); // 1 5 18 26
}

6. forEach - популярний метод для перебирання масиву з допомогою циклу. 5 та 6 спосіб по суті є ідентичними, так як обидва можуть повертати значення та індекс і робити зупинку в циклі при певній умові, тому який з них краще - питання чисто суб'єктивне, бо ні в швидкості, ні в результатах не відрізняються :

'use strict';

var arr = [1, 5, 18, 26];

for (var i of arr) {
    console.log (i);                   // 1 5 18 26
}

arr.forEach(function (el) {
    console.log(el);                   // 1 5 18 26
})

// з допомогою стрілочної функції

arr.forEach(el => console.log(el));    // 1 5 18 26

ПОПЕРЕДЖЕННЯ : цикли хоч і прості в розумінні проте доволі небезпечні тим, що якщо Ви не поставите вірну умову, то можна зробити цикл безкінечним (ДАНИЙ ПРИКЛАД НЕ ЗАВАНТАЖУВАТИ! ЛИШЕ ДЛЯ ОЗНАЙОМЛЕННЯ) :

'use strict';

var arr = [1, 5, 18, 26];

for (var i = 1; i > 0; i++) {    // i завжди буде більше 0
    console.log(i);
}

Отож ми дізнались, які бувають види циклів і що вони хоч дуже і допомагають проте можуть і зашкодити при недостатній увазі до умов. У наступному розділі ми розглянемо з Вами, що таке область видимості.