JS об'єкт for...of
Загальний опис
for...of — це конструкція JavaScript, яка дозволяє перебирати ітеративні об'єкти, такі як масиви, рядки, Map, Set, NodeList тощо. На відміну від for...in, який працює з ключами (або індексами), for...of повертає значення кожного елемента, що робить його зручним для роботи з даними.
Ітеративний об'єкт — це той, який реалізує метод Symbol.iterator. Наприклад, масиви є ітеративними за замовчуванням, тому з ними легко працювати за допомогою for...of.
Простий приклад з масивом:
const numbers = [1, 2, 3, 4];
for (let num of numbers) {
console.log(num); // Виведе 1, 2, 3, 4
}
Для рядків for...of ітерує кожен символ:
const message = "Привіт";
for (let char of message) {
console.log(char); // Виведе "П", "р", "и", "в", "і", "т"
}
Ця конструкція також працює з об'єктами Map та Set. Наприклад, у Map вона перебирає пари ключ-значення, тоді як у Set повертає унікальні значення:
const users = new Map([
["id1", "Іван"],
["id2", "Ольга"]
]);
for (let [id, name] of users) {
console.log(`${id}: ${name}`);
}
for...of не працює з об'єктами (наприклад, {}), які не є ітеративними. Для них потрібно використовувати for...in або методи Object.keys.
Цей цикл зручний і інтуїтивний, оскільки дозволяє зосередитися на значеннях, а не на ключах або індексах. У поєднанні з деструктуризацією це робить код читабельнішим і компактним.
| Порада: | Не плутайте |
| Порада: | Використовуйте |
| Порада: | Для ітерації через асинхронні дані розгляньте |
Синтаксис
for (let value of iterable) {
// Дії з value
}Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
38 |
13 |
7 |
25 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
38 |
38 |
14 |
7 |
| Переглядач | ||
|---|---|---|
0.12.0 |
1.0 |
Приклади
Цей приклад ілюструє, як за допомогою for...of можна перебирати список елементів DOM і застосовувати до кожного з них нові стилі. Користувач вибирає колір, а кнопка запускає оновлення, дозволяючи в реальному часі змінювати зовнішній вигляд сторінки.
Цей приклад демонструє, як за допомогою for...of перебирати Map, отримуючи одночасно ключі (імена користувачів) і значення (ролі). Це корисно для обробки складних структур даних, наприклад, з API.
const userRoles = new Map([
["Іван", "адмін"],
["Ольга", "користувач"],
["Анна", "модератор"]
]);
for (let [user, role] of userRoles) {
console.log(`${user} має роль ${role}`);
}Тут for...of використовується для ітерації через множини Set, об'єднуючи значення у новий об'єкт, що містить лише унікальні елементи. Це допомагає ефективно уникати дублювання в наборах даних.
const set1 = new Set([1, 2, 3]);
const set2 = new Set([3, 4, 5]);
const uniqueValues = new Set();
for (let value of set1) {
uniqueValues.add(value);
}
for (let value of set2) {
uniqueValues.add(value);
}
console.log(Array.from(uniqueValues)); // Виведе [1, 2, 3, 4, 5]