Цикл for...of в JavaScript: простой способ перебора данных

Когда вы начинаете изучать JavaScript, одной из первых задач, с которыми вы сталкиваетесь, является перебор элементов в массиве или другой коллекции данных. Возможно, вы уже пробовали использовать цикл for с индексами или метод forEach, но есть ещё один инструмент, который делает эту задачу проще и чище — цикл for...of. Этот цикл позволяет легко перебирать значения итерируемых объектов, таких как массивы, строки или коллекции DOM. В этой статье мы разберём, как работает for...of, его историю, особенности и почему он так полезен для новичков в 2025 году.

Исторический контекст: как появился for...of?

Цикл for...of был введён в JavaScript в 2015 году с выходом спецификации ECMAScript 6 (ES6). До этого разработчики использовали классический цикл for, который требовал явного управления индексами, или метод forEach, который, хотя и был удобнее, не позволял использовать операторы break или continue. В те времена перебор сложных структур данных, таких как коллекции DOM или строки, мог быть громоздким.

ES6 принёс концепцию итерируемых объектов и протокола итерации, что позволило создать более лаконичный и читаемый способ перебора данных. for...of был разработан, чтобы работать с любыми объектами, поддерживающими протокол итерации (то есть имеющими метод Symbol.iterator). Это сделало его универсальным инструментом для работы с массивами, строками, наборами (Set), словарями (Map) и даже пользовательскими итерируемыми объектами.

Как работает for...of?

Цикл for...of перебирает значения итерируемых объектов, то есть объектов, которые предоставляют итератор через метод Symbol.iterator. К итерируемым объектам относятся:

• Массивы (например, ['a', 'b', 'c'])
• Строки (например, 'hello')
• Коллекции DOM (например, NodeList или HTMLCollection)
• Объекты Set и Map
• Типизированные массивы (например, Uint8Array)

Синтаксис цикла прост:

for (const переменная of итерируемыйОбъект) {
  // код для каждого значения
}

Здесь переменная принимает значение каждого элемента итерируемого объекта по очереди. Ключевое слово const используется, если вы не планируете изменять значение переменной внутри цикла, что делает код более безопасным.

Демонстрация

Давайте посмотрим на простой пример перебора массива:

const array = ['яблоко', 'банан', 'вишня'];
for (const fruit of array) {
  console.log(fruit);
}

Этот код выведет в консоль:

яблоко
банан
вишня

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

Примеры использования

Цикл for...of невероятно универсален. Давайте рассмотрим несколько сценариев.

Перебор строки

Вы можете использовать for...of для перебора символов строки:

const text = 'Привет';
for (const char of text) {
  console.log(char);
}

Вывод:

П
р
и
в
е
т

Работа с DOM

Если у вас есть список элементов в DOM, например, все параграфы на странице, вы можете перебрать их так:

const paragraphs = document.querySelectorAll('p');
for (const p of paragraphs) {
  p.style.color = 'navy';
}

Этот код изменит цвет текста всех параграфов на странице на тёмно-синий.

Работа с Set

Объект Set хранит уникальные значения, и for...of отлично подходит для их перебора:

const uniqueNumbers = new Set([1, 2, 2, 3, 3, 4]);
for (const num of uniqueNumbers) {
  console.log(num);
}

Вывод:

1
2
3
4

Практический пример для новичков

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

<ul id="taskList">
  <li>Купить продукты</li>
  <li>Сделать домашку</li>
  <li>Позвонить другу</li>
</ul>

<script>
  const tasks = document.querySelectorAll('#taskList li');
  for (const task of tasks) {
    if (task.textContent.includes('Сделать')) {
      task.style.textDecoration = 'line-through';
    }
  }
</script>

Этот код найдёт все элементы списка и зачеркнёт задачу, содержащую слово "Сделать". Попробуйте вставить этот код в редактор, например, CodePen, и добавьте свои условия для других задач!

Совместимость с браузерами

На август 2025 года цикл for...of имеет статус Baseline: Widely Available и поддерживается всеми современными браузерами (Chrome, Firefox, Safari, Edge) с января 2018 года, согласно данным MDN. Он также работает в Node.js и других средах, поддерживающих ES6. Даже в старых браузерах, таких как Internet Explorer 11, можно использовать for...of с полифиллами, хотя для современных проектов это редко требуется.

Когда стоит использовать for...of?

Цикл for...of идеально подходит для:

• Простого перебора массивов или строк без необходимости следить за индексами.
• Работы с коллекциями DOM, такими как NodeList.
• Перебора объектов Set или Map, где важен порядок элементов.
• Сценариев, где нужны операторы break или continue, чего не даёт forEach.

Однако есть случаи, когда другие подходы могут быть лучше:

• Если вам нужны индексы элементов, используйте for или forEach с параметром индекса.
• Для сложных преобразований данных лучше подойдут методы массивов, такие как map, filter или reduce.

Альтернативы

Цикл for...of — не единственный способ перебора данных. Вот несколько альтернатив:

• Классический цикл for: Полезен, когда нужны индексы или сложная логика:

const array = ['яблоко', 'банан', 'вишня'];
for (let i = 0; i 

• Метод forEach: Удобен для массивов, но не поддерживает break или continue:

const array = ['яблоко', 'банан', 'вишня'];
array.forEach(fruit => console.log(fruit));

• Цикл for...in: Используется для перебора свойств объекта, а не значений итерируемых объектов, поэтому для массивов его лучше избегать.

Заключение

Цикл for...of — это мощный и удобный инструмент для перебора итерируемых объектов в JavaScript. Он прост в использовании, читаем и идеально подходит для новичков, которые хотят писать чистый и понятный код. Его поддержка в браузерах делает его надёжным выбором для любых проектов в 2025 году. Хотя у него есть альтернативы, такие как forEach или методы массивов, for...of выигрывает за счёт своей гибкости и возможности использовать break и continue.

Попробуйте поиграться с примерами выше: создайте массив, строку или коллекцию DOM и перебирите их с помощью for...of. Это отличный способ закрепить знания и почувствовать себя увереннее в JavaScript. Веб-разработка — это про эксперименты, так что дерзайте!

«Доктайп» — журнал о фронтенде. Читайте, слушайте и учитесь с нами.