Как перебрать все свойства объекта JavaScript и получить доступ к каждому вложенному объекту?

Использование Object.keys(), Object.values() и Object.entries()

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

1. Метод Object.values() — самый простой способ

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

const cars = {
  bmw: { model: 'X5', year: 2020, specs: { engine: '3.0L', horsepower: 335 } },
  audi: { model: 'A4', year: 2021, specs: { engine: '2.0L', horsepower: 261 } },
  toyota: { model: 'Camry', year: 2019, specs: { engine: '2.5L', horsepower: 203 } }
};

Object.values(cars).forEach(car => {
  console.log(`${car.model} (${car.year}): ${car.specs.engine}, ${car.specs.horsepower} л.с.`);
});
// Вывод:
// X5 (2020): 3.0L, 335 л.с.
// A4 (2021): 2.0L, 261 л.с.
// Camry (2019): 2.5L, 203 л.с.

2. Метод Object.entries() — если нужны и ключи, и значения

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

Object.entries(cars).forEach(([brand, car]) => {
  console.log(`Марка: ${brand.toUpperCase()}`);
  console.log(`Модель: ${car.model}, Год: ${car.year}`);
  console.log(`Двигатель: ${car.specs.engine}, Мощность: ${car.specs.horsepower} л.с.`);
  console.log('---');
});
// Вывод:
// МАРКА: BMW
// Модель: X5, Год: 2020
// Двигатель: 3.0L, Мощность: 335 л.с.
// ---
// МАРКА: AUDI
// ...

3. Метод Object.keys() — когда нужны только ключи

Если тебе нужны только названия марок (bmw, audi, toyota) для дальнейшей работы:

Object.keys(cars).forEach(brand => {
  console.log(`Найдена марка: ${brand}`);
});
// Вывод:
// Найдена марка: bmw
// Найдена марка: audi
// Найдена марка: toyota

Важные замечания

• Все эти методы возвращают массивы, поэтому ты можешь использовать любые методы массивов: forEach(), map(), filter(), reduce() и другие.
• Порядок свойств: в современных браузерах порядок строковых ключей сохраняется в порядке их добавления. Числовые ключи сортируются по возрастанию.
• Не используй for...in для массивов — он перебирает ещё и унаследованные свойства через прототип.
• Производительность: эти методы работают быстро, но для очень больших объектов (миллионы свойств) стоит подумать об оптимизации.

Сравнение подходов

Вот наглядная таблица, когда что использовать:

// Нужны только значения (сами объекты) — используй Object.values()
Object.values(cars).forEach(car => { /* работаем с car */ });

// Нужны ключи и значения — используй Object.entries()
Object.entries(cars).forEach(([key, value]) => { /* key = 'bmw', value = { model: 'X5', ... } */ });

// Нужны только ключи — используй Object.keys()
Object.keys(cars).forEach(key => { /* key = 'bmw' */ });

В твоём случае, если нужно просто вывести все автомобили, рекомендую Object.values() — он даёт прямой доступ к объектам без лишних ключей. Если же нужно показать название марки, бери Object.entries().

const cars = {
  bmw: { model: 'X5', year: 2020 },
  audi: { model: 'A4', year: 2021 }
};

// Деструктуризация прямо в объявлении цикла
for (const [brand, car] of Object.entries(cars)) {
  console.log(`${brand}: ${car.model} (${car.year})`);
}
// Вывод:
// bmw: X5 (2020)
// audi: A4 (2021)

const carsArray = Object.entries(cars).map(([brand, car]) => ({
  brand,
  fullName: `${car.model} (${car.year})`
}));
console.log(carsArray);
// [{ brand: 'bmw', fullName: 'X5 (2020)' }, { brand: 'audi', fullName: 'A4 (2021)' }]