Как перебрать (итерировать) все свойства объекта в JavaScript?

Основные способы перебора свойств объекта

Ваша проблема в том, что обычные объекты JavaScript не являются итерируемыми (в отличие от массивов, строк, Map, Set). Поэтому for...of не работает. А user.length равен undefined, поэтому цикл for не выполняется ни разу.

Для перебора свойств объекта существует несколько проверенных способов. Рассмотрим каждый из них.

1. Цикл for...in (классический способ)

Самый простой и интуитивно понятный метод — использовать цикл for...in. Он перебирает все перечисляемые свойства объекта, включая те, что находятся в цепочке прототипов (об этом важно помнить!).

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]}`);
  }
}

2. Метод Object.keys() + forEach() (современный стиль)

Этот метод возвращает массив собственных ключей объекта. Затем вы можете перебрать этот массив любым способом, например с помощью forEach().

Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});
// Вывод:
// name: Анна
// age: 25
// city: Москва

Преимущество: Object.keys() возвращает только собственные свойства, поэтому не нужно проверять hasOwnProperty.

3. Метод Object.values() (только значения)

Если вам нужны только значения, без ключей, используйте Object.values():

Object.values(user).forEach(value => {
  console.log(value);
});
// Вывод:
// Анна
// 25
// Москва

4. Метод Object.entries() (пары ключ-значение)

Этот метод возвращает массив массивов, где каждый внутренний массив — это пара [ключ, значение]. Очень удобно для деструктуризации:

Object.entries(user).forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});
// Вывод:
// name: Анна
// age: 25
// city: Москва

Также можно использовать с циклом for...of:

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

5. Метод Object.getOwnPropertyNames()

Возвращает все собственные свойства объекта (включая неперечисляемые). Используйте, если нужно получить даже те свойства, которые скрыты от for...in и Object.keys():

Object.getOwnPropertyNames(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

Сравнение методов

• for...in — перебирает все перечисляемые свойства (включая унаследованные). Требуется проверка hasOwnProperty.
• Object.keys() — только собственные перечисляемые ключи.
• Object.values() — только собственные перечисляемые значения.
• Object.entries() — пары ключ-значение для собственных перечисляемых свойств.
• Object.getOwnPropertyNames() — все собственные ключи (включая неперечисляемые).

Какой способ выбрать?

Для 90% случаев используйте Object.keys() или Object.entries() — они современны, читаемы и безопасны. Если вам нужна максимальная производительность в старом коде, подойдет for...in с hasOwnProperty. Если нужно перебрать значения — Object.values().

Надеюсь, теперь стало понятно! Удачи в изучении JavaScript!

const userMap = new Map([
  ['name', 'Анна'],
  ['age', 25],
  ['city', 'Москва']
]);

// Перебор с forEach
userMap.forEach((value, key) => {
  console.log(`${key}: ${value}`);
});

// Перебор с for...of (работает!)
for (const [key, value] of userMap) {
  console.log(`${key}: ${value}`);
}