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

Как проверить, является ли объект пустым в JavaScript

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

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

Этот метод возвращает массив, содержащий пары [ключ, значение], найденные в объекте, переданном в качестве аргумента.

Чтобы проверить, пуст ли объект, проверьте, равна ли длина массива 0.

Этот метод возвращает массив строк, содержащий перечисляемые свойства объекта, переданного в качестве аргумента. Он возвращает массив [keys]

Вы также можете создать функцию isEmpty и передать объект в качестве параметра.

Он возвращает массив строк, соответствующих свойствам, найденным в объекте, переданном в качестве аргумента. Этот метод вызывает GetOwnPropertyKeys под капотом.

Он проверяет, присутствует ли [ключ] в «myObject». Используйте это, когда вы знаете свойства, которыми должен обладать объект.

Примечание: это не будет работать с «myObject[id]», JavaScript выдаст синтаксическую ошибку.

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

_.isEmpty(коллекция)] Возвращает true, если в коллекции нет элементов. Для строк и массивоподобных объектов _.isEmpty проверяет, равно ли свойство length 0.

Метод _.isEmpty() Проверяет, является ли значение пустым объектом, коллекцией, картой или набором. Объекты считаются пустыми, если они не имеют собственных перечисляемых строковых свойств с ключом.

Разбираемся с объектами в JavaScript

Объекты — одно из основных понятий в JavaScript. Когда я только приступил к их изучению, они показались мне довольно простыми: всего лишь пары ключей и значений, как и описывалось в теории.

Лишь спустя некоторое время я начал понимать, что тема гораздо сложнее, чем я полагал. И тогда я стал изучать информацию из разных источников. Некоторые из них давали хорошее представление о предмете, но увидеть всю картину целиком я смог не сразу.

В этом посте я попытался охватить все аспекты работы с объектами в JS, не вдаваясь слишком глубоко в отдельные подробности, но и не упуская важные детали, которые помогут вам понять предмет и почувствовать себя увереннее во время его дальнейшего изучения.

Итак, давайте начнем с основ.

Объект

Объект в JavaScript — это просто набор свойств, каждое из которые представляет собой пару ключ-значение. Обратиться к ключам можно с помощью точечного (obj.a) или скобочного обозначения (obj[‘a’]).

Помните, что скобки следует использовать, если ключ:

• не является допустимым JavaScript-идентификатором (в нем есть пробел, тире, начинается с цифры. )
• является переменной.

Прототип

У каждого объекта в JavaScript есть внутреннее свойство под названием Prototype. В большинстве браузеров вы можете обратиться к нему по обозначению __proto__.

Prototype — это способ обеспечить наследование свойств в JavaScript. Так можно делится функциональностью без дублирования кода в памяти. Способ работает за счет создания связи между двумя объектами.

Проще говоря, Prototype создает указатель с одного объекта на другой.

Цепочка прототипов

Каждый раз, когда JS ищет свойство в объекте и не находит его непосредственно у самого объекта, он проверяет наличие свойства в объекте-прототипе. Если свойства нет и в нем, то JS продолжит поиск в прототипе связанного объекта. Так будет продолжаться до тех пор, пока JS не найдет подходящее свойство или не достигнет конца цепочки.

Давайте рассмотрим пример:

cons — это конструктор (просто функция, которую можно вызывать с помощью оператора new).

На пятой строке мы создаем новый объект — новую копию cons. Сразу после создания obj также получает свойство прототипа.

А теперь мы добавляем свойства (‘b’, ‘c’) прототипу объекта cons.
Рассмотрим obj:

obj.a // 1 — здесь все по-старому, obj.a по-прежнему равен 1.
obj.c — у obj нет свойства c! Однако, как ранее упоминалось, JS теперь поищет его в прототипе obj и вернет значение 4.

А теперь давайте подумаем, каково значение obj.b и каким оно станет, когда мы удалим obj.b?

