1 added
1 removed
Original
2026-01-01
Modified
2026-02-21
1
<p><a>#База знаний</a></p>
1
<p><a>#База знаний</a></p>
2
<ul><li>17 июн 2025</li>
2
<ul><li>17 июн 2025</li>
3
<li>0</li>
3
<li>0</li>
4
</ul><p>Объясняем на практике для тех, кто только начал изучать код.</p>
4
</ul><p>Объясняем на практике для тех, кто только начал изучать код.</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
5
<p>Иллюстрация: Polina Vari для Skillbox Media</p>
6
<p>Автор статей о программировании. 14 лет в IT. Умеет рассказывать о технологиях простыми словами. Автор спецпроекта Advertising for Social Change.</p>
6
<p>Автор статей о программировании. 14 лет в IT. Умеет рассказывать о технологиях простыми словами. Автор спецпроекта Advertising for Social Change.</p>
7
<p>При разработке веб-приложений встречаются задачи, когда нужно выполнить одно и то же действие несколько раз подряд. Например, вывести на экран все элементы массива, перебрать список пользователей или посчитать сумму чисел от 1 до 100. Циклы в JavaScript позволяют автоматизировать такие рутинные операции и решать их гораздо быстрее, чем при копировании одних и тех же строчек кода.</p>
7
<p>При разработке веб-приложений встречаются задачи, когда нужно выполнить одно и то же действие несколько раз подряд. Например, вывести на экран все элементы массива, перебрать список пользователей или посчитать сумму чисел от 1 до 100. Циклы в JavaScript позволяют автоматизировать такие рутинные операции и решать их гораздо быстрее, чем при копировании одних и тех же строчек кода.</p>
8
<p><strong>Содержание</strong></p>
8
<p><strong>Содержание</strong></p>
9
<ul><li><a>Что такое циклы и зачем они нужны</a></li>
9
<ul><li><a>Что такое циклы и зачем они нужны</a></li>
10
<li><a>Самые популярные циклы - while и for</a></li>
10
<li><a>Самые популярные циклы - while и for</a></li>
11
<li><a>В чём особенности циклов for…of и for…in</a></li>
11
<li><a>В чём особенности циклов for…of и for…in</a></li>
12
<li><a>Как прервать цикл и перезапустить новую итерацию</a></li>
12
<li><a>Как прервать цикл и перезапустить новую итерацию</a></li>
13
<li><a>Типичные ошибки: как их избежать</a></li>
13
<li><a>Типичные ошибки: как их избежать</a></li>
14
<li><a>Советы по выбору подходящего цикла и работе с ним</a></li>
14
<li><a>Советы по выбору подходящего цикла и работе с ним</a></li>
15
</ul><p>Циклы - это конструкции, которые помогают повторять заданный участок кода столько раз, сколько нужно. Они экономят время, делают программу короче и позволяют автоматизировать рутинные действия.</p>
15
</ul><p>Циклы - это конструкции, которые помогают повторять заданный участок кода столько раз, сколько нужно. Они экономят время, делают программу короче и позволяют автоматизировать рутинные действия.</p>
16
<p>Всё сводится к простой идее: пока условие цикла истинно, код внутри него выполняется. Когда условие перестаёт быть истинным, цикл завершается и выполнение скрипта продолжается.</p>
16
<p>Всё сводится к простой идее: пока условие цикла истинно, код внутри него выполняется. Когда условие перестаёт быть истинным, цикл завершается и выполнение скрипта продолжается.</p>
17
<p>Пример:</p>
17
<p>Пример:</p>
18
for (let i = 0; i < 5; i++) { // Условие цикла console.log(i); // Вывод в консоль }<p>Что делает этот код:</p>
18
for (let i = 0; i < 5; i++) { // Условие цикла console.log(i); // Вывод в консоль }<p>Что делает этот код:</p>
19
<ul><li>создаёт переменную i со значением 0;</li>
19
<ul><li>создаёт переменную i со значением 0;</li>
20
<li>проверяет: если i меньше 5, выводит переменную в консоль;</li>
20
<li>проверяет: если i меньше 5, выводит переменную в консоль;</li>
21
<li>увеличивает i на 1 и повторяет;</li>
21
<li>увеличивает i на 1 и повторяет;</li>
22
<li>как только i станет 5, цикл остановится.</li>
22
<li>как только i станет 5, цикл остановится.</li>
23
</ul><p>Результат:</p>
23
</ul><p>Результат:</p>
24
0 1 2 3 4<p>В JavaScript есть несколько видов циклов. Они подходят для разных задач, но цель у них общая - повторять действия до тех пор, пока выполняется заданное условие. Пять основных видов циклов:</p>
24
0 1 2 3 4<p>В JavaScript есть несколько видов циклов. Они подходят для разных задач, но цель у них общая - повторять действия до тех пор, пока выполняется заданное условие. Пять основных видов циклов:</p>
25
<strong>Название</strong><strong>Когда используется</strong>forКогда вы знаете, сколько повторов нужноwhileКогда нужно повторять до тех пор, пока условие верноdo...whileКогда нужно хотя бы один раз выполнить кодfor...ofКогда нужно пройтись по значениям массива или по символам строкиfor...inКогда нужно пройтись по свойствам объекта<p>Зачем нужны циклы на практике</p>
25
<strong>Название</strong><strong>Когда используется</strong>forКогда вы знаете, сколько повторов нужноwhileКогда нужно повторять до тех пор, пока условие верноdo...whileКогда нужно хотя бы один раз выполнить кодfor...ofКогда нужно пройтись по значениям массива или по символам строкиfor...inКогда нужно пройтись по свойствам объекта<p>Зачем нужны циклы на практике</p>
26
<ul><li><strong>Перебор массивов и объектов.</strong>Отображение списка сообщений в чате, подсчёт общего рейтинга отзывов, проверка всех элементов на соответствие условию.</li>
26
<ul><li><strong>Перебор массивов и объектов.</strong>Отображение списка сообщений в чате, подсчёт общего рейтинга отзывов, проверка всех элементов на соответствие условию.</li>
27
<li><strong>Автоматизация рутинных действий.</strong>Вместо копирования одинакового кода несколько раз вы пишете всего пару строк - это упрощает сопровождение и ускоряет разработку.</li>
27
<li><strong>Автоматизация рутинных действий.</strong>Вместо копирования одинакового кода несколько раз вы пишете всего пару строк - это упрощает сопровождение и ускоряет разработку.</li>
28
<li><strong>Чтение внешних данных.</strong>При работе с данными, полученными с сервера, вы можете последовательно обойти все записи и выполнить нужные действия (например, вывести их на страницу).</li>
28
<li><strong>Чтение внешних данных.</strong>При работе с данными, полученными с сервера, вы можете последовательно обойти все записи и выполнить нужные действия (например, вывести их на страницу).</li>
29
<li><strong>Тестирование и прототипирование.</strong>Циклы помогут быстро "сгенерировать" тестовые данные или провести однотипные проверки.</li>
29
<li><strong>Тестирование и прототипирование.</strong>Циклы помогут быстро "сгенерировать" тестовые данные или провести однотипные проверки.</li>
30
</ul><p>С теорией разобрались, пройдёмся по основным типам циклов в JavaScript.</p>
30
</ul><p>С теорией разобрались, пройдёмся по основным типам циклов в JavaScript.</p>
31
<p>Циклы while и for очень похожи друг на друга - оба повторяют участок кода несколько раз. Цикл while считается более базовым: он состоит из исполняемого кода и условия. А цикл for - это удобная надстройка над while, которая позволяет перебрать что-то определённое количество раз.</p>
31
<p>Циклы while и for очень похожи друг на друга - оба повторяют участок кода несколько раз. Цикл while считается более базовым: он состоит из исполняемого кода и условия. А цикл for - это удобная надстройка над while, которая позволяет перебрать что-то определённое количество раз.</p>
32
<p>Цикл while удобен, когда заранее неизвестно точное количество повторений, но известно условие, при котором цикл должен продолжать работу.</p>
32
<p>Цикл while удобен, когда заранее неизвестно точное количество повторений, но известно условие, при котором цикл должен продолжать работу.</p>
33
while (условие) { // Код, который будет выполняться }<p>1. Проверяется условие. Если оно истинно, цикл запускается.</p>
33
while (условие) { // Код, который будет выполняться }<p>1. Проверяется условие. Если оно истинно, цикл запускается.</p>
34
<p>2. Выполняется код внутри цикла.</p>
34
<p>2. Выполняется код внутри цикла.</p>
35
<p>3. После выполнения снова проверяется условие:</p>
35
<p>3. После выполнения снова проверяется условие:</p>
36
<ul><li>Если оно истинно, код запускается снова.</li>
36
<ul><li>Если оно истинно, код запускается снова.</li>
37
<li>Если оно ложно, цикл останавливается, а управление передаётся следующей части программы.</li>
37
<li>Если оно ложно, цикл останавливается, а управление передаётся следующей части программы.</li>
38
</ul><p>Важно следить за условием: если оно никогда не становится ложным, цикл станет бесконечным.</p>
38
</ul><p>Важно следить за условием: если оно никогда не становится ложным, цикл станет бесконечным.</p>
39
<p>Предположим, вы делаете простой to-do-список задач. У вас есть массив с задачами, и нужно вывести все задачи на страницу.</p>
39
<p>Предположим, вы делаете простой to-do-список задач. У вас есть массив с задачами, и нужно вывести все задачи на страницу.</p>
40
const tasks = ['Купить продукты', 'Позвонить маме', 'Подготовить проект']; // Список задач в массиве let index = 0; // Начальный индекс элемента массива while (index < tasks.length) { // Условие: пока не дойдём до конца массива console.log(`Задача №${index + 1}: ${tasks[index]}`); index++; } // Вывод в консоли: // Задача №1: Купить продукты // Задача №2: Позвонить маме // Задача №3: Подготовить проект<p>В этом примере вы перебираете список задач из массива и выводите каждую задачу с её номером. Подобный подход используется при выводе элементов списка на веб-странице или в меню приложений.</p>
40
const tasks = ['Купить продукты', 'Позвонить маме', 'Подготовить проект']; // Список задач в массиве let index = 0; // Начальный индекс элемента массива while (index < tasks.length) { // Условие: пока не дойдём до конца массива console.log(`Задача №${index + 1}: ${tasks[index]}`); index++; } // Вывод в консоли: // Задача №1: Купить продукты // Задача №2: Позвонить маме // Задача №3: Подготовить проект<p>В этом примере вы перебираете список задач из массива и выводите каждую задачу с её номером. Подобный подход используется при выводе элементов списка на веб-странице или в меню приложений.</p>
41
<p>Разберём этот пример построчно.</p>
41
<p>Разберём этот пример построчно.</p>
42
<p><strong>1. Объявление массива.</strong></p>
42
<p><strong>1. Объявление массива.</strong></p>
43
const tasks = ['Купить продукты', 'Позвонить маме', 'Подготовить проект'];<p>Мы создаём массив (список) задач. У него три элемента. Каждый элемент - это строка, то есть текст с названием задачи. У каждого элемента есть индекс:</p>
43
const tasks = ['Купить продукты', 'Позвонить маме', 'Подготовить проект'];<p>Мы создаём массив (список) задач. У него три элемента. Каждый элемент - это строка, то есть текст с названием задачи. У каждого элемента есть индекс:</p>
44
<ul><li>tasks[0] - "Купить продукты".</li>
44
<ul><li>tasks[0] - "Купить продукты".</li>
45
<li>tasks[1] - "Позвонить маме".</li>
45
<li>tasks[1] - "Позвонить маме".</li>
46
<li>tasks[2] - "Подготовить проект".</li>
46
<li>tasks[2] - "Подготовить проект".</li>
47
</ul><p><strong>2. Инициализация счётчика.</strong></p>
47
</ul><p><strong>2. Инициализация счётчика.</strong></p>
48
let index = 0;<p>Создаётся переменная index. Она будет указывать, на каком месте в массиве мы сейчас находимся. Начинаем с 0, потому что нумерация в массивах в JavaScript начинается с нуля.</p>
48
let index = 0;<p>Создаётся переменная index. Она будет указывать, на каком месте в массиве мы сейчас находимся. Начинаем с 0, потому что нумерация в массивах в JavaScript начинается с нуля.</p>
49
<p><strong>3. Цикл</strong><strong>while</strong>.</p>
49
<p><strong>3. Цикл</strong><strong>while</strong>.</p>
50
while (index < tasks.length) {<p>tasks.length - это количество элементов в массиве, то есть 3. Условие index < tasks.length означает "пока индекс меньше 3, продолжай выполнять цикл". Как только index станет равен 3, условие станет ложным и цикл остановится.</p>
50
while (index < tasks.length) {<p>tasks.length - это количество элементов в массиве, то есть 3. Условие index < tasks.length означает "пока индекс меньше 3, продолжай выполнять цикл". Как только index станет равен 3, условие станет ложным и цикл остановится.</p>
51
<p><strong>4. Тело цикла.</strong></p>
51
<p><strong>4. Тело цикла.</strong></p>
52
console.log(`Задача №${index + 1}: ${tasks[index]}`);<p>Мы выводим в консоль текст:</p>
52
console.log(`Задача №${index + 1}: ${tasks[index]}`);<p>Мы выводим в консоль текст:</p>
53
<ul><li>Задача №1: Купить продукты</li>
53
<ul><li>Задача №1: Купить продукты</li>
54
<li>Задача №2: Позвонить маме</li>
54
<li>Задача №2: Позвонить маме</li>
55
<li>Задача №3: Подготовить проект</li>
55
<li>Задача №3: Подготовить проект</li>
56
</ul><p>Мы пишем index + 1, потому что хотим показать нумерацию с 1, а не с 0. tasks[index] - это текущая задача, которую мы берём из массива.</p>
56
</ul><p>Мы пишем index + 1, потому что хотим показать нумерацию с 1, а не с 0. tasks[index] - это текущая задача, которую мы берём из массива.</p>
57
<p><strong>5. Шаг цикла.</strong></p>
57
<p><strong>5. Шаг цикла.</strong></p>
58
index++;<p>После каждого вывода задачи мы увеличиваем индекс на 1. Это нужно, чтобы перейти к следующей задаче. Если этого не сделать, цикл будет бесконечным.</p>
58
index++;<p>После каждого вывода задачи мы увеличиваем индекс на 1. Это нужно, чтобы перейти к следующей задаче. Если этого не сделать, цикл будет бесконечным.</p>
59
<ul><li><strong>Проверка попыток входа в систему.</strong>Допустим, вы создаёте систему, в которой пользователь может ввести пароль. У него есть несколько попыток, чтобы сделать это правильно. Если все попытки исчерпаны, доступ блокируется.</li>
59
<ul><li><strong>Проверка попыток входа в систему.</strong>Допустим, вы создаёте систему, в которой пользователь может ввести пароль. У него есть несколько попыток, чтобы сделать это правильно. Если все попытки исчерпаны, доступ блокируется.</li>
60
<li><strong>Количество жизней в игре.</strong>Допустим, игрок может делать ходы до тех пор, пока у него есть жизни. Когда они кончились, игра завершается.</li>
60
<li><strong>Количество жизней в игре.</strong>Допустим, игрок может делать ходы до тех пор, пока у него есть жизни. Когда они кончились, игра завершается.</li>
61
<li><strong>Ожидание события.</strong>Представьте, что вы пишете программу, которая обрабатывает файл, например отправляет его на сервер. Вы хотите проверять статус обработки каждые несколько секунд до тех пор, пока файл не будет успешно загружен.</li>
61
<li><strong>Ожидание события.</strong>Представьте, что вы пишете программу, которая обрабатывает файл, например отправляет его на сервер. Вы хотите проверять статус обработки каждые несколько секунд до тех пор, пока файл не будет успешно загружен.</li>
62
</ul><p>Цикл do…while всегда выполняется минимум один раз, даже если условие с самого начала ложное. Обычный while сначала проверяет условие, а потом решает, выполнять код или нет. А do…while сначала выполняет код один раз, а уже потом проверяет условие и решает, повторять ли ещё.</p>
62
</ul><p>Цикл do…while всегда выполняется минимум один раз, даже если условие с самого начала ложное. Обычный while сначала проверяет условие, а потом решает, выполнять код или нет. А do…while сначала выполняет код один раз, а уже потом проверяет условие и решает, повторять ли ещё.</p>
63
do { // Код, который выполнится хотя бы один раз } while (условие);<p>Используйте do…while, например, при получении пользовательского ввода или при начальной инициализации переменных перед проверкой.</p>
63
do { // Код, который выполнится хотя бы один раз } while (условие);<p>Используйте do…while, например, при получении пользовательского ввода или при начальной инициализации переменных перед проверкой.</p>
64
<p>Представим, что вы делаете форму регистрации для вашего списка задач. Нужно убедиться, что пользователь ввёл email, который выглядит как email, - и если нет, то запрашивать ввод снова.</p>
64
<p>Представим, что вы делаете форму регистрации для вашего списка задач. Нужно убедиться, что пользователь ввёл email, который выглядит как email, - и если нет, то запрашивать ввод снова.</p>
65
-
let email; // Объявляем переменную, в которую пользователь будет вводить email const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Создаём регулярное выражение - это шаблон, по которому можно проверить, похожа ли строка на email // ^ - начало строки // [^\s@]+ - одна или несколько букв или цифр, кроме пробелов и символа @ // @ - обязательно должен быть символ @ // [^\s@]+ - после @ снова одна или несколько букв или цифр, кроме пробелов и @ // \. - обязательно точка // [^\s@]+ - после точки снова одна или несколько букв или цифр // $ - конец строки do { email = prompt("Введите свой email:"); // Показываем пользователю окно ввода. Что бы он ни ввёл, сохраняем в переменную email } while (!emailPattern.test(email)); // Повторяем цикл, пока введённый email НЕ проходит проверку по шаблону // emailPattern.test(email) возвращает true, если строка подходит под шаблон // ! - означает "не": если проверка не прошла, продолжаем спрашивать console.log(`Введён корректный email: ${email}`); // Когда пользователь ввёл правильный email, выводим его в консоль<ul><li>Пользователь вводит email.</li>
65
+
let email; // Объявляем переменную, в которую пользователь будет вводить email const emailPattern = /^[^\s@]+@[^\s@]+\.[^\s@]+$/; // Создаём регулярное выражение - это шаблон, по которому можно проверить, похожа ли строка на email // ^ - начало строки // [^\s@]+ - одна или несколько букв или цифр, кроме пробелов и символа @ // @ - обязательно должен б��ть символ @ // [^\s@]+ - после @ снова одна или несколько букв или цифр, кроме пробелов и @ // \. - обязательно точка // [^\s@]+ - после точки снова одна или несколько букв или цифр // $ - конец строки do { email = prompt("Введите свой email:"); // Показываем пользователю окно ввода. Что бы он ни ввёл, сохраняем в переменную email } while (!emailPattern.test(email)); // Повторяем цикл, пока введённый email НЕ проходит проверку по шаблону // emailPattern.test(email) возвращает true, если строка подходит под шаблон // ! - означает "не": если проверка не прошла, продолжаем спрашивать console.log(`Введён корректный email: ${email}`); // Когда пользователь ввёл правильный email, выводим его в консоль<ul><li>Пользователь вводит email.</li>
66
<li>Программа проверяет его по шаблону (регулярному выражению).</li>
66
<li>Программа проверяет его по шаблону (регулярному выражению).</li>
67
<li>Если email неправильный (например, нет @, точки или есть пробелы) - цикл do…while продолжает спрашивать.</li>
67
<li>Если email неправильный (например, нет @, точки или есть пробелы) - цикл do…while продолжает спрашивать.</li>
68
<li>Как только введён корректный email, программа выходит из цикла и выводит сообщение в консоль.</li>
68
<li>Как только введён корректный email, программа выходит из цикла и выводит сообщение в консоль.</li>
69
</ul><ul><li><strong>Ввод имени.</strong>Когда пользователь заходит в игру или на сайт, нужно обязательно запросить имя. Даже если он сначала ничего не ввёл, программа должна продолжать спрашивать, пока не получит нормальный ответ.</li>
69
</ul><ul><li><strong>Ввод имени.</strong>Когда пользователь заходит в игру или на сайт, нужно обязательно запросить имя. Даже если он сначала ничего не ввёл, программа должна продолжать спрашивать, пока не получит нормальный ответ.</li>
70
<li><strong>Начальные настройки.</strong>Когда вы запускаете приложение в первый раз, оно может попросить указать язык, тему оформления и так далее. Это тоже можно реализовать с помощью do…while.</li>
70
<li><strong>Начальные настройки.</strong>Когда вы запускаете приложение в первый раз, оно может попросить указать язык, тему оформления и так далее. Это тоже можно реализовать с помощью do…while.</li>
71
<li><strong>Циклы с подтверждением.</strong>Например, пользователь получает сообщение: "Операция не выполнена. Хотите повторить попытку?" Даже если пользователь ответит "нет", первый запрос будет обязательно показан.</li>
71
<li><strong>Циклы с подтверждением.</strong>Например, пользователь получает сообщение: "Операция не выполнена. Хотите повторить попытку?" Даже если пользователь ответит "нет", первый запрос будет обязательно показан.</li>
72
</ul><p>Цикл for отлично подходит, когда известно, сколько раз нужно выполнить действие. Он объединяет в себе сразу три части: начальное значение, условие окончания и шаг итерации, поэтому с помощью for удобно работать с числами и массивами.</p>
72
</ul><p>Цикл for отлично подходит, когда известно, сколько раз нужно выполнить действие. Он объединяет в себе сразу три части: начальное значение, условие окончания и шаг итерации, поэтому с помощью for удобно работать с числами и массивами.</p>
73
for (начало; условие; шаг) { // Код, который будет повторяться }<ul><li>Задаётся начальное значение переменной.</li>
73
for (начало; условие; шаг) { // Код, который будет повторяться }<ul><li>Задаётся начальное значение переменной.</li>
74
<li>Проверяется условие - если оно истинно, выполняется тело цикла.</li>
74
<li>Проверяется условие - если оно истинно, выполняется тело цикла.</li>
75
<li>После каждой итерации переменная изменяется согласно шагу.</li>
75
<li>После каждой итерации переменная изменяется согласно шагу.</li>
76
<li>Когда условие становится ложным, цикл прекращается.</li>
76
<li>Когда условие становится ложным, цикл прекращается.</li>
77
</ul><p>Порядок действий всегда одинаковый: сначала счётчик, потом условие, потом шаг.</p>
77
</ul><p>Порядок действий всегда одинаковый: сначала счётчик, потом условие, потом шаг.</p>
78
<p>Сначала разберём, как бы выглядел код для вывода на экран элементов списка задач с помощью цикла for.</p>
78
<p>Сначала разберём, как бы выглядел код для вывода на экран элементов списка задач с помощью цикла for.</p>
79
const tasks = ['Купить продукты', 'Позвонить маме', 'Подготовить проект']; for (let i = 0; i < tasks.length; i++) { console.log(`Задача №${i + 1}: ${tasks[i]}`); } // Вывод: // Задача №1: Купить продукты // Задача №2: Позвонить маме // Задача №3: Подготовить проект<p>Теперь представим, что вы хотите приложить фото заметок к некоторым задачам и у вас есть список ссылок на изображения. Разберём, как цикл for может подготовить данные для вывода.</p>
79
const tasks = ['Купить продукты', 'Позвонить маме', 'Подготовить проект']; for (let i = 0; i < tasks.length; i++) { console.log(`Задача №${i + 1}: ${tasks[i]}`); } // Вывод: // Задача №1: Купить продукты // Задача №2: Позвонить маме // Задача №3: Подготовить проект<p>Теперь представим, что вы хотите приложить фото заметок к некоторым задачам и у вас есть список ссылок на изображения. Разберём, как цикл for может подготовить данные для вывода.</p>
80
const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // Создаём массив строк - это пути к изображениям const gallery = []; // Создаём пустой массив gallery, куда позже добавим объекты с данными об изображениях for (let i = 0; i < imageUrls.length; i++) { // Запускаем цикл for, который перебирает все элементы массива imageUrls const img = { src: imageUrls[i], // Путь к изображению - берём его из imageUrls[i] alt: `Изображение ${i + 1}` // Альтернативный текст, например "Изображение 1", "Изображение 2" и так далее }; gallery.push(img); // Добавляем объект img в массив gallery }<p>В результаты мы получим массив из трёх объектов, который потом удобно использовать для вывода изображений на страницу или для передачи данных на сервер.</p>
80
const imageUrls = ['image1.jpg', 'image2.jpg', 'image3.jpg']; // Создаём массив строк - это пути к изображениям const gallery = []; // Создаём пустой массив gallery, куда позже добавим объекты с данными об изображениях for (let i = 0; i < imageUrls.length; i++) { // Запускаем цикл for, который перебирает все элементы массива imageUrls const img = { src: imageUrls[i], // Путь к изображению - берём его из imageUrls[i] alt: `Изображение ${i + 1}` // Альтернативный текст, например "Изображение 1", "Изображение 2" и так далее }; gallery.push(img); // Добавляем объект img в массив gallery }<p>В результаты мы получим массив из трёх объектов, который потом удобно использовать для вывода изображений на страницу или для передачи данных на сервер.</p>
81
[ { src: 'image1.jpg', alt: 'Изображение 1' }, { src: 'image2.jpg', alt: 'Изображение 2' }, { src: 'image3.jpg', alt: 'Изображение 3' } ]<ul><li><strong>Рассылка уведомлений:</strong>вы хотите отправить сообщение каждому пользователю в списке, - цикл перебирает список и отправляет сообщение.</li>
81
[ { src: 'image1.jpg', alt: 'Изображение 1' }, { src: 'image2.jpg', alt: 'Изображение 2' }, { src: 'image3.jpg', alt: 'Изображение 3' } ]<ul><li><strong>Рассылка уведомлений:</strong>вы хотите отправить сообщение каждому пользователю в списке, - цикл перебирает список и отправляет сообщение.</li>
82
<li><strong>Загрузка фотографий:</strong>у вас есть 20 файлов, - цикл по номерам файлов загружает их по очереди на сервер.</li>
82
<li><strong>Загрузка фотографий:</strong>у вас есть 20 файлов, - цикл по номерам файлов загружает их по очереди на сервер.</li>
83
<li><strong>Подсчёт баллов:</strong>ученики сдают 10 тестов, - цикл складывает баллы каждого теста, чтобы получить итоговый результат.</li>
83
<li><strong>Подсчёт баллов:</strong>ученики сдают 10 тестов, - цикл складывает баллы каждого теста, чтобы получить итоговый результат.</li>
84
</ul><p>Когда вы работаете с массивами задач или объектами с данными, часто нужно перебрать их содержимое: либо значения (например, названия задач), либо ключи (например, поля в объекте). Для этого в JavaScript есть два удобных цикла - for…of и for…in.</p>
84
</ul><p>Когда вы работаете с массивами задач или объектами с данными, часто нужно перебрать их содержимое: либо значения (например, названия задач), либо ключи (например, поля в объекте). Для этого в JavaScript есть два удобных цикла - for…of и for…in.</p>
85
<p>Если у вас есть массив задач и вы хотите пройтись по каждой задаче, используйте for…of. Это простой способ перебрать все значения в списке.</p>
85
<p>Если у вас есть массив задач и вы хотите пройтись по каждой задаче, используйте for…of. Это простой способ перебрать все значения в списке.</p>
86
<p>Допустим, у нас есть список задач. Мы хотим по очереди показать каждую из них на экране. Нам не нужен номер задачи - только сами тексты.</p>
86
<p>Допустим, у нас есть список задач. Мы хотим по очереди показать каждую из них на экране. Нам не нужен номер задачи - только сами тексты.</p>
87
const tasks = ['Купить продукты', 'Сделать домашку', 'Погулять с собакой']; // Создаём массив задач - список строк, где каждая строка - отдельная задача for (const task of tasks) { // Начинаем цикл for...of: // На каждой итерации переменная task будет принимать следующее значение из массива tasks console.log(`Задача: ${task}`); // Выводим текущую задачу в консоль, подставляя её значение в текст // Например: "Задача: Купить продукты" }<p>Цикл выполнится три раза - по количеству элементов в массиве. На каждой итерации переменная task будет содержать следующее значение из массива.</p>
87
const tasks = ['Купить продукты', 'Сделать домашку', 'Погулять с собакой']; // Создаём массив задач - список строк, где каждая строка - отдельная задача for (const task of tasks) { // Начинаем цикл for...of: // На каждой итерации переменная task будет принимать следующее значение из массива tasks console.log(`Задача: ${task}`); // Выводим текущую задачу в консоль, подставляя её значение в текст // Например: "Задача: Купить продукты" }<p>Цикл выполнится три раза - по количеству элементов в массиве. На каждой итерации переменная task будет содержать следующее значение из массива.</p>
88
<p>Обычный for не работает с объектами - у объекта нет индексов, только ключи. Если у вас есть объект, который описывает одну задачу, и вы хотите перебрать все её поля - используйте for…in.</p>
88
<p>Обычный for не работает с объектами - у объекта нет индексов, только ключи. Если у вас есть объект, который описывает одну задачу, и вы хотите перебрать все её поля - используйте for…in.</p>
89
const task = { title: 'Позвонить другу', completed: false, priority: 'высокий' }; // Создаём объект task - это набор пар "ключ - значение" // title - название задачи // completed - выполнена ли задача (true или false) // priority - приоритет задачи for (const key in task) { // Начинаем цикл for...in // На каждой итерации переменная key будет принимать следующее имя свойства из объекта task // Сначала key = 'title', потом 'completed', потом 'priority' console.log(`${key}: ${task[key]}`); // Выводим имя свойства и его значение через двоеточие // task[key] - доступ к значению по имени свойства // Например: "title: Позвонить другу" }<p>Здесь key - это название свойства (например, priority), а user[key] - его значение (например, "высокий").</p>
89
const task = { title: 'Позвонить другу', completed: false, priority: 'высокий' }; // Создаём объект task - это набор пар "ключ - значение" // title - название задачи // completed - выполнена ли задача (true или false) // priority - приоритет задачи for (const key in task) { // Начинаем цикл for...in // На каждой итерации переменная key будет принимать следующее имя свойства из объекта task // Сначала key = 'title', потом 'completed', потом 'priority' console.log(`${key}: ${task[key]}`); // Выводим имя свойства и его значение через двоеточие // task[key] - доступ к значению по имени свойства // Например: "title: Позвонить другу" }<p>Здесь key - это название свойства (например, priority), а user[key] - его значение (например, "высокий").</p>
90
<p>В JavaScript массив - это на самом деле тоже объект. А это значит, что ему можно добавить не только числовые элементы, но и обычные свойства, как у любого объекта. Посмотрим на пример, где массиву вручную добавляется дополнительное свойство. Мы сравним, как себя ведут циклы for…in и for…of.</p>
90
<p>В JavaScript массив - это на самом деле тоже объект. А это значит, что ему можно добавить не только числовые элементы, но и обычные свойства, как у любого объекта. Посмотрим на пример, где массиву вручную добавляется дополнительное свойство. Мы сравним, как себя ведут циклы for…in и for…of.</p>
91
const tasks = ['Купить продукты', 'Погулять с собакой']; arr.customProp = "я лишний"; // добавление свойства объекту for (const i in arr) { console.log(`for...in: ${i} -> ${arr[i]}`); } for (const val of arr) { console.log(`for...of: ${val}`); }<p>Массив arr имеет дополнительное свойство - customProp. Это не элемент массива, а как будто ярлык сбоку.</p>
91
const tasks = ['Купить продукты', 'Погулять с собакой']; arr.customProp = "я лишний"; // добавление свойства объекту for (const i in arr) { console.log(`for...in: ${i} -> ${arr[i]}`); } for (const val of arr) { console.log(`for...of: ${val}`); }<p>Массив arr имеет дополнительное свойство - customProp. Это не элемент массива, а как будто ярлык сбоку.</p>
92
<p>Цикл for…in перебирает все перечисляемые свойства объекта, включая:</p>
92
<p>Цикл for…in перебирает все перечисляемые свойства объекта, включая:</p>
93
<ul><li>индексы массива (0, 1, 2),</li>
93
<ul><li>индексы массива (0, 1, 2),</li>
94
<li>любые добавленные свойства, такие как customProp.</li>
94
<li>любые добавленные свойства, такие как customProp.</li>
95
</ul><p>Цикл for…of перебирает только значения массива - без "лишнего", без ключей, без свойств.</p>
95
</ul><p>Цикл for…of перебирает только значения массива - без "лишнего", без ключей, без свойств.</p>
96
<p><strong>Совет:</strong>если работаете с массивами и не хотите наткнуться на случайные свойства, используйте for…of.</p>
96
<p><strong>Совет:</strong>если работаете с массивами и не хотите наткнуться на случайные свойства, используйте for…of.</p>
97
<p>Иногда в процессе выполнения цикла нужно досрочно остановить его или, наоборот, пропустить текущую итерацию и перейти к следующей. В JavaScript для этого используется два ключевых слова: break и continue.</p>
97
<p>Иногда в процессе выполнения цикла нужно досрочно остановить его или, наоборот, пропустить текущую итерацию и перейти к следующей. В JavaScript для этого используется два ключевых слова: break и continue.</p>
98
<p>Если внутри цикла срабатывает break, выполнение цикла немедленно останавливается и программа продолжает работать дальше - уже после цикла.</p>
98
<p>Если внутри цикла срабатывает break, выполнение цикла немедленно останавливается и программа продолжает работать дальше - уже после цикла.</p>
99
<p>Предположим, у нас есть массив задач и мы хотим найти первую задачу, где надо кому-то позвонить.</p>
99
<p>Предположим, у нас есть массив задач и мы хотим найти первую задачу, где надо кому-то позвонить.</p>
100
const tasks = ['Позвонить в авиакомпанию', 'Сделать домашнее задание', 'Позвонить другу']; for (let i = 0; i < tasks.length; i++) { if (tasks[i].toLowerCase().includes('позвонить')) { // Переводим всё в нижний регистр для проверки и ищем слово "позвонить" console.log(`Нужно позвонить: ${tasks[i]}`); break; //Выходим из цикла после вывода 1-й задачи } }<p>В этом примере цикл перебирает массив задач и останавливается при нахождении первой выполненной задачи, что ускоряет процесс.</p>
100
const tasks = ['Позвонить в авиакомпанию', 'Сделать домашнее задание', 'Позвонить другу']; for (let i = 0; i < tasks.length; i++) { if (tasks[i].toLowerCase().includes('позвонить')) { // Переводим всё в нижний регистр для проверки и ищем слово "позвонить" console.log(`Нужно позвонить: ${tasks[i]}`); break; //Выходим из цикла после вывода 1-й задачи } }<p>В этом примере цикл перебирает массив задач и останавливается при нахождении первой выполненной задачи, что ускоряет процесс.</p>
101
<p>Если внутри цикла срабатывает continue, текущая итерация прерывается, но сам цикл продолжается - сразу переходит к следующему шагу.</p>
101
<p>Если внутри цикла срабатывает continue, текущая итерация прерывается, но сам цикл продолжается - сразу переходит к следующему шагу.</p>
102
<p>Допустим, мы хотим вывести только задачи, связанные с покупками.</p>
102
<p>Допустим, мы хотим вывести только задачи, связанные с покупками.</p>
103
const tasks = ['Купить билеты в кино', 'Устранить ошибки в проекте', 'Купить хлеба']; for (let i = 0; i < tasks.length; i++) { if (!tasks[i].toLowerCase().includes('купить')) { continue; // Пропускаем задачи, не связанные с покупками } console.log(`Задача на покупку: ${tasks[i]}`); }<p>В этом случае цикл пропускает все задачи, которые уже выполнены, и выводит только те, что ещё предстоит выполнить.</p>
103
const tasks = ['Купить билеты в кино', 'Устранить ошибки в проекте', 'Купить хлеба']; for (let i = 0; i < tasks.length; i++) { if (!tasks[i].toLowerCase().includes('купить')) { continue; // Пропускаем задачи, не связанные с покупками } console.log(`Задача на покупку: ${tasks[i]}`); }<p>В этом случае цикл пропускает все задачи, которые уже выполнены, и выводит только те, что ещё предстоит выполнить.</p>
104
<p>Разберём самые частые проблемы и объясним, как их не допустить.</p>
104
<p>Разберём самые частые проблемы и объясним, как их не допустить.</p>
105
// Предполагаем, что хотим выполнить пять итераций for (let i = 0; i >= 0; i++) { console.log("Добавить задачу"); } // Цикл повторяется бесконечно<p><strong>Почему так происходит:</strong>i всегда больше или равно 0 и с каждой итерацией увеличивается. Условия повторения цикла всегда верное.</p>
105
// Предполагаем, что хотим выполнить пять итераций for (let i = 0; i >= 0; i++) { console.log("Добавить задачу"); } // Цикл повторяется бесконечно<p><strong>Почему так происходит:</strong>i всегда больше или равно 0 и с каждой итерацией увеличивается. Условия повторения цикла всегда верное.</p>
106
<p><strong>Правильный вариант:</strong>проверьте, действительно ли условие даёт выход.</p>
106
<p><strong>Правильный вариант:</strong>проверьте, действительно ли условие даёт выход.</p>
107
for (let i = 0; i < 5; i++) { console.log("Добавить задачу"); }let i = 0; while (i < 5) { console.log('Добавлена новая задача'); // Забыли i++ } // Цикл повторяется бесконечно<p><strong>Почему так происходит:</strong>переменная i никогда не изменяется, условие i < 5 всегда истинно, цикл продолжается бесконечно.</p>
107
for (let i = 0; i < 5; i++) { console.log("Добавить задачу"); }let i = 0; while (i < 5) { console.log('Добавлена новая задача'); // Забыли i++ } // Цикл повторяется бесконечно<p><strong>Почему так происходит:</strong>переменная i никогда не изменяется, условие i < 5 всегда истинно, цикл продолжается бесконечно.</p>
108
<p><strong>Правильный вариант:</strong>убедитесь, что в теле цикла переменная-счётчик корректно изменяется, чтобы условие цикла могло стать ложным.</p>
108
<p><strong>Правильный вариант:</strong>убедитесь, что в теле цикла переменная-счётчик корректно изменяется, чтобы условие цикла могло стать ложным.</p>
109
let i = 0; while (i < 5) { console.log('Добавлена новая задача'); i++; }<p><strong>Запомните:</strong>если условие верно всегда, то цикл никогда не заканчивается и браузер зависает.</p>
109
let i = 0; while (i < 5) { console.log('Добавлена новая задача'); i++; }<p><strong>Запомните:</strong>если условие верно всегда, то цикл никогда не заканчивается и браузер зависает.</p>
110
const tasks = ['Сходить в кино', 'Убраться', 'Купить подарок маме']; for (const task of tasks) { console.log(task); } // Вывод на экран: // Сходить в кино // Убраться // Купить подарок маме // undefined<p><strong>Почему так происходит:</strong>Массив tasks имеет три элемента с индексами 0, 1 и 2. Условие i <= tasks.length приводит к попытке доступа к tasks[3], которого не существует.</p>
110
const tasks = ['Сходить в кино', 'Убраться', 'Купить подарок маме']; for (const task of tasks) { console.log(task); } // Вывод на экран: // Сходить в кино // Убраться // Купить подарок маме // undefined<p><strong>Почему так происходит:</strong>Массив tasks имеет три элемента с индексами 0, 1 и 2. Условие i <= tasks.length приводит к попытке доступа к tasks[3], которого не существует.</p>
111
<p><strong>Правильный вариант:</strong>используйте условие < вместо <=, чтобы избежать выхода за пределы массива.</p>
111
<p><strong>Правильный вариант:</strong>используйте условие < вместо <=, чтобы избежать выхода за пределы массива.</p>
112
for (let task of tasks) { console.log(task); }const tasks = ['Купить продукты', 'Уборка: помыть посуду', 'Уборка: пропылесосить']; // Удаляем всё со словом "уборка" for (const task of tasks) { if (task.includes('Уборка')) { tasks.splice(i, 1); // Начиная с позиции i, удалить 1 элемент в массиве } } console.log(tasks); //Вывод //['Купить продукты', 'Уборка: пропылесосить']<p><strong>Почему так происходит</strong>: Когда удаляешь tasks[i], все элементы сдвигаются влево. 'Уборка: помыть посуду' удаляется, но i становится 1, а 'Уборка: пропылесосить' сдвигается на место под индексом 1 - и остаётся незамеченной.</p>
112
for (let task of tasks) { console.log(task); }const tasks = ['Купить продукты', 'Уборка: помыть посуду', 'Уборка: пропылесосить']; // Удаляем всё со словом "уборка" for (const task of tasks) { if (task.includes('Уборка')) { tasks.splice(i, 1); // Начиная с позиции i, удалить 1 элемент в массиве } } console.log(tasks); //Вывод //['Купить продукты', 'Уборка: пропылесосить']<p><strong>Почему так происходит</strong>: Когда удаляешь tasks[i], все элементы сдвигаются влево. 'Уборка: помыть посуду' удаляется, но i становится 1, а 'Уборка: пропылесосить' сдвигается на место под индексом 1 - и остаётся незамеченной.</p>
113
<p><strong>Правильный вариант:</strong>идти с конца. Когда идёшь от последнего элемента к первому, сдвиги уже не мешают.</p>
113
<p><strong>Правильный вариант:</strong>идти с конца. Когда идёшь от последнего элемента к первому, сдвиги уже не мешают.</p>
114
for (let i = tasks.length - 1; i >= 0; i--) { if (tasks[i].includes('Уборка')) { tasks.splice(i, 1); } }const tasks = ['Работа над проектом', 'Погулять с собакой', 'Работа в Notion']; let total = 0; for (const task of tasks) { if (task.includes('Работа')) { continue; // Пропускаем задачи со словом "работа" } console.log(`Задача: ${task}`); total++; // Считаем только задачи, которые не были пропущены } console.log(`Всего задач: ${total}`);<p><strong>Почему так происходит:</strong>из-за того, что continue стоит до total++, пропущенные задачи не попадают в общий счётчик.</p>
114
for (let i = tasks.length - 1; i >= 0; i--) { if (tasks[i].includes('Уборка')) { tasks.splice(i, 1); } }const tasks = ['Работа над проектом', 'Погулять с собакой', 'Работа в Notion']; let total = 0; for (const task of tasks) { if (task.includes('Работа')) { continue; // Пропускаем задачи со словом "работа" } console.log(`Задача: ${task}`); total++; // Считаем только задачи, которые не были пропущены } console.log(`Всего задач: ${total}`);<p><strong>Почему так происходит:</strong>из-за того, что continue стоит до total++, пропущенные задачи не попадают в общий счётчик.</p>
115
<p><strong>Правильный вариант:</strong></p>
115
<p><strong>Правильный вариант:</strong></p>
116
let total = 0; for (const task of tasks) { total++; // Учитываем задачу независимо от фильтра if (task.includes('Работа')) { continue; // Скрываем в интерфейсе, но не теряем в статистике } console.log(`Задача: ${task}`); } console.log(`Всего задач: ${total}`);<p>Когда вы перебираете массив с помощью цикла for, выражение array.length каждый раз заново рассчитывает длину массива. Это не всегда критично, но, если массив большой или цикл запускается много раз, лишние вычисления могут замедлить выполнение.</p>
116
let total = 0; for (const task of tasks) { total++; // Учитываем задачу независимо от фильтра if (task.includes('Работа')) { continue; // Скрываем в интерфейсе, но не теряем в статистике } console.log(`Задача: ${task}`); } console.log(`Всего задач: ${total}`);<p>Когда вы перебираете массив с помощью цикла for, выражение array.length каждый раз заново рассчитывает длину массива. Это не всегда критично, но, если массив большой или цикл запускается много раз, лишние вычисления могут замедлить выполнение.</p>
117
<p><strong>Пример менее эффективного кода:</strong></p>
117
<p><strong>Пример менее эффективного кода:</strong></p>
118
for (let i = 0; i < array.length; i++) { // ... }<p>Здесь array.length вызывается<strong>на каждой итерации</strong>.</p>
118
for (let i = 0; i < array.length; i++) { // ... }<p>Здесь array.length вызывается<strong>на каждой итерации</strong>.</p>
119
<p><strong>Более эффективный вариант:</strong></p>
119
<p><strong>Более эффективный вариант:</strong></p>
120
const len = array.length; for (let i = 0; i < len; i++) { // ... }<p>Здесь длина массива сохраняется в переменную len один раз - и используется в цикле без лишних обращений к свойству .length.</p>
120
const len = array.length; for (let i = 0; i < len; i++) { // ... }<p>Здесь длина массива сохраняется в переменную len один раз - и используется в цикле без лишних обращений к свойству .length.</p>
121
<ul><li>Используйте понятные имена переменных, например taskIndex вместо i, это делает код понятнее.</li>
121
<ul><li>Используйте понятные имена переменных, например taskIndex вместо i, это делает код понятнее.</li>
122
<li>Чем больше уровней вложенности, тем сложнее читать и понимать код.</li>
122
<li>Чем больше уровней вложенности, тем сложнее читать и понимать код.</li>
123
<li>Если у вас три и более уровней for, скорее всего, логику можно упростить. Разбейте задачу на шаги или преобразуйте данные заранее.</li>
123
<li>Если у вас три и более уровней for, скорее всего, логику можно упростить. Разбейте задачу на шаги или преобразуйте данные заранее.</li>
124
<li>Если в каждом уровне вложенности используется один и тот же код, лучше вынести его за пределы цикла или оформить как отдельную функцию.</li>
124
<li>Если в каждом уровне вложенности используется один и тот же код, лучше вынести его за пределы цикла или оформить как отдельную функцию.</li>
125
<li>Во вложенных циклах break и continue работают только на ближайший цикл. Выйти сразу из двух не получится.</li>
125
<li>Во вложенных циклах break и continue работают только на ближайший цикл. Выйти сразу из двух не получится.</li>
126
</ul><ul><li>Если вы хотите получить итог - например, общее количество задач или результат вычислений, - не размещайте console.log() внутри цикла, если он не должен повторяться.</li>
126
</ul><ul><li>Если вы хотите получить итог - например, общее количество задач или результат вычислений, - не размещайте console.log() внутри цикла, если он не должен повторяться.</li>
127
<li>Если разместить console.log() вне цикла, он выполнится только один раз - после завершения цикла - и выведет итоговое значение.</li>
127
<li>Если разместить console.log() вне цикла, он выполнится только один раз - после завершения цикла - и выведет итоговое значение.</li>
128
</ul><p><strong>Задание:</strong>переберите массив чисел и получите сумму всех чётных значений.</p>
128
</ul><p><strong>Задание:</strong>переберите массив чисел и получите сумму всех чётных значений.</p>
129
<p><strong>Массив:</strong></p>
129
<p><strong>Массив:</strong></p>
130
let numbers = [1, 4, 7, 10, 12];<p>Решение</p>
130
let numbers = [1, 4, 7, 10, 12];<p>Решение</p>
131
let sum = 0; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { // Проверяем на чётность sum += numbers[i]; // Добавляем в сумму } } console.log(sum); // 26<p>Переберите массив задач и выведите количество задач, помеченных как выполненные.</p>
131
let sum = 0; for (let i = 0; i < numbers.length; i++) { if (numbers[i] % 2 === 0) { // Проверяем на чётность sum += numbers[i]; // Добавляем в сумму } } console.log(sum); // 26<p>Переберите массив задач и выведите количество задач, помеченных как выполненные.</p>
132
<p><strong>Массив:</strong></p>
132
<p><strong>Массив:</strong></p>
133
let tasks = [ { title: 'Купить продукты', completed: true }, { title: 'Сделать домашку', completed: false }, { title: 'Позвонить маме', completed: true } ];<p><strong>Совет:</strong>для проверки определённого свойства объекта используйте выражение tasks[i].completed.</p>
133
let tasks = [ { title: 'Купить продукты', completed: true }, { title: 'Сделать домашку', completed: false }, { title: 'Позвонить маме', completed: true } ];<p><strong>Совет:</strong>для проверки определённого свойства объекта используйте выражение tasks[i].completed.</p>
134
<p>Решение</p>
134
<p>Решение</p>
135
let done = 0; for (let i = 0; i < tasks.length; i++) { if (tasks[i].completed === true) { // Если задача отмечена как выполненная done++; // увеличиваем счётчик на 1 } } console.log(done); // 2<p>Пройдитесь по массиву строк и создайте новый массив без пустых строк или строк, состоящих только из пробелов.</p>
135
let done = 0; for (let i = 0; i < tasks.length; i++) { if (tasks[i].completed === true) { // Если задача отмечена как выполненная done++; // увеличиваем счётчик на 1 } } console.log(done); // 2<p>Пройдитесь по массиву строк и создайте новый массив без пустых строк или строк, состоящих только из пробелов.</p>
136
<p><strong>Массив:</strong></p>
136
<p><strong>Массив:</strong></p>
137
let input = ['задача 1', '', ' ', 'задача 2'];<p><strong>Совет:</strong>используйте .trim() - метод строк в JavaScript, который удаляет пробелы и и другие "пустые" символы в начале и в конце строки.</p>
137
let input = ['задача 1', '', ' ', 'задача 2'];<p><strong>Совет:</strong>используйте .trim() - метод строк в JavaScript, который удаляет пробелы и и другие "пустые" символы в начале и в конце строки.</p>
138
<p>Решение</p>
138
<p>Решение</p>
139
let cleaned = []; for (let i = 0; i < input.length; i++) { if (input[i].trim() !== '') { cleaned.push(input[i]); } } console.log(cleaned); // ['задача 1', 'задача 2']<ul><li><a>Другие способы перебора массива в JavaScript, кроме циклов. Методы map, forEach, filter и другие (видео на YouTube)</a></li>
139
let cleaned = []; for (let i = 0; i < input.length; i++) { if (input[i].trim() !== '') { cleaned.push(input[i]); } } console.log(cleaned); // ['задача 1', 'задача 2']<ul><li><a>Другие способы перебора массива в JavaScript, кроме циклов. Методы map, forEach, filter и другие (видео на YouTube)</a></li>
140
</ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>
140
</ul><a>Курс с трудоустройством: "Профессия Фронтенд-разработчик + ИИ" Узнать о курсе</a>