for…of в JavaScript

• Что такое for…of
• Синтаксис
• Перебор массива
• Перебор строки
• break и continue
• Отличие от for…in
• Где for…of не подойдет
• Итого

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

let languages = ['HTML', 'CSS', 'JavaScript'];

for (let language of languages) {
  console.log(language);
}

Результат:

HTML
CSS
JavaScript

На каждой итерации в переменную language попадает очередное значение из массива.

Что такое for…of

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

let scores = [10, 20, 30];

for (let score of scores) {
  console.log(score);
}

Такой код читается почти как обычная фраза: для каждого score из scores выполни тело цикла.

Синтаксис

for (let value of iterable) {
  // тело цикла
}

value - переменная, в которую на каждом шаге записывается очередное значение.

iterable - итерируемый объект, например массив или строка.

Название переменной можно выбрать самостоятельно. Главное, чтобы оно помогало понимать, что именно находится внутри.

let users = ['Анна', 'Игорь', 'Мария'];

for (let user of users) {
  console.log(user);
}

Здесь user - один пользователь, а users - массив пользователей.

Перебор массива

Самый частый случай для for…of - перебор элементов массива.

let tasks = ['Изучить for', 'Разобрать while', 'Попробовать for...of'];

for (let task of tasks) {
  console.log(task);
}

Если нужен только сам элемент, for…of обычно удобнее обычного for. Индексы в таком цикле не видны напрямую, зато код получается короче.

Если индекс все-таки нужен, можно использовать метод entries().

let tasks = ['Изучить for', 'Разобрать while', 'Попробовать for...of'];

for (let [index, task] of tasks.entries()) {
  console.log(index + ': ' + task);
}

Результат:

0: Изучить for
1: Разобрать while
2: Попробовать for...of

Метод entries() возвращает пары: индекс и значение. В записи [index, task] эти два значения сразу раскладываются по переменным.

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

Строки тоже можно перебирать с помощью for…of. На каждом шаге цикл получает очередной символ.

let word = 'код';

for (let letter of word) {
  console.log(letter);
}

Результат:

к
о
д

Это удобно, когда нужно проверить символы строки, собрать новую строку или посчитать количество подходящих символов.

let message = 'JavaScript';
let count = 0;

for (let letter of message) {
  if (letter === 'a') {
    count++;
  }
}

console.log(count);

В этом примере считаем, сколько раз в строке встречается буква a.

break и continue

Внутри for…of можно использовать break и continue, как и в других циклах.

break полностью останавливает цикл.

let numbers = [2, 4, 7, 10, 12];

for (let number of numbers) {
  if (number > 5) {
    console.log('Найдено число больше 5: ' + number);
    break;
  }
}

Цикл остановится на числе 7, потому что первое подходящее значение уже найдено.

continue пропускает текущую итерацию и переходит к следующей.

let numbers = [1, 2, 3, 4, 5];

for (let number of numbers) {
  if (number % 2 !== 0) {
    continue;
  }

  console.log(number);
}

В консоль попадут только четные числа.

Отличие от for…in

for…in и for…of похожи внешне, но решают разные задачи.

for…in перебирает ключи объекта.

let user = {
  name: 'Анна',
  age: 25
};

for (let key in user) {
  console.log(key);
}

Результат:

name
age

for…of перебирает значения и хорошо подходит для массивов.

let users = ['Анна', 'Игорь', 'Мария'];

for (let user of users) {
  console.log(user);
}

Результат:

Анна
Игорь
Мария

Для обычного объекта for…of не подойдет, потому что объект сам по себе не является итерируемым.

let user = {
  name: 'Анна',
  age: 25
};

for (let value of user) {
  console.log(value);
}

Такой код приведет к ошибке.

Где for…of не подойдет

for…of не стоит использовать, если нужно работать с обычным объектом напрямую.

В таком случае можно использовать for…in, Object.keys(), Object.values() или Object.entries().

let user = {
  name: 'Анна',
  age: 25
};

for (let value of Object.values(user)) {
  console.log(value);
}

Результат:

Анна
25

Здесь Object.values(user) сначала возвращает массив значений объекта, а уже этот массив спокойно перебирается через for…of.

Итого

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

2. Чаще всего его применяют для массивов и строк.

3. Внутри for…of работают break и continue.

4. for…in перебирает ключи, а for…of - значения.

5. Обычный объект нельзя перебрать через for…of напрямую, но можно перебрать массив, полученный через Object.values() или Object.entries().