• Теория
  • Теория

Исправляем цикл

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

for (let i = 0; i < 5; i = i + 1) {
  console.log(i);
}
  1. Сначала сработает let i = 0;. Будет создана переменная i, равная 0.
  2. Затем выполнится проверка i < 5;. Так как i сейчас равна 0 и это значение меньше 5, условие вернёт true. Это значит, что цикл может продолжить свою работу и перейти к выполнению кода из тела цикла.
  3. Выполнится код из тела цикла. В нашем случае в консоль выведется 0 — текущее значение переменной i.
  4. Выполнится i = i + 1. Переменная i станет равна 1.
  5. Выполнится проверка i < 5;. Она снова вернёт true, так как 1 меньше 5.
  6. Снова выполнится тело цикла, затем значение i увеличится на единицу, и так дальше по кругу, пока условие i < 5; не вернёт false. Тогда цикл закончит свою работу.

Теперь посмотрим на пример из предыдущего задания. Почему сначала вывелась пустая страница?

На первом витке, или, по-научному, итерации цикла, переменная page ещё равна нулю. А увеличивается до единицы она уже после первой итерации. Если изменить исходное значение переменной page с 0 на 1, то проблема исчезнет.

А почему страниц шесть, а не семь? Разберём цикл по шагам:

Подготовка: totalPages = 7; page = 0
1 итерация: page = 0; 0 < 7? да! Вывод страницы 0; page = 1
2 итерация: page = 1; 1 < 7? да! Вывод страницы 1; page = 2
3 итерация: page = 2; 2 < 7? да! Вывод страницы 2; page = 3
4 итерация: page = 3; 3 < 7? да! Вывод страницы 3; page = 4
5 итерация: page = 4; 4 < 7? да! Вывод страницы 4; page = 5
6 итерация: page = 5; 5 < 7? да! Вывод страницы 5; page = 6
7 итерация: page = 6; 6 < 7? да! Вывод страницы 6; page = 7
8 итерация: page = 7; 7 < 7? нет! Завершаем цикл!
 

Для получения седьмой страницы нужно изменить сравнение с «меньше» на «меньше или равно». В этом случае проверка на восьмом витке цикла сработает и выведется седьмая страница.

8 итерация: page = 7; 7 <= 7? да! Вывод страницы 7; page = 8
9 итерация: page = 8; 8 <= 7? нет! Завершаем цикл!

Подытожим: чтобы всё печаталось, как надо, нужно начать отсчёт со страницы номер 1 и использовать знак <= в условии, чтобы включить последнюю страницу в расчёт.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 5520 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Циклы» тренажёра «Программирование на JavaScript — основы языка» можно после регистрации и оформления подписки.