JS об'єкт for...in
Загальний опис
for...in — це спеціальна конструкція JavaScript, яка використовується для ітерації по перелічуваних властивостях об'єкта. Цей цикл дозволяє отримати ключі (імена властивостей) об'єкта, які потім можна використовувати для доступу до їхніх значень.
При використанні for...in цикл перебирає всі ключі, які є власними або успадкованими властивостями об'єкта. Властивості, які є неперелічуваними (наприклад, зі встановленим enumerable: false), не будуть включені в ітерацію.
Простий приклад:
const user = {
name: "Іван",
age: 25,
city: "Київ"
};
for (let key in user) {
console.log(`${key}: ${user[key]}`);
}
// Виведе:
// name: Іван
// age: 25
// city: Київ
Цикл працює не тільки з власними властивостями об'єкта, але й з успадкованими. Це означає, що властивості з прототипу також будуть перебрані. Щоб обмежити цикл тільки власними властивостями, можна використовувати метод hasOwnProperty:
for (let key in user) {
if (user.hasOwnProperty(key)) {
console.log(`${key}: ${user[key]}`);
}
}
for...in часто використовується для роботи зі звичайними об'єктами, але його не варто застосовувати для ітерації масивів, оскільки він перебирає індекси у вигляді рядків, що може призводити до несподіваних результатів. Для масивів краще підходить for або for...of.
Цей цикл зручний, коли потрібно обробляти динамічний набір властивостей, наприклад, з API або налаштувань користувача.
| Порада: | Не використовуйте |
| Порада: | Коли ітеруєте об'єкт, що може мати властивості з прототипу, завжди перевіряйте |
| Порада: | Для перевірки, чи властивість є перелічуваною, можна скористатися методом |
Синтаксис
for (let key in object) {
// Дії з object[key]
}Переглядачі
| Переглядач | |||||
|---|---|---|---|---|---|
1 |
1 |
1 |
2 |
12 |
| Переглядач | ||||
|---|---|---|---|---|
4.4 |
18 |
4 |
1 |
| Переглядач | ||
|---|---|---|
0.10.0 |
1.0 |
Приклади
Цей код дозволяє редагувати властивості об'єкта через форму. Користувач може змінити будь-яке значення, натиснути "Оновити об'єкт", і всі зміни миттєво відобразяться у вікні результату. Це чудовий приклад для демонстрації роботи з for...in та інтерактивності.
Цей приклад показує, як об'єднати кілька об'єктів, використовуючи for...in. Властивості з об'єкта obj2 перекривають властивості obj1.
const obj1 = { a: 1, b: 2 };
const obj2 = { b: 3, c: 4 };
const result = {};
for (let key in obj1) {
result[key] = obj1[key];
}
for (let key in obj2) {
result[key] = obj2[key];
}
console.log(result); // { a: 1, b: 3, c: 4 }У цьому прикладі ключі та значення об'єкта міняються місцями. Це корисно для випадків, коли потрібно зробити зворотне мапування значень до ключів.
const user = { name: "Іван", age: 25, city: "Київ" };
const swapped = {};
for (let key in user) {
swapped[user[key]] = key;
}
console.log(swapped);
// { Іван: "name", 25: "age", Київ: "city" }