Как перебрать объект в JavaScript: 5 способов с примерами

Как перебрать объект в JavaScript: от новичка до профи

Каждый разработчик рано или поздно сталкивается с задачей: «Как мне пройтись по всем свойствам объекта?». Вопрос настолько популярен, что на Stack Overflow он собрал тысячи просмотров и сотни ответов. И неудивительно — объекты в JavaScript это основа всего: от конфигураций до данных с сервера.

В этом туториале мы разберём все основные способы перебора объекта в JavaScript, от классики до современных методов. Вы узнаете, когда использовать for...in, чем Object.keys лучше, и как Object.entries упрощает жизнь. Поехали!

Подготовка: создаём тестовый объект

Чтобы примеры были наглядными, возьмём простой объект пользователя:

const user = {
  name: 'Анна',
  age: 28,
  city: 'Москва',
  isAdmin: false
};

Наша задача — вывести все ключи и значения. Посмотрим, какие инструменты есть в арсенале JavaScript.

1. Цикл for...in — классика жанра

Самый старый и базовый способ перебора свойств объекта. Он появился ещё в ES3 и работает во всех браузерах.

for (let key in user) {
  console.log(key + ': ' + user[key]);
}
// name: Анна
// age: 28
// city: Москва
// isAdmin: false

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

for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key + ': ' + user[key]);
  }
}

Современные объекты редко имеют лишние прототипные свойства, но привычка проверять hasOwnProperty убережёт от багов при работе с библиотеками.

2. Object.keys() — современный подход

Метод Object.keys() возвращает массив собственных ключей объекта. Это избавляет от проблем с прототипами и даёт доступ ко всем методам массивов.

const keys = Object.keys(user);
console.log(keys); // ['name', 'age', 'city', 'isAdmin']

keys.forEach(key => {
  console.log(key + ': ' + user[key]);
});

Преимущества:

• Работает только с собственными свойствами (неунаследованными)
• Возвращает массив — можно использовать forEach, map, filter
• Читаемый и предсказуемый код

Это мой любимый способ, когда нужно просто получить список ключей и поработать с ними.

3. Object.values() — когда нужны только значения

Иногда нас интересуют только значения свойств, без ключей. Например, для суммирования или отображения данных.

const values = Object.values(user);
console.log(values); // ['Анна', 28, 'Москва', false]

values.forEach(value => {
  console.log(value);
});

Метод появился в ES2017 и отлично подходит для работы с коллекциями данных, где ключи не имеют значения.

4. Object.entries() — король среди методов

Object.entries() возвращает массив массивов, где каждый вложенный массив — это пара [ключ, значение]. Это универсальный инструмент для перебора объекта в JavaScript.

const entries = Object.entries(user);
console.log(entries);
// [
//   ['name', 'Анна'],
//   ['age', 28],
//   ['city', 'Москва'],
//   ['isAdmin', false]
// ]

entries.forEach(([key, value]) => {
  console.log(`${key}: ${value}`);
});

Обратите внимание на деструктуризацию в параметрах forEach: ([key, value]). Это делает код чистым и лаконичным.

Когда использовать:

• Нужны и ключи, и значения
• Хотите преобразовать объект в другую структуру (например, в Map)
• Пишете функциональный код с map/filter

5. for...of с Object.entries() — современный синтаксис

Комбинация for...of и Object.entries() даёт максимально читаемый цикл:

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

Этот способ особенно удобен, когда нужно прервать цикл досрочно (через break или continue), что невозможно в forEach.

Сравнение всех способов

Давайте сведём всё в таблицу для наглядности:

Практический пример: фильтрация данных

Допустим, у нас есть объект с товарами, и нужно оставить только те, что в наличии:

const products = {
  laptop: { price: 1200, inStock: true },
  phone: { price: 800, inStock: false },
  tablet: { price: 600, inStock: true }
};

// Используем Object.entries() и filter
const inStockProducts = Object.entries(products)
  .filter(([name, info]) => info.inStock)
  .map(([name, info]) => ({ name, price: info.price }));

console.log(inStockProducts);
// [
//   { name: 'laptop', price: 1200 },
//   { name: 'tablet', price: 600 }
// ]

Этот паттерн — Object.entries() → filter → map — один из самых мощных при работе с объектами.

Частые ошибки и как их избежать

Ошибка 1: Путаница между for...in и for...of

for...in перебирает ключи объекта. for...of — значения итератора.