for...of

Конструкція for...of створює цикл, що перебирає ітерабельні об'єкти, в тому числі: вбудовані String, Array, подібні до масиву об'єкти (наприклад, arguments або NodeList), TypedArray, Map, Set, а також визначені користувачем ітерабельні об'єкти. Він викликає користувацький хук до ітерацій з командами, що виконуються для значення кожної окремої властивості об'єкта.

for (variable of iterable) {
  statement
}

variable

На кожній ітерації параметру variable призначається значення іншої властивості. Параметр variable може бути оголошений через const, let або var.

iterable

Об'єкт, чиї ітерабельні властивості перебираються.

let iterable = [10, 20, 30];

for (let value of iterable) {
  value += 1;
  console.log(value);
}
// 11
// 21
// 31

Ви також можете використати const замість let, якщо не переприсвоюєте змінну всередині блоку.

let iterable = [10, 20, 30];

for (const value of iterable) {
  console.log(value);
}
// 10
// 20
// 30

let iterable = 'фух';

for (let value of iterable) {
  console.log(value);
}
// "ф"
// "у"
// "х"

let iterable = new Uint8Array([0x00, 0xff]);

for (let value of iterable) {
  console.log(value);
}
// 0
// 255

let iterable = new Map([['а', 1], ['б', 2], ['в', 3]]);

for (let entry of iterable) {
  console.log(entry);
}
// ['а', 1]
// ['б', 2]
// ['в', 3]

for (let [key, value] of iterable) {
  console.log(value);
}
// 1
// 2
// 3

let iterable = new Set([1, 1, 2, 2, 3, 3]);

for (let value of iterable) {
  console.log(value);
}
// 1
// 2
// 3

Ви можете перебирати об'єкт arguments, щоб дослідити усі параметри, передані у функцію JavaScript:

(function() {
  for (let argument of arguments) {
    console.log(argument);
  }
})(1, 2, 3);

// 1
// 2
// 3

Перебір колекцій DOM-елементів, таких як NodeList: наступний приклад додає клас read до вузлів paragraph, які є прямими нащадками вузла article:

// Заувага: Це працюватиме лише у платформах, де
// реалізовано NodeList.prototype[Symbol.iterator]
let articleParagraphs = document.querySelectorAll('article > p');

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

У циклах for...of раптове переривання ітерації може бути спричинено операторами break, throw або return. У цих випадках ітератор закривається.

function* foo(){
  yield 1;
  yield 2;
  yield 3;
};

for (let o of foo()) {
  console.log(o);
  break; // закриває ітератор, виконання продовжується поза циклом
}
console.log('done');

Ви також можете перебирати генератори, тобто, функції, що генерують ітерабельні об'єкти:

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

for (let n of fibonacci()) {
  console.log(n);
  // обрізати послідовність на 1000
  if (n >= 1000) {
    break;
  }
}

Не використовуйте генератори повторно

Генератори не можна використовувати повторно, навіть якщо цикл for...of завчасно перервався, наприклад, ключовим словом break. На виході з циклу генератор закривається, і спроби викликати його знову не дадуть подальших результатів.

let gen = (function *(){
  yield 1;
  yield 2;
  yield 3;
})();
for (let o of gen) {
  console.log(o);
  break;  // закриває ітератор
}

// Генератор не можна використовувати знову, наступне не має сенсу!
for (let o of gen) {
  console.log(o); // Ніколи не виконається.
}

Ви також можете перебирати об'єкт, який відкрито реалізує протокол ітерабельного:

let iterable = {
  [Symbol.iterator]() {
    return {
      i: 0,
      next() {
        if (this.i < 3) {
          return { value: this.i++, done: false };
        }
        return { value: undefined, done: true };
      }
    };
  }
};

for (let value of iterable) {
  console.log(value);
}
// 0
// 1
// 2

І цикл for...in, і цикл for...of щось перебирають. Головна різниця між ними полягає в тому, що саме вони перебирають.

Цикл for...in перебирає перелічувані властивості об'єкта, у довільному порядку.

Цикл for...of перебирає значення, які ітерабельний об'єкт визначає для перебирання.

Наступний приклад демонструє різницю між циклом for...of та циклом for...in при використанні з масивом.

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'привіт';

for (let i in iterable) {
  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
}

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // виведе 0, 1, 2, "foo"
  }
}

for (let i of iterable) {
  console.log(i); // виведе 3, 5, 7
}

Розглянемо наведений код крок за кроком.

Object.prototype.objCustom = function() {};
Array.prototype.arrCustom = function() {};

let iterable = [3, 5, 7];
iterable.foo = 'привіт';

Кожний об'єкт успадковуватиме властивість objCustom і кожний об'єкт, що є об'єктом Array, успадковуватиме властивість arrCustom, оскільки ці властивості були додані у Object.prototype та Array.prototype відповідно. Об'єкт iterable успадковує властивості objCustom та arrCustom через наслідування та ланцюжок прототипів.

for (let i in iterable) {
  console.log(i); // виведе 0, 1, 2, "foo", "arrCustom", "objCustom"
}

Цей цикл виводить тільки перелічувані властивості об'єкта iterable, у довільному порядку. Він не виводить елементи масиву 3, 5, 7 або привіт, оскільки вони не є перелічуваними властивостями, власне, вони взагалі не є властивостями, вони є значеннями. Цикл виводить індекси масиву, а також arrCustom та objCustom, які є властивостями. Якщо ви не певні, чому ці властивості перебираються, є більш детальне пояснення того, як працює перебір масиву та for...in.

for (let i in iterable) {
  if (iterable.hasOwnProperty(i)) {
    console.log(i); // виведе 0, 1, 2, "foo"
  }
}

Цей цикл схожий на перший, але використовує hasOwnProperty() для перевірки, чи є знайдена перелічувана властивість особистою властивістю об'єкта, тобто, не успадкованою. Якщо є, властивість виводиться. Властивості 0, 1, 2 та foo виводяться, оскільки вони є особистими властивостями (не успадкованими). Властивості arrCustom та objCustom не виводяться, оскільки вони успадковані.

for (let i of iterable) {
  console.log(i); // виведе 3, 5, 7
}

Цей цикл перебирає та виводить значення, які iterable як ітерабельний об'єкт визначає для перебору. Елементи об'єкта 3, 5, 7 виводяться, але немає жодної з властивостей об'єкта.

• Array.prototype.forEach()
• Map.prototype.forEach()