Цикл for...of в JS

Цикл for...of в JavaScript позволяет перебирать итерируемые объекты: массивы, множества, Map, строки и т.д. for...of появился в JavaScript ES6.

Синтаксис

for (элемент of итерируемый_объект) {
    // тело цикла for of
}

• итерируемый_объект — массив, множество, строка и т.д.
• элемент — элементы итерируемого объекта.

На русском языке этот код можно прочитать так: для каждого элемента в итерируемом объекте выполнить тело цикла.

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

Цикл for...of можно использовать для перебора элементов массива. Например, так:

// массив
const students = ['Андрей', 'Маша', 'Даня'];

// используем for...of
for ( let element of students ) {

    // выводим значения
    console.log(element);
}

Вывод

Андрей
Маша
Даня

Как вы видите, мы использовали цикл for...of для перебора объекта массива students и вывода всех его элементов.

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

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

// строка
const string = 'кодчик';

// используем for...of loop
for (let i of string) {
    console.log(i);
}

Вывод

к
о
д
ч
и
к

Перебор множества (Set)

Цикл for...of можно использовать для перебора элементов множества. Например, так: 

// задаем множество
const set = new Set([1, 2, 3]);

// перебираем элементы множества
for (let i of set) {
    console.log(i);
}

Вывод

1
2
3

Перебор Map

Цикл for...of можно использовать для перебора элементов объекта Map. Например, так: 

// задаем Map
let map = new Map();

// вставляем элементы
map.set('имя', 'Андрей');
map.set('возраст', '27');

// перебираем элементы Map
for (let [key, value] of map) {
    console.log(key + ': ' + value);
}

Вывод

Имя: Андрей
Возраст: 27

Перебор пользовательских итерируемых объектов

Вы можете создать итерируемые объект вручную и использовать цикл for...of для его перебора. Например:

// создаем итерируемый объект
const iterableObj = {

    // метод iterator
    [Symbol.iterator]() {
        let step = 0;
        return {
            next() {
                step++;
                if (step === 1) {
                    return { value: '1', done: false};
                 }
                else if (step === 2) {
                    return { value: '2', done: false};
                }
                else if (step === 3) {
                    return { value: '3', done: false};
                }
                return { value: '', done: true };
            }
        }
    }
}

// перебираем итерируемый объект с помощью for...of
for (const i of iterableObj) {
 console.log(i);
}

Вывод

1
2
3

Перебор генераторов

Генератор тоже можно перебрать с помощью for...of, потому что генератор — итерируемый объект.

// функция-генератор
function* generatorFunc() {
  
    yield 10;
    yield 20;
    yield 30;
}

const obj = generatorFunc();

// перебор генератора
for (let value of obj) {
    console.log(value);
}

Вывод

10
20
30

Отличия for...of от for...in

for...of	for...in
Для перебора значений итерируемого объекта.	Для перебора ключей объекта.
Нельзя использовать для перебора объекта.	Можно использовать для перебора объекта, но не стоит использовать для перебора итерируемых объектов.