for...of

Сводка

Оператор for...of выполняет цикл обхода итерируемых объектов (включая Array, Map, Set, объект аргументов и подобных), вызывая на каждом шаге итерации операторы для каждого значения из различных свойств объекта.

Синтаксис

for (переменная of объект)
  оператор

переменная

На каждом шаге итерации переменной присваивается значение нового свойства объекта.

объект

Объект, свойства которого обходятся во время выполнения цикла.

Примеры

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

Следующий пример показывает различия циклов for...of и for...in. В то время как for...in обходит имена свойств, for...of выполняет обход значений свойств:

let arr = [ 3, 5, 7 ];
arr.foo = "hello";

for (let i in arr) {
   console.log(i); // выведет "0", "1", "2", "foo"
}

for (let i of arr) {
   console.log(i); // выведет "3", "5", "7"
}

Использование Array.prototype.forEach()

Для получения значений подобно циклу for...of, вы также можете использовать метод Array.prototype.forEach():

let arr = [ 3, 5, 7 ];
arr.foo = "hello";

arr.forEach(function (element, index) {
    console.log(element); // выведет "3", "5", "7"
    console.log(index);   // выведет "0", "1", "2"
});

// или при помощи Object.keys()

Object.keys(arr).forEach(function (element, index) {
    console.log(arr[element]); // выведет "3", "5", "7", "hello"
    console.log(arr[index]);   // выведет "3", "5", "7"
});

Обход DOM коллекций

Обход DOM коллекций наподобие NodeList: следующий пример добавляет класс read параграфам, являющимся непосредственным потомкам статей:

// Примечание: работает только на платформах, где
// реализован NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll("article > p");

for (let paragraph of articleParagraphs) {
  paragraph.classList.add("read");
}

Обход генераторов

Вы можете выполнять обход генераторов:

function* fibonacci() { // функция-генератор
    let [prev, curr] = [0, 1];
    for (;;) {
        [prev, curr] = [curr, prev + curr];
        yield curr;
    }
}

for (let n of fibonacci()) {
    // ограничивает последовательность на 1000
    if (n > 1000)
        break;
    print(n);
}

Спецификации

Совместимость с браузерами

[1] Функция доступна при настройке. В chrome://flags, активируйте “Enable Experimental JavaScript”.

[2] Поддержка перебора объектов будет добавлена в Chrome 51.

Смотрите также

• for each...in - подобный оператор, обходящий значения свойств объекта, а не имена свойств (устарел).
• Array.prototype.forEach()