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 або налаштувань користувача.

правити

Порада

Коли ітеруєте об'єкт, що може мати властивості з прототипу, завжди перевіряйте hasOwnProperty. Це гарантує, що ви обробляєте лише власні властивості об'єкта, а не успадковані.

автор: Bond правити

Порада

Не використовуйте for...in для ітерації масивів, оскільки цикл повертає індекси у вигляді рядків. Це може викликати проблеми при використанні методів масиву. Наприклад, методи Array.prototype також можуть бути перелічуваними, що зробить ітерацію непередбачуваною.

автор: Bond правити

Порада

Для перевірки, чи властивість є перелічуваною, можна скористатися методом propertyIsEnumerable. Це корисно, якщо вам потрібно ігнорувати властивості, які встановлені з enumerable: false.

автор: Bond правити

+ додати пораду чи нотатку

Синтаксис

for (let key in object) {
  // Дії з object[key]
}

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі Серверні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
	1	1	1	2	12

Підтримка: мобільні переглядачі

Переглядач
	4.4	18	4	1

Підтримка: серверні переглядачі

Переглядач
	0.10.0	1.0

Приклади

+ запропонувати свій приклад у пісочниці

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" }