Циклы. JavaScript

Циклы позволяют в зависимости от определенных условий выполнять некоторое действие множество раз. В JavaScript имеются следующие виды циклов:

for

for in

for of

while

do while

Цикл for

Цикл for имеет следующее формальное определение:

for ([инициализация счетчика]; [условие]; [изменение счетчика]){

    // действия

}

Например, используем цикл for для перебора элементов массива:

const people = ["Tom", "Alice", "Bob", "Sam"];

for (let i = 0; i
}

Первая часть объявления цикла - let i = 0 - создает и инициализирует счетчик - переменную i. И перед выполнением цикла ее значение будет равно 0. По сути это то же самое, что и объявление переменной.
Вторая часть - условие, при котором будет выполняться цикл. В данном случае цикл будет выполняться, пока значение i не достигнет величины, равной длине массива people. Получить длину массива можно с помощью свойства length: people.length.
Третья часть - приращение счетчика на единицу.
И так как в массиве 4 элемента, то блок цикла сработает 4 раза, пока значение i не станет равным people.length (то есть 4). И каждый раз это значение будет увеличиваться на 1. Каждое отдельное повторение цикла называется итерацией. Таким образом, в данном случае сработают 4 итерации.
А с помощью выражения people[i] мы сможем получить элемент массива для его последующего вывода в браузере.
Консольный вывод программы:
Tom
Alice
Bob
Sam
Необязательно увеличивать счетчик на единицу, можно производить с ним другие действия, например, уменьшать на единицу:

const people = ["Tom", "Alice", "Bob", "Sam"];

for (let i = people.length - 1; i >= 0; i--) {

    console.log(people[i]);

}

В данном случае массив выводится с конца, а перебор массива начинается с i = 3 до i = 0.

for in

Цикл for in предназначен для перебора массивов и объектов. Его формальное определение:

for (индекс in массив) {

    // действия

}

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

const people = ["Tom", "Alice", "Bob", "Sam"];

for(const index in people) {

    console.log(people[index]);

}

Цикл for of

Цикл for...of похож на цикл for...in и предназначен для перебора коллекций, например, массивов. Но в отличие от for...in он перебирает не индексы, а сами элементы массива:

const users = ["Tom", "Bob", "Sam"];

for (let val of users)

    console.log(val);

Текущий перебираемый элемент коллекции помещается в переменную val, значение которой затем выводится на консоль.

Цикл while

Цикл while выполняется до тех пор, пока некоторое условие истинно. Его формальное определение:

while (условие){

    // действия

}

Опять же выведем с помощью while элементы массива:

const people = ["Tom", "Alice", "Bob", "Sam"];

let index = 0;

while (index < people.length) {
    console.log(people[index]);

    index++;

}

Цикл while здесь будет выполняться, пока значение index не станет равным длине массива.

do while

В цикле do сначала выполняется код цикла, а потом происходит проверка условия в инструкции while. И пока это условие истинно, цикл повторяется. Например:

let x = 1;

do {

    console.log(x * x);

    x++;

}

while (x < 10)

Здесь код цикла сработает 9 раз, пока x не станет равным 10. При этом цикл do гарантирует хотя бы однократное выполнение действий, даже если условие в инструкции while не будет истинно.

Операторы continue и break

Иногда бывает необходимо выйти из цикла до его завершения. В этом случае мы можем воспользоваться оператором break:

const array = [ 1, 2, 3, 4, 5, 12, 17, 6, 7 ];

for (let i = 0; i < array.length; i++) {
    if (array[i] > 10)

        break;

    console.log(array[i]);

}

Данный цикл перебирает все элементы массива, однако последние четыре элемента не будут выведены в браузере, поскольку поверка if (array[i] > 10) прервет выполнение цикла с помощью оператора break, когда перебор массива дойдет до элемента 12.

Если нам надо просто пропустить итерацию, но не выходить из цикла, мы можем применять оператор continue:

const array = [ 1, 2, 3, 4, 5, 12, 17, 6, 7 ];

for (let i = 0; i < array.length; i++) {
    if (array[i] > 10)

        continue;

    console.log(array[i]);

}

В этом случае, если программа встретит в массиве число, больше 10, то это число не будет выводиться в браузере:

статья взята с сайта:

metanit.com

Обсуждение закрыто.