Цикл for

For - это оператор в JavaScript для создания цикла, который состоит из трёх необязательных условий. Цикл for считается более сложным чем while, но тем не менее более распространен.

Синтаксис for

    for (начальное выражение; условие; шаг) {
        // инструкция (тело цикла)
    }           
  

Начальное выражение - условие выполняется один раз при входе в цикл и обычно используется для инициализации счетчика.

Условие - проверяется при каждой итерации. Если условие true происходит запуск цикла, при false остановка.

Тело цикла - код из тела цикла выполняется при каждой итерации до тех пор пока условие true.

Шаг - выражение выполняется после исполнения кода из тела цикла при каждой итерации перед проверкой условия.

Пример №1

    
    for (let n = 0; n < 5; n++) {
        console.log(n);
    }         
    

let n = 0 - выполняется один раз при входе в цикл, переменной n задается значение 0.

n < 5 - далее проверяется условие, где n должно быть меньше 5, если это true, тогда поток выполнения кода идет дальше.

console.log(n) - после каждой итерации в console выводится значение переменной n, на первом этапе это 0.

n++ - после выполнения тела цикла n увеличивается на единицу.

Далее процесс происходит заново, до тех пор пока n не станет равна 5, тогда цикл завершится. Результатом скрипта является вывод в console цифр 0, 1, 2, 3, 4.

Пример №2

    
    for (let i = 1, n = 0; i <= 10; i++, n++) {
        console.log('Итерация № ' + i + ' = ' + n);
    }
    

В первом выражении цикла for можно объявить несколько переменных, в этом примере это i и n, но их может быть и больше. В третьем выражении ситуация сходная с каждым шагом i и n увеличиваются на единицу, при необходимости можно добавить операции и над другими переменными.

Необязательные элементы в цикле for

Все три выражения в цикле for расположенные в круглых скобках необязательны и могут быть пропущены.

Пример №3

    
    let n = 0;
    for (; n <= 10; n++) {
        console.log(n);
    }
    

Такой код отработает идентично, тому, где переменная n была бы объявлена в первом выражении for, а не перед циклом.

Пример №4

    
    let n = 0;
    for (; n <= 10; ) {
        console.log(n++);
    }          
    

В этом случае шаг был перенесен в тело цикла.

Пример №5

    
    let n = 0;
    for (; ; ) {
        console.log(n++);
    }        
    

Здесь отсутствуют все три выражения и это тоже не ошибка, правда это делает цикл бесконечным. В таком случае можно предусмотреть окончание цикла с помощью директивы break.

Прерывание цикла - break

Директива break позволяет прервать цикл for в любой момент

Пример №6

    
    let n = 0;
    for (; ; ) {
        console.log(n++);
        if (n > 10) break;
    }          
    

При каждой итерации в теле цикла происходит проверка if (n > 10) и когда n станет больше 10, цикл прервется.

Пример №7

    
    for (var n = 0; n < 8; n++) {
        if (n === 5) break;
    }
    alert(n);
    

Здесь более наглядно можно увидеть принцип работы break. Как только n достигнет пяти, цикл прервется и в модальном окне появится результат. В свою очередь условие n < 8 будет проигнорировано.

Завершение текущей итерации - continue

Директива continue применяется в том случае, если необходимо прервать не весь цикл, а одну или более итераций.

Пример №8

    
    for (let n = 0; n < 10; n++) {
        if (n % 2 == 0) continue;
        alert(n);
    }         
    

Данный скрипт будет выводить по порядку в модальном окне только нечетные числа, когда попадается четное число, срабатывает continue, который завершает данную итерацию.

Метки для continue и break

При вложенности циклов директивы continue и break, могут не помочь решить нужную задачу, в этом случае на помощь приходят метки. Допустим необходимо при определенных условиях выйти из всех уровней цикла.

Пример №9

    
    let n, i;
    cancelLoops: for (n = 0; n < 4; n++) {
        for (i = 0; i < 4; i++) {
            if (n === 3 && i === 3) {
                break cancelLoops;
            }
            console.log('n = ' + n + ', i = ' + i);
        }
    }        
    

Метка cancelLoops обозначает верхний цикл и при достижении условия (n === 3 && i === 3) команда break cancelLoops его прерывает

Пример №10

    
    passLoop: for (n = 0; n < 4; n++) {
        for (i = 0; i < 4; i++) {
            if (n === 2 && i === 2) {
                continue passLoop;
            }
            console.log('n = ' + n + ', i = ' + i);
        }
    }         
    

При достижении условия (n === 2 && i === 2) команда continue passLoop завершает текущую итерацию и переносит поток выполнения кода в начало верхнего цикла.

Итого

Цикл for состоит из трех необязательных выражений и тела цикла. Для того, чтобы прервать исполнение for используется команда break, для окончания итерации continue. При работе с вложенными циклами можно решать задачи с помощью меток, которые работают, как с continue, так и с break.