MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Это экспериментальная технология, часть предложения Harmony (ECMAScript 6).
Поскольку спецификация этой технологии ещё не стабилизировалась, проверьте таблицу совместимости её использования в различных браузерах. Также обратите внимание, что синтаксис и поведение экспериментальной технологии могут быть изменены в будущих версиях браузеров в соответствии с изменениями в спецификации.

Сводка

Оператор for...of выполняет цикл обхода итерируемых объектов (включая ArrayMap, 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);
}

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

Спефицикация Статус Комментарий
ECMAScript 2015 (6th Edition, ECMA-262)
Определение 'for...of statement' в этой спецификации.
Стандарт Изначальное опеределение.

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

Возможность Chrome Firefox (Gecko) Internet Explorer Opera Safari
Базовая поддержка 29 [1]
38
51 [2]
13 (13) Нет 25 7.1
Возможность Android Chrome for Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Базовая поддержка ? 29[1]
38
13.0 (13) ? ? iOS 8

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

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

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

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

Метки документа и участники

 Внесли вклад в эту страницу: babichss, ZeroUnderscoreOu, BychekRU, SphinxKnight, dtretyakov
 Обновлялась последний раз: babichss,