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

Синтаксис

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

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

Примеры

Рассмотрим примеры использования цикла 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 и другими итерируемыми объектами.