Obj.b равен 2. Мы назначили свойство b, но мы сделали это для прототипа cons, поэтому когда мы проверяем obj.b, то по-прежнему получаем 2. Однако сразу после удаления obj.b JS уже не сможет найти b у obj, и потому продолжит поиск в прототипе и вернет значение 3.

Далее я хочу коротко рассказать о различных способах создания объекта и немного больше о прототипах.

Создание объекта

Литерал объекта: let obj = ;
Мы создали объект со следующей цепочкой прототипов: obj —> Object.prototype —> null
Как вы можете догадаться, object.prototype — это прототип объекта, а также конец цепочки прототипов.

Object.create(): var newObj = Object.create(obj);
У newObj будет следующая цепочка прототипов: newObj —> obj —> Object.prototype —> null

Конструктор. Как и в приведенном выше примере, конструктор — это просто JS-функция, позволяющая нам воспользоваться оператором new для создания новых ее экземпляров.

Square — экземпляр конструктора rectangle, и поэтому мы можем вызвать square.getArea() //4, square.width, а также все функции, унаследованные от object.prototype.

Какой из способов лучше? Если вы планируете создать несколько экземпляров, можно воспользоваться ES6 или конструктором. Если же вы планируете создать объект один раз, то лучше задать литерал, поскольку это самый простой способ.

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

Сравнение и изменение объектов

В JavaScript объекты относятся к ссылочному типу

Когда мы создаем объект let obj = ;, переменная obj получает адрес в памяти объекта, но не его значение! Крайне важно понимать эту разницу, поскольку в противном случае могут возникнуть ошибки. Когда мы создаем другой объект let newObj = obj, мы фактически создаем указатель на некую область памяти obj, а не абсолютно новый объект.

Это значит, что выполняя newObj.a = 2, мы фактически изменяем obj таким образом, что obj.a становится равен 2!

Такой подход легко приводит к появлению багов, поэтому многие компании работают с неизменяемыми объектами. Вместо изменения уже созданного объекта вам придется опять создавать новый объект (копию оригинала) и вносить изменения уже в нем. Именно так работают важные библиотеки вроде Redux, и в целом это одна из основных концепций функционального программирования. Подробнее можно почитать здесь.

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

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

Рассмотрим несколько возможностей.

Изменение объекта

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

Если мы захотим изменить значение свойства a объекта obj, можно воспользоваться object.assign для создания копии obj и ее изменения.

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

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

Object.assign() копирует свойства объекта, поэтому если значение свойства — это указатель на объект, то копируется только указатель.

Для глубокого копирования необходима рекурсивная операция. Здесь можно написать функцию или просто воспользоваться методом _.cloneDeep из библиотеки Lodash.

Сравнение объектов

Есть один классный прием работы с объектами — строчное преобразование. В следующем примере мы преобразовываем оба объекта в строки и сравниваем их:

Такой подход оправдан, поскольку в итоге мы сравниваем строки, представляющие собой указатель на тип-значение. Плохая новость — он не всегда срабатывает, главным образом потому, что тот или иной порядок свойств объекта не гарантируется.

Другое хорошее решение — воспользоваться методом _.isEqual из Lodash, выполняющим глубокое сравнение объектов.

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

Постарайтесь подумать над решением самостоятельно перед тем, как прочитать ответ.

Как узнать длину объекта?

Для получения ответа необходимо перебрать все свойства объекта одно за другим и посчитать их. Существует несколько способов выполнить подобную итерацию:

• for in. Этот метод охватывает все счетные свойства объекта и цепочки его прототипов. Мы познакомились с прототипом (и, надеюсь, усвоили материал), поэтому должно быть ясно, что применение for in не всегда будет верным для получения свойств объекта.
• Object.keys. Этот способ возвращает массив с ключами всех собственных (принадлежащих указанному объекту) счетных свойств. Такой подход лучше, поскольку мы работаем только над свойствами объекта, не обращаясь к свойствам prototype. Бывают, однако, ситуации, когда вы присвоили атрибуту enumerable некоторого свойства значение false, и object.keys в итоге пропускает его, а вы получаете некорректный результат. Такое происходит редко, но в подобных случаях очень кстати придется getOwnPropertyNames.
• getOwnPropertyNames возвращает массив, содержащий все собственные ключи объекта (как счетные, так и несчетные).

