Поток управления: if, else, switch, for, while
Создавайте ветвления с помощью if/else и switch, циклы с помощью for и while, а также используйте break и continue для управления итерациями.
«Поток управления: if, else, switch, for, while» — бесплатный урок Frontend Academy на CoddyKit. Это урок 4 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения Frontend Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс Frontend Academy содержит 4 уроков всего.
Что такое управление потоком?
Управление потоком определяет, какой код выполняется и сколько раз. JavaScript предоставляет условные конструкции (if/else, switch) и циклы (for, while, do/while), чтобы направлять выполнение на основе условий и данных.
Условия if / else if / else
Самая базовая условная конструкция. Условие в скобках вычисляется как истинное или ложное значение. Несколько условий объединяются в цепочку с помощью else if. Последний else служит запасным вариантом для всех остальных случаев.
const score = 75;
if (score >= 90) {
console.log('A');
} else if (score >= 80) {
console.log('B');
} else if (score >= 70) {
console.log('C');
} else {
console.log('F');
}Тернарный оператор
Тернарный оператор — это компактная запись условия if/else в одну строку: condition ? trueValue : falseValue. Используйте его для простых присваиваний и выражений JSX. Избегайте вложенных тернарных операторов — они быстро становятся нечитаемыми.
const label = age >= 18 ? 'Adult' : 'Minor';
const icon = isActive ? '🟢' : '🔴';
// In JSX:
<span>{isLoggedIn ? 'Logout' : 'Login'}</span>Оператор switch
switch сравнивает значение с несколькими вариантами, используя строгое равенство. После каждого варианта используйте break, чтобы выполнение не переходило к следующему варианту. default обрабатывает значения, для которых не нашлось совпадения.
const day = 'Monday';
switch (day) {
case 'Saturday':
case 'Sunday':
console.log('Weekend');
break;
case 'Monday':
console.log('Start of work week');
break;
default:
console.log('Weekday');
}Цикл for
Классический цикл for в стиле C: инициализация; условие; увеличение. Лучше всего подходит для известного числа повторений или перебора массивов по индексу.
for (let i = 0; i < 5; i++) {
console.log(i); // 0 1 2 3 4
}
// Iterate array by index:
const names = ['Alice', 'Bob', 'Carol'];
for (let i = 0; i < names.length; i++) {
console.log(names[i]);
}Цикл for...of
for...of перебирает значения любого итерируемого объекта (массивов, строк, Map и Set). Он удобнее цикла for с индексом, если сам индекс Вам не нужен.
const fruits = ['apple', 'banana', 'cherry'];
for (const fruit of fruits) {
console.log(fruit);
}
for (const char of 'hello') {
console.log(char); // h e l l o
}Цикл for...in
for...in перебирает перечисляемые ключи свойств объекта. Не используйте его для массивов — вместо этого применяйте for...of или методы массивов.
const user = { name: 'Alice', age: 30, role: 'admin' };
for (const key in user) {
console.log(`${key}: ${user[key]}`);
}Цикл while
Цикл while выполняется, пока его условие истинно. Используйте его, когда число повторений заранее неизвестно — например, чтобы считывать ввод, пока пользователь не введёт допустимое значение.
let attempts = 0;
let success = false;
while (!success && attempts < 3) {
// try something
attempts++;
success = Math.random() > 0.5; // simulate
}
console.log(`Done in ${attempts} attempts`);Цикл do...while
do...while выполняет тело цикла как минимум один раз, а затем проверяет условие. Он полезен, когда тело цикла должно выполниться до того, как Вы сможете проверить условие выхода.
let input;
do {
input = prompt('Enter a number:');
} while (isNaN(Number(input)));break и continue
break немедленно завершает текущий цикл. continue пропускает остаток текущей итерации и переходит к следующей. Оба оператора работают в циклах for, while и do/while.
for (let i = 0; i < 10; i++) {
if (i === 3) continue; // skip 3
if (i === 7) break; // stop at 7
console.log(i); // 0 1 2 4 5 6
}Вычисление с коротким замыканием
&& возвращает первое ложное значение или последнее значение. || возвращает первое истинное значение или последнее значение. ?? (оператор объединения при null или undefined) возвращает правую часть, только если левая равна null или undefined.
const name = user && user.name; // null if user is falsy
const label = name || 'Anonymous'; // 'Anonymous' if name is falsy
const port = config.port ?? 3000; // 3000 only if port is null/undefinedБыстрая проверка
Какой цикл гарантированно выполнит своё тело как минимум один раз?
Повторение: управление выполнением в JavaScript
if/else — для ветвления. switch — для нескольких отдельных значений. Цикл for — для известного числа повторений. for...of — для итерируемых объектов. while — для неизвестного числа повторений. do...while — для случаев, когда нужно выполнить тело хотя бы один раз. break завершает циклы. continue пропускает итерации. Операторы короткого замыкания позволяют кратко записывать условия.
Часто задаваемые вопросы
Урок «Поток управления: if, else, switch, for, while» бесплатный?
Да — полный текст урока «Поток управления: if, else, switch, for, while» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс Frontend Academy, подпишись на CoddyKit PRO. Курс Frontend Academy содержит 4 уроков всего.
Чему я научусь в уроке «Поток управления: if, else, switch, for, while»?
Создавайте ветвления с помощью if/else и switch, циклы с помощью for и while, а также используйте break и continue для управления итерациями. Ты практикуешь Frontend Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать Frontend Academy?
Предыдущий опыт не требуется. Frontend Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 4 из 4.
Сколько времени занимает урок «Поток управления: if, else, switch, for, while»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке Frontend Academy?
Да. Каждый урок Frontend Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Переменные: let, const, var и область действия
- Типы данных: string, number, boolean, null, undefined
- Функции: объявления, выражения и стрелочные функции
- Поток управления: if, else, switch, for, while