логотип PurpleSchool
логотип PurpleSchool

Цикл for...of в JavaScript

Автор

Дмитрий Нечаев

Цикл 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 и другими итерируемыми объектами.

Стрелочка влевоИтераторы в JavaScriptЦикл for...in в JavaScriptСтрелочка вправо

Все гайды по Javascript

Как работает метод trim() - JavaScriptКак работает метод toUpperCase() - JavaScriptКак работает метод toLowerCase() - JavaScriptКак работает метод substring() - JavaScriptКак работает метод startsWith() - JavaScriptКак работает метод split() - JavaScriptКак работает метод slice() - JavaScriptКак работает метод search() - JavaScriptКак работает метод replaceAll() - JavaScriptКак работает метод replace() - JavaScriptКак работает метод repeat() - JavaScriptКак работает метод padStart() - JavaScriptКак работает метод padEnd() - JavaScriptКак работает метод matchAll() - JavaScriptКак работает метод match() - JavaScriptКак работает метод localeCompare() - JavaScriptКак работает свойство length - JavaScriptКак работает метод lastIndexOf() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод fromCodePoint() - JavaScriptКак работает метод fromCharCode() - JavaScriptКак работает метод endsWith() - JavaScriptКак работает метод concat() - JavaScriptКак работает метод codePointAt() - JavaScriptКак работает метод charCodeAt() - JavaScriptКак работает метод charAt() - JavaScript
Итератор в JavaScript
try...catch в JavaScriptError в JavaScript
Событие wheel в JavaScriptСобытие unload в JavaScriptСобытие touch в JavaScriptСобытие submit в JavaScriptСобытие reset в JavaScriptСобытие scroll в JavaScriptМетод .preventDefault() в JavaScriptСобытие mouseover в JavaScriptСобытие mouseout в JavaScriptСобытие load в JavaScriptСобытие keyup в JavaScriptСобытие keydown в JavaScriptСобытие invalid в JavaScriptСобытие input в JavaScriptСобытийная модель Event в JavaScriptОбъект события Event в JavaScriptСобытие DOMContentLoaded в JavaScriptСобытие dblclick в JavaScriptСобытие click в JavaScriptСобытие change в JavaScriptСобытие beforeunload в JavaScript
Как работает метод some() - JavaScriptКак работает метод reverse() - JavaScriptКак работает метод reduce() - JavaScriptКак работает метод map() - JavaScriptКак работает метод isArray() - JavaScriptКак работает метод indexOf() - JavaScriptКак работает метод includes() - JavaScriptКак работает метод from() - JavaScriptКак работает метод forEach() - JavaScriptКак работает метод flatMap() - JavaScriptКак работает метод flat() - JavaScriptКак работает метод findIndex() - JavaScriptКак работает метод find() - JavaScriptКак работает метод filter() - JavaScriptКак работает метод every() - JavaScriptМассивы в JavaScript
Открыть базу знаний