В чем разница между Object.keys и перебором через for...in?

В JavaScript есть несколько способов перебрать свойства объекта. Два наиболее распространённых — это метод Object.keys() и цикл for...in. Хотя оба позволяют получить доступ к свойствам, их поведение и область применения различаются.

Object.keys()

Метод Object.keys(obj) возвращает массив строк, представляющих собственные перечисляемые свойства объекта obj. "Собственные" означают, что свойства принадлежат самому объекту, а не унаследованы от его прототипа. "Перечисляемые" — это свойства, для которых внутренний флаг enumerable установлен в true (большинство свойств, созданных обычным присваиванием, являются перечисляемыми).

const obj = { a: 1, b: 2 };
console.log(Object.keys(obj)); // ['a', 'b']

// Использование с for...of
for (const key of Object.keys(obj)) {
  console.log(key, obj[key]); // a 1, затем b 2
}

Цикл for...in

Цикл for (const key in obj) перебирает все перечисляемые свойства объекта, включая те, которые унаследованы через цепочку прототипов. Это ключевое отличие. Если в прототипе объекта есть перечисляемые свойства, они также будут выведены, что часто является нежелательным побочным эффектом.

const parent = { inheritedProp: 'from parent' };
const child = Object.create(parent);
child.ownProp = 'own';

// for...in выведет и собственное, и унаследованное свойство
for (const key in child) {
  console.log(key); // 'ownProp', затем 'inheritedProp'
}

// Object.keys покажет только собственное свойство
console.log(Object.keys(child)); // ['ownProp']

Чтобы цикл for...in перебирал только собственные свойства, внутри цикла необходимо использовать проверку obj.hasOwnProperty(key).

Практическое применение и рекомендации

• Object.keys идеально подходит, когда вам нужен массив ключей для дальнейшей обработки (например, с помощью map, filter) или когда важно работать только с собственными свойствами объекта.
• for...in может быть полезен для отладки или в специфических случаях, когда требуется анализировать всю цепочку прототипов. Однако его использование требует осторожности.
• Современный JavaScript также предлагает Object.values() для получения значений и Object.entries() для получения пар [ключ, значение].

Вывод: Используйте Object.keys() (или Object.entries()) для безопасного перебора собственных свойств объекта, особенно при работе с данными, структура которых вам до конца не известна. Цикл for...in применяйте осознанно, помня о его особенностях с унаследованными свойствами.