
- 1 Проверка объектов на пустоту в JavaScript в новых браузерах
- 2 Решение проблемы ложных срабатываний
- 3 Как проверить объект на пустоту в JavaScript при других значениях
- 4 Проверка объекта на null и undefined
- 5 Как проверить объект на пустоту в JavaScript для старых версий браузеров
- 6 Использование сторонних библиотек
- 7 Чистый JavaScript или библиотеки
- 8 Прочие методы проверки
В новых браузерах можно спокойно использовать метод Object.keys(), чтобы проверить объект на пустоту в JavaScript. А для поддержки старых — установить библиотеку Lodash и применить встроенный в нее метод isEmpty.
const empty = {}; // Проверка для новых версий браузеров Object.keys(empty).length === 0 && empty.constructor === Object // true // Проверка для старых версий браузеров и IE _.isEmpty(empty) // true
Проверка объектов на пустоту в 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
Такая попытка проверить объект на пустоту в js выдает ложное срабатывание 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 при других значениях
Давайте протестируем этот метод с некоторыми другими значениями.
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
В этом случае никаких ошибок возникать не будет.
Как проверить объект на пустоту в JavaScript для старых версий браузеров
Для поддержки старых браузеров и Internet Explorer существует два варианта на выбор: использовать нативный js или библиотеки. Простой «ванильный» способ выглядит не очень лаконичным, но работает хорошо.
function isObjectEmpty(value) {
return (
Object.prototype.toString.call(value) === '[object Object]' && JSON.stringify(value) === '{}'
);
}
Он возвращает true для объектов.
isObjectEmpty({}); // true isObjectEmpty(new Object()); // true
И объектам-конструкторам его тоже не обмануть.
isObjectEmpty(new String()); // false isObjectEmpty(new Number()); // false isObjectEmpty(new Boolean()); // false isObjectEmpty(new Array()); // false isObjectEmpty(new RegExp()); // false isObjectEmpty(new Function()); // false isObjectEmpty(new Date()); // false
Он также отлично обрабатывает объекты при null и undefined, возвращая false и не выдавая TypeError.
isObjectEmpty(null); // false isObjectEmpty(undefined); // false
Использование сторонних библиотек
Существует множество внешних библиотек, которые позволяют проверить объект на пустоту в js. Большинство из них обеспечивают отличную поддержку IE и старых версий браузеров.
Lodash
_.isEmpty({}); // true
Underscore
_.isEmpty({}); // true
jQuery
jQuery.isEmptyObject({}); // true
Чистый JavaScript или библиотеки
Что именно выбрать, зависит от обстоятельств. Я отдаю предпочтение «ванильному» js и стараюсь использовать его всегда. Подключение внешних библиотек не всегда оправдано и негативно сказывается на скорости загрузки сайтов и их работе. Да и изучать документацию и настраивать библиотеку для таких мелочей особого смысла тоже нет. Но если разрабатываемое приложении уже предполагает использование сторонних библиотек, то почему бы не задействовать их. В любом случае окончательный выбор того, как в JavaScript проверить объект на пустоту зависит от личных предпочтений каждого и конкретной задачи.
Прочие методы проверки
for (let key in object) { if (object.hasOwnProperty(key)) { return false; } return true; }