Как проверить объект на пустоту javascript
Напишите функцию isEmpty(obj) , которая возвращает true , если у объекта нет свойств, иначе false .
Должно работать так:
let schedule = <>; alert( isEmpty(schedule) ); // true schedule["8:30"] = "get up"; alert( isEmpty(schedule) ); // falseПросто в цикле перебираем свойства объекта и возвращаем false , как только встречаем свойство.
function isEmpty(obj) < for (let key in obj) < // если тело цикла начнет выполняться - значит в объекте есть свойства return false; >return true; >Как проверить объект на пустоту в JavaScript
В новых браузерах можно спокойно использовать метод 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)
Пока все выглядит хорошо. Для не объектов такой код возвращает 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; >
Методы объектов JS: Как проверить объект JavaScript на пустоту?
Проверить является ли объект пустым – одна из постоянно встречающихся задач в повседневной жизни Javascript разработчика.
Например, работая над очередной фичей в React приложении, требовалось делать активной кнопку “Подтвердить” только в том случае, когда объект const order = <> содержал свойства, то есть не был пустым.
В случае если бы переменная order содержала массив, то все было бы просто:
1const order = [];2 const emptyOrder = !order.length;3 // true45 button disabled=emptyOrder>>Подтвердить/button>;
Рассмотрим 4 метода объектов js, которые помогут проверить объект на пустоту.
1. Object.keys()
Первый способ — использовать метод Object.keys() для получения нового массива из ключей (свойств) объекта. Если свойства отсутствуют, то новый массив будет пустой.
1const order = >;2 const emptyOrder = !Object.keys(order).length;3 // true
Тоже самое можно записать так:
1const emptyOrder = Object.keys(order).length === 0;2 // true
Далее прописываем переменную для свойства disabled нашей кнопки (делаем ее неактивной):
1button disabled=emptyOrder>>Подтвердить/button>
2. JSON.stringify()
Второй способ проверить объект на пустоту — использовать метод JSON.stringify() , чтобы перевести наш объект в строчный формат и сравнить результат со строкой ‘<>‘ .
1const order = >;2 const emptyOrder = JSON.stringify(order) === '<>';3 // true
Добавляем наше условие:
1button disabled=emptyOrder>>Подтвердить/button>
3. Цикл for..in
Данный способ интересен тем, что его поддерживают более старые версии браузеров. Ознакомиться с текущим состоянием браузерной совместимости цикла for..in можно здесь ).
Давайте создадим функцию, которая принимает на вход объект и использует цикл for..in , чтобы пробежаться по ключам объекта. Далее используем метод object.hasOwnProperty() для проверки наличия ключа.
Функция возвращает true , в случае если ключи отсутствуют. Мы получим значение false , если в объекте присутствует хотя бы один ключ.
1const order = >;23 function isEmptyObj(object)4 for (let key in object)5 if (object.hasOwnProperty(key))6 return false;7 >8 >9 return true;10 >1112 console.log(isEmptyObj(order));13 // true
4. isEmpty (метод в библиотеке Lodash)
В библиотеке Lodash есть специальный метод, который принимает на вход как массивы так и объекты:
1_.isEmpty([1, 2, 3]);2 // false3_.isEmpty( a: 1 >);4 // false
Методы массивов JavaScript (11 методов)
Переменные JavaScript var, let и const (в чем отличие и когда использовать)?
Популярные статьи
- Задачи JavaScript для начинающих
- Типы данных в JavaScript
- Как проверить объект JavaScript на пустоту?
- Обработчики Событий в JS
- Деструктуризация в Javascript
- Массивы Javascript: перебирающие методы
- Операторы Spread и Rest в Javascript
- Объект Date: Текущая Дата и Время в Javascript
- Переменные JavaScript var, let и const
Как проверить что объект <> не пустой?
Как правильно проверить в JavaScript, является ли объект пустым, или содержит какие-то свойства?
Отслеживать
Robert Key
задан 1 окт 2015 в 7:09
Robert Key Robert Key
656 1 1 золотой знак 4 4 серебряных знака 22 22 бронзовых знака
Что значит «пустой»?
– user177221
1 окт 2015 в 7:12
var object = <>
1 окт 2015 в 7:14
@IonDen спасибо за правки )
1 окт 2015 в 8:50
Загляните в библиотеку lodash, функция _.isEmpty. А вот как она реализована
12 июн 2018 в 8:09
5 ответов 5
Сортировка: Сброс на вариант по умолчанию
if (Object.keys(obj).length == 0)
Но к сожелению, Object.keys() доступен не везде (нужно отметить галочку Show obsolete browsers? для того, чтобы увидеть все браузеры), поэтому можно воспользоваться полифилом, либо такой, например, функцией:
function isEmptyObject(obj) < for (var i in obj) < if (obj.hasOwnProperty(i)) < return false; >> return true; > Либо так при помощи jQuery, если Вы не изменяли прототип Object :
if ($.isEmptyObject(<>);)