• Object.values перебирает собственные счетные свойства и возвращает массив с соответствующими значениями.
• Object.entries перебирает собственные счетные свойства и возвращает массив с ключами и их значениями.

Один из таких методов — array.length. В итоге мы можем просто написать

Как проверить, пуст ли объект?

1. JSON.stringify(myObj) === “<>” . Здесь мы снова используем инструмент строкового преобразования, позволяющий легко проверить, пуст ли объект (сравнивая строки, а не объекты).
2. !Object.keys(myobj).length // true . Как я упоминал, конвертирование ключей объекта в массив может быть очень полезным. Здесь мы пользуемся удобным свойством length, унаследованным от Array.prototype, проверяя с его помощью длину ключей в массиве. В JS 0 превращается в false, поэтому добавляя ! мы превращаем его в true. Любые другие числа будут превращаться в false.

В заключение

Надеюсь, теперь вы чувствуете себя увереннее в создании объектов и работе с ними. Давайте подытожим:

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

После запроса AJAX иногда мое приложение может возвращать пустой объект, например:

Как я могу проверить, является ли это случай?

46 ответов

Там нет простого способа сделать это. Вы должны будете явно перекрыть свойства:

Если доступна поддержка ECMAScript 5, вы можете вместо этого использовать Object.keys() :

Для тех из вас, кто имеет ту же проблему, но использует jQuery, вы можете использовать jQuery.isEmptyObject.

Это мое предпочтительное решение:

Вы можете использовать Underscore.js.

Как насчет использования JSON.stringify? Он доступен почти во всех современных браузерах.

Старый вопрос, но у него была проблема. Включение JQuery на самом деле не является хорошей идеей, если ваша единственная цель — проверить, не объект ли пуст. Вместо этого, просто в код JQuery, и вы получите ответ:

Я столкнулся с подобной ситуацией. Я не хотел использовать JQuery и хотел сделать это, используя чистый Javascript.

И что я сделал, использовал следующее условие, и это сработало для меня.

Для не равных, используйте это: JSON.stringify(obj) !== ‘<>‘

Существует простой способ, если вы находитесь в более новом браузере. Object.keys(obj).length == 0

Я создал полную функцию, чтобы определить, является ли объект пустым.

Он использует функциональные возможности Object.keys из ECMAScript 5 (ES5), если это возможно, для достижения максимальной производительности (см. Таблицу совместимости) и откат к наиболее совместимому подходу для более старых механизмов (браузеров).

Решение

Вот суть этого кода.

А вот и JSFiddle с демонстрацией и простым тестом.

Надеюсь, это кому-нибудь поможет. Ура!

Вы можете проверить количество клавиш Object:

Просто обходной путь. Может ли ваш сервер генерировать какое-то особое свойство в случае отсутствия данных?

Затем вы можете легко проверить его в коде обратного вызова AJAX.

Еще один способ проверить:

ИЗМЕНИТЬ: Если вы используете какую-либо библиотеку JSON (например, JSON.js), вы можете попробовать функцию JSON.encode() и проверить результат на пустую строку значений.

Использование Object.keys(obj).length(как было предложено выше для ECMA 5+) в 10 раз медленнее для пустых объектов! придерживайтесь опции старой школы (для. in).

Протестировано под Node, Chrom, Firefox и IE 9, становится очевидным, что для большинства случаев использования:

• (для. in. ) — самый быстрый вариант использования!
• Object.keys(obj).length в 10 раз медленнее для пустых объектов
• JSON.stringify(obj).length всегда самый медленный (не удивительный)
• Object.getOwnPropertyNames(obj).length занимает больше времени, чем Object.keys(obj).length может быть намного дольше в некоторых системах.

