Условия и циклы

Основы фронтенд разработки

Условия и циклы

Продолжительность: 20 мин

До этого момента наш код выполнялся строго по порядку — строка за строкой. Но реальные программы устроены иначе: они принимают решения и повторяют действия. Для этого существуют условные конструкции и циклы.

Условие if / else

if позволяет выполнить блок кода только при выполнении условия:

const temperature = -5; if (temperature < 0) { console.log('На улице мороз, одевайтесь теплее!'); }
js

С помощью else можно описать, что делать, если условие не выполнилось:

if (temperature < 0) { console.log('Мороз'); } else { console.log('Тепло'); }
js

else if добавляет дополнительные ветки проверки:

if (temperature < -10) { console.log('Сильный мороз'); } else if (temperature < 0) { console.log('Лёгкий мороз'); } else { console.log('Плюсовая температура'); }
js

Тернарный оператор

Для простых условий, где нужно выбрать одно из двух значений, удобен тернарный оператор. Это сокращённая запись if/else:

const label = temperature < 0 ? 'холодно' : 'тепло'; console.log(label);
js

Синтаксис: условие ? значение_если_true : значение_если_false. Тернарный оператор хорош для коротких выражений — не стоит использовать его для сложной логики с несколькими ветками.

switch / case

Когда нужно сравнить одну переменную с несколькими конкретными значениями, switch читается нагляднее, чем цепочка else if:

const day = 'понедельник'; switch (day) { case 'суббота': case 'воскресенье': console.log('Выходной'); break; case 'понедельник': console.log('Начало недели'); break; default: console.log('Рабочий день'); }
js

Важный момент: после каждого case нужно писать break, иначе выполнение «провалится» в следующий case. Блок default выполняется, если ни один case не совпал — это аналог else.

Цикл for

for — самый базовый цикл. Используется, когда заранее известно, сколько раз нужно повторить действие:

for (let i = 0; i < 5; i++) { console.log(`Итерация ${i}`); }
js

В скобках три части, разделённые точкой с запятой:

  1. инициализация (let i = 0) — выполняется один раз перед стартом;
  2. условие (i < 5) — проверяется перед каждой итерацией;
  3. шаг (i++) — выполняется после каждой итерации.

Цикл while

while повторяет блок, пока условие истинно. Удобен, когда количество итераций заранее неизвестно:

let attempts = 0; while (attempts < 3) { console.log(`Попытка ${attempts + 1}`); attempts++; }
js

Следите за тем, чтобы условие рано или поздно стало ложным — иначе получится бесконечный цикл, который зависнет браузер.

for...of — перебор массива

Для перебора элементов массива (и других итерируемых структур) удобен for...of:

const attractions = ['Эрмитаж', 'Петергоф', 'Исаакиевский собор']; for (const attraction of attractions) { console.log(attraction); }
js

Намного чище и понятнее, чем классический for с индексами, когда нужен только элемент, а не его позиция.

for...in — перебор ключей объекта

for...in перебирает ключи объекта:

const city = { name: 'Санкт-Петербург', foundedYear: 1703, population: 5600000, }; for (const key in city) { console.log(`${key}: ${city[key]}`); } // name: Санкт-Петербург // foundedYear: 1703 // population: 5600000
js

break и continue

break прерывает цикл досрочно, continue — пропускает текущую итерацию и переходит к следующей:

for (let i = 0; i < 10; i++) { if (i === 3) continue; // пропустить 3 if (i === 7) break; // остановиться на 7 console.log(i); } // 0, 1, 2, 4, 5, 6
js

В следующем уроке поговорим о том, как JavaScript позволяет создавать свои типы данных с помощью конструкторов и классов.

Это платный урок

Купите полный доступ к курсу чтобы просматривать данный контент

Основы фронтенд разработки

Полный курс по основам веб-разработки с нуля: HTML, CSS и JavaScript. Вы сверстаете адаптивный лендинг, освоите анимации и работу с DOM, а в финале соберёте самостоятельный проект — интерактивный путеводитель по Санкт-Петербургу.

4990 Скидка 20%
3990

Безопасные платежи обрабатываются сервисом Юкасса

Комментарии

Войдите, чтобы оставить комментарий