Как перебрать все свойства объекта в JavaScript? Итерация по ключам и значениям

Как перебрать свойства объекта: полное руководство

Привет! Ты столкнулся с классической задачей. В JavaScript объекты — это не массивы, поэтому обычный цикл for (с индексом) тут не подходит. Но есть несколько отличных способов. Разберем их от простого к сложному.

1. Цикл for...in — самый простой способ

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

const users = {
  user1: { name: 'Анна', age: 25 },
  user2: { name: 'Иван', age: 30 },
  user3: { name: 'Мария', age: 28 }
};

for (let key in users) {
  console.log('Ключ:', key);
  console.log('Значение:', users[key]);
  console.log('Имя:', users[key].name);
  console.log('Возраст:', users[key].age);
  console.log('---');
}
// Вывод:
// Ключ: user1
// Значение: {name: "Анна", age: 25}
// Имя: Анна
// Возраст: 25
// ---
// ... и так для каждого пользователя

Важно! for...in также перебирает унаследованные свойства. Чтобы избежать этого, используйте проверку hasOwnProperty:

for (let key in users) {
  if (users.hasOwnProperty(key)) {
    console.log(key, users[key]);
  }
}

2. Object.keys() — получаем массив ключей

Метод возвращает массив всех собственных (не унаследованных) ключей объекта. Затем можно использовать любой метод для перебора массива:

const keys = Object.keys(users);
console.log(keys); // ["user1", "user2", "user3"]

// Вариант с forEach (самый популярный)
Object.keys(users).forEach(key => {
  console.log(`Пользователь ${key}: ${users[key].name}, ${users[key].age} лет`);
});

// Или обычный цикл for
for (let i = 0; i < keys.length; i++) {
  const key = keys[i];
  console.log(users[key].name);
}

3. Object.values() — получаем массив значений

Если ключи не важны, а нужны только значения:

const values = Object.values(users);
console.log(values);
// [{name: "Анна", age: 25}, {name: "Иван", age: 30}, {name: "Мария", age: 28}]

values.forEach(user => {
  console.log(`${user.name} - ${user.age}`);
});

4. Object.entries() — получаем пары [ключ, значение]

Это самый мощный метод, когда нужны и ключи, и значения. Возвращает массив массивов:

const entries = Object.entries(users);
console.log(entries);
// [
//   ["user1", {name: "Анна", age: 25}],
//   ["user2", {name: "Иван", age: 30}],
//   ["user3", {name: "Мария", age: 28}]
// ]

// Перебор с деструктуризацией
Object.entries(users).forEach(([key, value]) => {
  console.log(`${key}: ${value.name}, ${value.age}`);
});

// Или с циклом for...of (более современный стиль)
for (const [key, user] of Object.entries(users)) {
  console.log(`ID: ${key}, Имя: ${user.name}, Возраст: ${user.age}`);
}

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

• Нужны только ключи → Object.keys()
• Нужны только значения → Object.values()
• Нужны и ключи, и значения → Object.entries() (или for...in с hasOwnProperty)
• Самый короткий код для новичка → for...in

Современный стандарт (ES6+) рекомендует использовать Object.keys(), Object.values() или Object.entries() в паре с forEach или for...of, так как они работают только с собственными свойствами и дают больше контроля.

const obj = {};
Object.defineProperty(obj, 'hidden', {
  value: 42,
  enumerable: false
});
obj.visible = 100;

console.log(Object.keys(obj));       // ["visible"]
console.log(Object.getOwnPropertyNames(obj)); // ["hidden", "visible"]

Object.getOwnPropertyNames(obj).forEach(key => {
  console.log(key, obj[key]); // hidden 42, visible 100
});