Варианты проверить объект на пустоту на JavaScript (js)

Как проверить объект на пустоту в JavaScript

10.01.2021
36
4 мин.
0

Эту задачу можно решить, как с помощью сторонних библиотек, так и на нативном языке. Проверить объект на пустоту на JavaScript (js) можно при помощи метода Object.keys().

Проверка объектов на пустоту в JavaScript

В принципе, для нативного js достаточно использовать новый метод Object.keys().

const empty = {}; 
Object.keys(empty).length === 0 && empty.constructor === Object;

Для чего необходима дополнительная проверка конструктора? В JavaScript имеется девять встроенных конструкторов.

new Object(); 
new String(); 
new Number(); 
new Boolean(); 
new Array(); 
new RegExp(); 
new Function(); 
new Date();

Мы можем создать пустой объект с помощью new Object(), но стоит отметить, что:

Никогда не следует создавать объект с помощью конструктора. Это считается плохой практикой.

const obj = new Object(); 
Object.keys(obj).length === 0; // true

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

function badEmptyCheck(value) {    
     return Object.keys(value).length === 0; 
} 

badEmptyCheck(new String()); // true 
badEmptyCheck(new Number()); // true 
badEmptyCheck(new Boolean()); // true 
badEmptyCheck(new Array()); // true 
badEmptyCheck(new RegExp()); // true 
badEmptyCheck(new Function()); // true 
badEmptyCheck(new Date()); // true

Строго говоря, такая попытка проверить объект на пустоту в JavaScript выдает ложное срабатывание true.

Решение проблемы ложных срабатываний

Для того, чтобы легко исправить это, следует добавить проверку конструктора.

function goodEmptyCheck(value) {      
     Object.keys(value).length === 0 && value.constructor === Object; // Проверка конструктора 
} 

goodEmptyCheck(new String()); // false 
goodEmptyCheck(new Number()); // false 
goodEmptyCheck(new Boolean()); // false 
goodEmptyCheck(new Array()); // false 
goodEmptyCheck(new RegExp()); // false 
goodEmptyCheck(new Function()); // false 
goodEmptyCheck(new Date()); // false

Отлично! Теперь мы получили верный ответ.

Варианты проверить объект на пустоту на JavaScript (js)
Проверка объекта на пустоту на JavaScript с помощью метода Object.keys (изображение создано с помощью ИИ)

Как проверить объект на пустоту в JavaScript при других значениях

Давайте протестируем этот метод с некоторыми другими значениями.

function isEmptyObject(value) {
     return Object.keys(value).length === 0 && value.constructor === Object;
}

Пока все выглядит хорошо. Для не объектов такой код возвращает false.

isEmptyObject(100); // false 
isEmptyObject(true); // false 
isEmptyObject([]); // false

Но с таким подходом следует быть осторожным! Такие значения вызовут ошибку.

Проверка объекта на null и undefined

Чтобы избежать ошибки TypeError можно применить дополнительную проверку.

let value; 
value && Object.keys(value).length === 0 && value.constructor === Object; 

// Проверка на null и undefined 
value = null; // null 
value = undefined; // undefined

В этом случае никаких ошибок возникать не будет.

Использование сторонних библиотек

Стоит отметить множество внешних библиотек, которые позволяют осуществить проверку объекта на пустоту в js.

Lodash

_.isEmpty({}); // true

Underscore

_.isEmpty({}); // true

jQuery

jQuery.isEmptyObject({}); // true

Читайте также: Клонирование элемента в JavaScript.

Чистый JavaScript или библиотеки

Что именно выбрать, зависит от обстоятельств. Я отдаю предпочтение нативному JavaScript и стараюсь использовать его всегда. Что ни говори, но подключение внешних библиотек не всегда оправдано и негативно сказывается на скорости загрузки сайтов и их работе. Да и изучать документацию и настраивать библиотеку для таких мелочей особого смысла тоже нет. Но если разрабатываемое приложение уже предполагает использование сторонних библиотек, то почему бы не задействовать их. В любом случае окончательный выбор того, как в JavaScript проверить объект на пустоту зависит от личных предпочтений каждого и конкретной задачи.

Прочие методы

for (let key in object) {      
     if (object.hasOwnProperty(key)) {        
          return false;     
     } 
     return true;
}

Кроссбраузерность

В общей сложности, на момент написания статьи метод Object.keys() получил полную поддержку браузеров, включая Internet Explorer.