JavaScript цикл for…of

Починаючи з ES6 в JavaScript було введено новий оператор for…of, котрий виконує ітерацію (перебір) над об’єктами котрі ітеруються, такими як наприклад:

  • Array, String, Map, Set, тощо
  • користувацькі об’єкти котрі реалізують протокол ітератора
  • Array-подібні об’єкти, такі як arguments

Синтаксис циклу for…of

for (const item of iterable) {
  // код для виконання на кожній ітерації ...
}

  • item – змінна, в яку буде записано поточне значення ітерації. Якщо в тілі циклу планується зміна значення змінної item, для її оголошення слід використовувати ключове слово let (про let в JavaScript), замість const.
  • iterable – ітерований об’єкт (Array, String, Map, Set, тощо).

Приклади використання for…of

Використання for…of для ітерації по елементам Array (масив):

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

for (const number of numbers) {
  console.log(number);
}

// OUTPUT: 1, 2, 3, 4, 5

Щоб отримати доступ до індексу елементів масиву всередині циклу, можна використати інструкцію for…of в поєднанні з методом масиву entries(). Метод array.entries() – повертає пару [індекс, елемент], на кожній ітерації. Наприклад:

let names = ['Fatima', 'Alex', 'Vinnie'];

for (const [index, name] of names.entries()) {
  console.log(`${index}: ${name}`);
}

Результат:

0: Fatima
1: Alex
2: Vinnie

Деструктуризація об’єктів в циклі for…of:

let employees = [
  { name: 'Sam', salary: 1000 },
  { name: 'Alexis', salary: 1500 },
  { name: 'Sarah', salary: 1200 },
];

let sum = 0;
for (const { salary } of employees) {
  sum += salary;
}

console.log(`Total salary: ${sum}`);

// OUTPUT: Total salary: 3700

Як працює приклад вище:

  • employees – це масив об’єктів, де кожен об’єкт має дві властивості: name та salary
  • вираз const { salary } of employees використовує деструктуризацію об’єктів, для отримання значення властивості salary з поточного елемента ітерації, та присвоєння його змінній salary
  • for…of ітерує масив employees, обчислюючи загальну salary для всіх об’єктів

Ітерація по string

Приклад використання циклу for…of для перебору символів рядка:

let str = 'ABC';
for (const char of str) {
  console.log(char);
}

// OUTPUT: A, B, C

Ітерація по об’єкту Map

Приклад використання for…of для перебору об’єкта Map:

let colors = new Map();

colors.set('red', '#ff0000');
colors.set('green', '#00ff00');
colors.set('blue', '#0000ff');

for (const [key, value] of colors) {
  console.log(`${key}: ${value}`);
}

Результат:

red: #ff0000
green: #00ff00
blue: #0000ff

Відмінність for…of від for…in

  • for…of – перебирає елементи будь-якої колекції, яка має властивість [Symbol.iterator]
  • for…in – перебирає перелічувані імена властивостей об’єкта

Наступний приклад ілюструє відмінності між for…of та for…in:

const elements = ['A', 'B', 'C'];
elements.customProperty = 'custom';

for (const item of elements) {
  console.log(item);
}

// OUTPUT: A, B, C

for (const item in elements) {
  console.log(item);
}

// OUTPUT: 0, 1, 2, customProperty

В цьому прикладі, for…of виконує ітерацію по елементам масиву elements, та повертає результат:

A
B
C

Тоді як for…in повертає властивості об’єкта масиву elements:

0
1
2
customProperty

Висновок

Цикл for…of слід використовувати коли є потреба перебору елементів ітерованого об’єкта.

Мітки: