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

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

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

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

Пример:

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

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

Кинга Идем в IT: пошаговый план для смены профессии

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

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

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

Пример:

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

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

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

Пример:

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

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

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

Пример:

JS
Скопировать код
let userDefinedPropertyCount = 0;
const object = { foo: 'bar', baz: 'qux' };
for (let key in object) {
  if (object.hasOwnProperty(key)) {
    userDefinedPropertyCount++;
  }
}

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

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

Пример:

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

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

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

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

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

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

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

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

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

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

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

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

Пример:

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

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

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

Пример:

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

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

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

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

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

Пример:

JS
Скопировать код
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 в объектах.