Циклы

Введение в циклы

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

Зачем это нужно - представьте, что вам нужно возвести в квадрат 100 элементов массива. Если обращаться к каждому элементу отдельно по его ключу - это займет 100 строчек кода, и для того, чтобы написать этот код, нужно будет потратить довольно много времени.

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

Циклы могут повторять некоторый код заданное количество раз. Каждый такой проход цикла называется итерацией цикла.

В циклах часто используются специальные переменные, которые каждую итерацию увеличивают свое значение на единицу. Такие переменные называются счетчиками циклов. Счетчики используются для того, чтобы подсчитывать, сколько раз выполнился цикл. Для счетчиков принято использовать буквы i, j и k.

Перебор массива циклом for-of

Цикл for-of позволяет последовательно перебирать элементы массивов. Он имеет следующий синтаксис:

for (let переменная для элемента of массив)
{
/* В переменную для элемента по очереди
будут попадать элементы перебираемого массива. */
}

Давайте посмотрим на примере. Пусть дан следующий массив:

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

Переберем этот массив циклом и выведем его элементы в консоль:

for (let elem of arr)
{
console.log(elem);
}

Перебор объекта циклом for-in

Для перебора объектов предназначен цикл for-in. Он имеет следующий синтаксис:

for (let переменнаяДляКлюча in объект) { }

В переменнуюДляКлюча по очереди будут попадать ключи перебираемого объекта. Давайте попробуем на каком-нибудь примере. Пусть у нас есть вот такой объект:

let obj = {a: 1, b: 2, c: 3};

Давайте с помощью цикла for-in выведем ключи этого объекта:

for (let key in obj)
{
console.log(key); // выведет 'a', 'b', 'c'
}

А теперь выведем элементы:

for (let key in obj)
{
console.log(obj[key]); // выведет 1, 2, 3
}

Цикл while

Цикл while будет выполняться до тех пор, пока истинно выражение, переданное ему параметром. Он позволяет выполнять произвольное количество итераций. Вот его синтаксис:

while ( пока выражение истинно )
{
выполняем этот код циклически;
в начале каждого цикла проверяем выражение в круглых скобках
}

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

Давайте для примера последовательно выведем с помощью цикла while числа от одного до пяти:

let i = 1;

while (i <= 5)
{
console.log(i);
i++;
}

А теперь будем делить заданное число на 2 столько раз, пока результат не станет меньше 10:

let num = 500;

while (num > 10)
{
num = num / 2;
}
console.log(num); // результат

Цикл for

Цикл for позволяет повторить некоторый код заданное количество раз. Вот его синтаксис:

for ( начальные команды; условие окончания; команды после прохода )
{
тело цикла
}

Начальные команды - это то, что выполнится перед стартом цикла. Они выполнятся только один раз. Обычно там размещают начальные значения счетчиков, например: i = 0.

Условие окончания цикла - это условие, при котором цикл будет крутится, пока оно истинное, например: i <= 10.

Команды после прохода цикла - это команды, которые будут выполнятся каждый раз при окончании прохода цикла. Обычно там увеличивают счетчики, например: i++.

Давайте с помощью цикла for выведем последовательно числа от 1 до 9:

for (let i = 1; i <= 9; i++)
{
console.log(i); // выведет 1, 2... 9
}

А теперь будем увеличивать счетчик не на 1, а на 2:

for (let i = 1; i <= 9; i += 2)
{
console.log(i); // выведет 1, 3, 5...
}

Можно выполнить обратный отсчет:

for (let i = 10; i > 0; i--)
{
console.log(i); // выведет 10, 9, 8...
}

Инструкция break

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

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

for (let elem of arr)
{
console.log(elem);
}

Пусть перед нами стоит задача определить, есть ли в массиве число 3. Если есть - выведем в консоль слово 'есть' (а если нет - ничего не будем делать).

Решим нашу задачу:

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

for (let elem of arr)
{
if (elem === 3) {
console.log('есть');
} }

Задача решена, однако, есть проблема: после того, как число 3 уже найдено, массив все равно продолжает бессмысленно перебираться дальше, тратя ценные ресурсы процессора и замедляя работу нашего скрипта.

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

Итак, давай завершим цикл, как только нам встретится число 3:

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

for (let elem of arr)
{
if (elem == 3) {
console.log('есть');
break; // выйдем из цикла
} }

Инструкция break может завершать любые циклы: обычный for, while и так далее.

Инструкция continue

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

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

Как вы видите, строчка console.log(result) повторяется два раза. Давайте вынесем ее за if, вот так:

Теперь наш скрипт, однако, работает немного не так: получится, что и для обычных элементов, не обработанных через наш if будет выполнятся вывод переменной result в консоль, что по условию нашей задачи нам не нужно.

Поправим проблему, добавив к нашему if еще условие else, которое будет срабатывать для элементов, не делящихся на 2 и 3, и вызовем там инструкцию continue, которая сразу же будет перебрасывать нас на новую итерацию цикла:

Объекты Закончить