Цикл for...of в JavaScript

Цикл for...of в JavaScript предоставляет удобный способ перебора элементов итерируемых объектов, таких как массивы, строки, Map, Set и другие. Он позволяет работать с элементами коллекции напрямую, без необходимости получения индексов или ключей.

Синтаксис

for (variable of iterable) {
  // Тело цикла
}

Где variable - это переменная, в которую будут поочередно записываться элементы коллекции iterable.

Цикл for...of предоставляет удобный способ для итерации по итерируемым объектам, таким как массивы, строки и Map/Set. Понимание этого цикла позволяет эффективно обрабатывать коллекции данных. Чтобы глубже изучить циклы и другие способы управления потоком выполнения в JavaScript, рекомендуем наш курс. Если вы хотите детальнее погрузиться в JavaScript — приходите на наш большой курс JavaScript с нуля. На курсе 198 уроков и 30 упражнений, AI-тренажеры для безлимитной практики с кодом и задачами 24/7, решение задач с живым ревью наставника, еженедельные встречи с менторами.

Примеры

Рассмотрим примеры использования цикла for...of для различных типов итерируемых объектов:

1. Массивы:

const arr = ['apple', 'banana', 'orange'];

for (const item of arr) {
  console.log(item);
}

В этом примере цикл for...of перебирает все элементы массива arr и выводит их в консоль.

1. Строки:

const str = 'hello';

for (const char of str) {
  console.log(char);
}

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

1. Map:

const map = new Map();
map.set('a', 1);
map.set('b', 2);

for (const [key, value] of map) {
  console.log(key, value);
}

Цикл for...of позволяет перебирать элементы Map в виде массивов [ключ, значение].

Использование с break и continue

Цикл for...of поддерживает использование операторов break и continue для управления выполнением цикла, как и обычный цикл for.

const arr = [1, 2, 3, 4, 5];

for (const item of arr) {
  if (item === 3) {
    continue; // Пропускаем значение 3
  }
  if (item === 5) {
    break; // Завершаем цикл после значения 5
  }
  console.log(item);
}

Заключение

Цикл for...of является удобным инструментом для перебора элементов итерируемых объектов в JavaScript. Он позволяет напрямую работать с элементами коллекции без использования индексов или ключей, делая код более читаемым и компактным. Помимо массивов, он поддерживает работу со строками, Map, Set и другими итерируемыми объектами.

for...of - это мощный инструмент для итерации по коллекциям данных. Однако, чтобы эффективно использовать его, необходимо понимать, как работают итерируемые объекты и как выбирать подходящий цикл для конкретной задачи. Все это рассматривается на курсе JavaScript с нуля. В первых 3 модулях уже доступно бесплатное содержание — начните погружаться в мир JavaScript прямо сегодня.