Как перебрать все свойства объекта циклом for...in?

👨‍💻 Frontend Developer 🟠 Может встретиться 🎚️ Легкий
#JavaScript #Объекты #База JS

Краткий ответ

Цикл for…in перебирает все перечисляемые свойства объекта, включая унаследованные. Он проходит по именам свойств, а не по значениям. Чтобы получить значение, нужно использовать квадратные скобки с именем свойства.


Полный ответ

Цикл for…in — это способ пройтись по всем свойствам объекта. Он очень прост в использовании, но имеет особенности, о которых нужно знать.

Как работает for…in

Цикл проходит по именам всех перечисляемых свойств:

const user = { name: 'Иван', age: 25 };
 
for (let key in user) {
  console.log(key); // Выведет 'name', потом 'age'
  console.log(user[key]); // Выведет 'Иван', потом 25
}

Что перебирает for…in

Собственные свойства

const obj = { a: 1, b: 2 };
// Переберет a и b

Унаследованные свойства

const obj = {};
// Переберет toString, hasOwnProperty и другие унаследованные методы

Простые примеры

Перебор простого объекта

const user = { 
  name: 'Иван', 
  age: 25, 
  city: 'Москва' 
};
 
for (let prop in user) {
  console.log(prop + ': ' + user[prop]);
}
// name: Иван
// age: 25
// city: Москва

Важные особенности

1. Порядок перебора

// Числовые ключи идут первыми по возрастанию
const obj = { 3: 'три', 1: 'один', 2: 'два', a: 'буква' };
// Порядок: 1, 2, 3, a

2. Унаследованные свойства

const obj = { name: 'Иван' };
// obj.toString тоже перебирается!
 
for (let key in obj) {
  console.log(key); // name, toString, hasOwnProperty...
}

Как избежать проблем

Проверка собственных свойств

const obj = { name: 'Иван' };
 
for (let key in obj) {
  // Проверяем, что свойство принадлежит объекту
  if (obj.hasOwnProperty(key)) {
    console.log(key + ': ' + obj[key]);
  }
}

Только собственные свойства

const user = { name: 'Иван', age: 25 };
 
// Лучший способ — перебирать только свои свойства
for (let key in user) {
  if (user.hasOwnProperty(key)) {
    console.log(key, user[key]);
  }
}

Частые ошибки

1. Перебор унаследованных свойств

// ❌ Перебираем лишнее
const obj = { name: 'Иван' };
for (let key in obj) {
  console.log(obj[key]); // Выведет и name, и toString, и другие методы
}
 
// ✅ Только свои свойства
for (let key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(obj[key]); // Только name
  }
}

2. Ожидание порядка свойств

// ❌ Не рассчитываем на порядок (до ES6)
const obj = { b: 2, a: 1, c: 3 };
// Порядок может быть разным
 
// ✅ Для порядка используем массивы или Map

Простые правила

  1. for…in — для перебора имен свойств объекта
  2. user[key] — чтобы получить значение свойства
  3. hasOwnProperty — чтобы отфильтровать унаследованные свойства
  4. Порядок — числовые ключи идут первыми
  5. Осторожно — перебирает все перечисляемые свойства

Цикл for…in удобен для простого перебора свойств, но всегда проверяйте, что свойство принадлежит самому объекту с помощью hasOwnProperty.


Хотите больше статей для подготовки к собеседованиям? Подписывайтесь на EasyAdvice, добавляйте сайт в закладки и совершенствуйтесь каждый день 💪