Проверка наличия свойств у объекта в JavaScript: методы

Быстрый ответ

Для того чтобы определить, имеет ли объект собственные свойства, можно воспользоваться методом Object.keys(obj).length. Если он возвращает ноль, это означает, что объект не обладает собственными свойствами.

Пример:

const isEmpty = Object.keys({}).length === 0; // true. У объекта отсутствуют свойства.

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

Подробности: альтернативные подходы

Учет неперечислимых свойств

Чтобы включить в расчет неперечислимые свойства, вы можете воспользоваться методом Object.getOwnPropertyNames(obj).length. Он функционирует аналогично Object.keys, но обладает расширенными возможностями.

Пример:

const hasNonEnumerable = Object.getOwnPropertyNames({prop: 'value'}).length > 0; // true. Невозможно скрыться от метода getOwnPropertyNames!

Подробнее об этом расскажет наш спикер на видео

Проверка принадлежности конкретного свойства

Для того, чтобы проверить, принадлежит ли свойство данному объекту и не унаследовано ли оно, используйте метод hasOwnProperty().

Пример:

const object = { ownProp: 'exists' };
const hasOwn = object.hasOwnProperty('ownProp'); // true. Свойство обнаружено!

Подсчет пользовательских свойств

В случае необходимости подсчета только пользовательских свойств, можно использовать сочетание цикла for...in и метода hasOwnProperty().

Пример:

let userDefinedPropertyCount = 0;
const object = { foo: 'bar', baz: 'qux' };
for (let key in object) {
  if (object.hasOwnProperty(key)) {
    userDefinedPropertyCount++;
  }
}

Применение библиотек

Если вы работаете с jQuery, вы можете определить пустоту объекта при помощи метода $.isEmptyObject(obj), что будет соответствовать 'jQuery-стилю'.

Пример:

const isEmpty = $.isEmptyObject({}); // true. jQuery – не только средство работы с DOM!

Для среды ES5 рекомендуется использовать полифиллы для обеспечения поддержки устаревших браузеров, когда используются методы вроде Object.keys.

Визуализация

Можно представить каждый объект как коробку:

Пустая коробка (📦): {}
// Коробка пуста, в объекте отсутствуют свойства.

Быстрый способ проверить содержимое выглядит следующим образом:

if (Object.keys(yourObject).length > 0) {
    // В коробке что-то есть! 🎉
} else {
    // Она пуста...🌬️ (свойств нет)
}

Примеры объектов и их содержимого:

Объект (📦)     | Есть ли свойства внутри?
--------------- | -------------------
{ }             | 🌬️ Нет
{ a:1 }         | ✅ Да!
{ name:'Box' }  | ✅ Безусловно!

Мельчайшие детали

Разбор цепочки прототипов

Важно различать унаследованные свойства и свойства, определенные пользователем. В этом знание цепочки прототипов будет бесценным.

Пример:

const base = { inheritedProp: 'inherited' };
const obj = Object.create(base);
obj.ownProp = 'own';
// Свойство 'inheritedProp' унаследовано, а 'ownProp' — это свойство, установленное самим объектом. Это похоже на своеобразные семейные особенности!

Управление видимостью свойств

С помощью Object.defineProperty возможно управлять перечисляемостью свойств.

Пример:

const object = {};
Object.defineProperty(object, 'hidden', {
  value: 'secret', 
  enumerable: false,
});
// Свойство 'hidden' не учитывается методом Object.keys(). Все идет по плану, свойство скрыто.

Обход особых ситуаций

Будьте внимательны к особым случаям, например, к объектам с унаследованными неперечислимыми свойствами, которые могут остаться незамеченными при подсчете.

Оптимизация функционала

Если часто осуществляется проверка, разумно инкапсулировать логику перечисления в функции, такие как, например, isObjectEmpty().

Пример:

function isObjectEmpty(obj) {
  return Object.keys(obj).length === 0;
}
// Практичная функция для использования в коде.

Полезные материалы

1. Object.keys() – JavaScript | MDN — документация MDN по методу Object.keys().
2. How do I test for an empty JavaScript object? – Stack Overflow — дискуссия и рекомендации по определению пустого объекта в JavaScript.
3. Node.js — ECMAScript 2015 (ES6) и далее — возможности ES6, влючая Object.entries().
4. Lodash Documentation — функция isEmpty в Lodash для проверки на отсутствие свойств в объекте.
5. ECMAScript® 2024 Language Specification — спецификация метода Object.getOwnPropertyNames().
6. GitHub – getify/You-Dont-Know-JS: Серия книг по JavaScript. @YDKJS в Twitter. — обширная серия книг о JavaScript, включая способы проверки свойства undefined в объектах.