Эффект нижней линии, используйте:

См. подробные результаты тестирования и тестовый код на Является ли объект пустым?

Я использую это.

Обновление

вы можете использовать реализацию jQuery isEmptyObject

В следующем примере показано, как проверить, является ли объект JavaScript пустым, если пустым мы не имеем никаких собственных свойств.

Скрипт работает на ES6.

Лучший способ, которым я нашел:

вы можете использовать этот простой код, который не использовал jQuery или другие библиотеки

Класс JSON и его функции (parse и stringify) очень полезны, но есть некоторые проблемы с IE7, которые вы можете исправить с помощью этого простой код http://www.json.org/js.html.

Другой простой способ (простейший способ):
вы можете использовать этот способ без использования jQuery или объекта JSON.

jQuery имеет специальную функцию isEmptyObject() для этого случая:

Я бы пошел для проверки, если у него есть хотя бы один ключ. Этого было бы достаточно, чтобы сказать мне, что он не пустой.

Если jQuery и веб-браузер недоступны, в underscore.js также есть функция isEmpty.

Кроме того, он не предполагает, что входным параметром является объект. Для списка или строки или undefined он также вернет правильный ответ.

Просто, я не думаю, что все браузеры реализуют Object.keys() в настоящее время.

Согласно спецификации ES2017 для Object.entries(), проверка проста с использованием любого современного browser—

Это проверяет, что:

• Объект не имеет собственных свойств (независимо от перечислимости).
• Объект не имеет собственных символов свойств.
• Прототипом объекта является Object.prototype .

Другими словами, объект неотличим от объекта, созданного с помощью <> .

Протест! Остерегайтесь ограничений JSON.

Sugar.JS предоставляет расширенные объекты для этой цели. Код чист и прост:

Сделайте расширенный объект:

В дополнение к ответу Thevs:

it jquery + jquery.json

Другой альтернативой является использование is.js (14kB) в отличие от jquery (32kB), lodash (50kB) или underscore (16.4kB). is.js оказалась самой быстрой библиотекой среди вышеупомянутых библиотек, которая может быть использована для определения того, пустой объект.

Очевидно, что все эти библиотеки не совсем одинаковы, поэтому, если вам нужно легко манипулировать DOM, тогда jquery все равно может быть хорошим выбор или если вам нужно больше, чем просто проверка типа, тогда lodash или underscore может быть хорошо. Что касается is.js, вот синтаксис:

Подобно подчеркиванию и lodash _.isObject() , это относится не только к objects , но также относится к arrays и strings .

Под капотом эта библиотека использует Object.getOwnPropertyNames , которая похожа на Object.keys , но Object.getOwnPropertyNames является более тщательной, так как она вернет перечислимые и неперечислимые свойства, как описано здесь.

Если вы не хотите вводить библиотеку (это понятно), и вы знаете, что вы проверяете объекты (а не массивы или строки), то следующая функция должна соответствовать вашим потребностям.

Количество элементов в объекте (object length)

В данном посте мы разберем как проверить сколько элементов содержит объект и напишем функцию для проверки объекта на пустоту.

В JavaScript у объектов нет свойства length , как у массивов. Поэтому мы не можем просто написать obj.length , чтобы получить «длину объекта». Но мы можем сделать это другим способом.

Как проверить количество элементов в объекте JS?

Для этого мы можем воспользоваться методом Object.keys() , чтобы получить все ключи в массив и затем уже у массива воспользоваться свойством length , чтобы получить количество элементов:

Теперь на основании этого давайте напишем функцию, которая будет показывать длину объекта, а сам объект мы будем передавать параметром в эту функцию:

Также есть второй вариант, сделать это с помощью цикла for in по объекту:

Для чего мы тут используем hasOwnProperty вы можете разобраться в этой статье.

Также можно добавить отдельный метод глобальному объекту и вызывать его при необходимости:

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

Чтобы проверить объект на пустоту и узнать есть ли там хоть один элемент, мы можем написать следующую функцию:

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