Как узнать что объект пустой js
Разбираемся с объектами в JavaScript
В этом материале автор — фронтенд-разработчик — сделал обзор основных способов создания, изменения и сравнения объектов JavaScript.
Объекты — одно из основных понятий в JavaScript. Когда я только приступил к их изучению, они показались мне довольно простыми: всего лишь пары ключей и значений, как и описывалось в теории.
Лишь спустя некоторое время я начал понимать, что тема гораздо сложнее, чем я полагал. И тогда я стал изучать информацию из разных источников. Некоторые из них давали хорошее представление о предмете, но увидеть всю картину целиком я смог не сразу.
В этом посте я попытался охватить все аспекты работы с объектами в JS, не вдаваясь слишком глубоко в отдельные подробности, но и не упуская важные детали, которые помогут вам понять предмет и почувствовать себя увереннее во время его дальнейшего изучения.
Итак, давайте начнем с основ.
Объект
Объект в JavaScript — это просто набор свойств, каждое из которые представляет собой пару ключ-значение. Обратиться к ключам можно с помощью точечного (obj.a) или скобочного обозначения (obj[‘a’]).
Помните, что скобки следует использовать, если ключ:
Прототип
У каждого объекта в 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.
Далее я хочу коротко рассказать о различных способах создания объекта и немного больше о прототипах.
Создание объекта
Конструктор. Как и в приведенном выше примере, конструктор — это просто JS-функция, позволяющая нам воспользоваться оператором new для создания новых ее экземпляров.
Square — экземпляр конструктора rectangle, и поэтому мы можем вызвать square.getArea() //4, square.width, а также все функции, унаследованные от object.prototype.
Какой из способов лучше? Если вы планируете создать несколько экземпляров, можно воспользоваться ES6 или конструктором. Если же вы планируете создать объект один раз, то лучше задать литерал, поскольку это самый простой способ.
И теперь, когда мы узнали о prototype и познакомились со всеми способами создания новых объектов, мы можем перейти к обсуждению одного из самых запутанных моментов, связанных с объектами.
Сравнение и изменение объектов
В JavaScript объекты относятся к ссылочному типу
Когда мы создаем объект let obj =
Это значит, что выполняя newObj.a = 2, мы фактически изменяем obj таким образом, что obj.a становится равен 2!
Такой подход легко приводит к появлению багов, поэтому многие компании работают с неизменяемыми объектами. Вместо изменения уже созданного объекта вам придется опять создавать новый объект (копию оригинала) и вносить изменения уже в нем. Именно так работают важные библиотеки вроде Redux, и в целом это одна из основных концепций функционального программирования. Подробнее можно почитать здесь.
Из сказанного выше также вытекает, что два объекта никогда не могут быть равными, даже если они обладают одинаковыми свойствами. Это связано с тем, что JS по факту сравнивает расположение в памяти объектов, а два объекта никогда не находятся в одной ячейке памяти.
Итак, вы скорее всего уже задались вопросом, как можно сравнить объекты или как производить с объектами различные манипуляции, учитывая требование к их неизменности.
Рассмотрим несколько возможностей.
Допустим, ясно, что по-хорошему нам не следует изменять объекты, поэтому мы хотим создать копию соответствующего объекта и изменить ее свойства. На помощь приходит Object.assign().
Если мы захотим изменить значение свойства a объекта obj, можно воспользоваться object.assign для создания копии obj и ее изменения.
В примере видно, что мы сначала создаем пустой объект, затем копируем значения obj и вносим наши изменения, в конечном счете получая новый и готовый к использованию объект.
Пожалуйста, обратите внимание, что этот способ не сработает для глубокого копирования. Говоря о глубоком копировании, мы имеем в виду, что нужно скопировать объект с одним или несколькими свойствами.
Object.assign() копирует свойства объекта, поэтому если значение свойства — это указатель на объект, то копируется только указатель.
Для глубокого копирования необходима рекурсивная операция. Здесь можно написать функцию или просто воспользоваться методом _.cloneDeep из библиотеки Lodash.
Есть один классный прием работы с объектами — строчное преобразование. В следующем примере мы преобразовываем оба объекта в строки и сравниваем их:
Такой подход оправдан, поскольку в итоге мы сравниваем строки, представляющие собой указатель на тип-значение. Плохая новость — он не всегда срабатывает, главным образом потому, что тот или иной порядок свойств объекта не гарантируется.
Другое хорошее решение — воспользоваться методом _.isEqual из Lodash, выполняющим глубокое сравнение объектов.
И перед тем, как закончить, давайте пробежимся по некоторым часто возникающим вопросам на тему объектов. Это поможет глубже погрузиться в тему и применить полученные знания на практике.
Постарайтесь подумать над решением самостоятельно перед тем, как прочитать ответ.
Как узнать длину объекта?
Для получения ответа необходимо перебрать все свойства объекта одно за другим и посчитать их. Существует несколько способов выполнить подобную итерацию:
Один из таких методов — array.length. В итоге мы можем просто написать
Как проверить, пуст ли объект?
В заключение
Надеюсь, теперь вы чувствуете себя увереннее в создании объектов и работе с ними. Давайте подытожим:
Как проверить пустой объект JavaScript?
после запроса AJAX иногда мое приложение может возвращать пустой объект, например:
Как я могу проверить, так ли это?
30 ответов
нет простого способа сделать это. Вам придется явно зацикливаться на свойствах:
Если поддержка ECMAScript 5 можно использовать Object.keys() вместо:
для тех из вас, кто имеет такую же проблему, но использует jQuery, вы можете использовать С помощью jQuery.isEmptyObject.
Это мое предпочтительное решение:
Как насчет использования JSON.преобразовать в строки? Это почти во всех современных браузерах.
старый вопрос, но просто была проблема. Включение JQuery не очень хорошая идея, если ваша единственная цель-проверить, не пуст ли объект. Вместо этого, просто глубоко в код JQuery, и вы получите ответ:
Я только что столкнулся с подобной ситуацией. Я не хотел использовать JQuery и хотел сделать это с помощью чистого Javascript.
и то, что я сделал, использовало следующее условие, и оно сработало для меня.
существует простой способ, если вы находитесь в новом браузере. Object.keys(obj).length == 0
Я создал полную функцию, чтобы определить, пуст ли объект.
Он использует Object.keys С ECMAScript 5 (ES5) функциональность, если это возможно для достижения наилучшей производительности (см. таблица совместимости) и обратные пути к наиболее совместимому подходу для старых двигателей (браузеров).
решение
здесь суть для этого кода.
и вот JSFiddle с демонстрацией и простой тест.
Я надеюсь, это поможет кому-то. Ура!
просто обходной путь. Может ли ваш сервер генерировать какое-то специальное свойство в случае отсутствия данных?
затем вы можете легко проверить его в своем коде обратного вызова AJAX.
другой способ проверить это:
редактировать: Если вы используете любую библиотеку JSON (f.e. JSON.js) тогда вы можете попробовать JSON.функция encode () и проверка результата на пустую строку значений.
Использование Объекта.ключи(объект).длина (как предложено выше для ECMA 5+) в 10 раз медленнее для пустых объектов! продолжайте использовать опцию old school (for. in).
протестировано под Node, Chrom, Firefox и IE 9, становится очевидным, что для большинства случаев использования:
вы можете проверить количество ключей объекта:
еще один простой, чистый способ JS:)
обновление
вы можете использовать реализацию jQuery isEmptyObject
jQuery имеют специальную функцию isEmptyObject() для этого случая:
вы можете использовать этот простой код, не использовать jQuery или других библиотеки
JSON класс и его функции (парсить и преобразовать в строки) очень полезны, но имеют некоторые проблемы с IE7 что вы можете исправить это с помощью этого простого кода http://www.json.org/js.html.
другой простой способ (самый простой способ) :
вы можете использовать этот путь без использования jQuery или JSON
лучший способ, который я нашел:
в следующем примере показано, как проверить, является ли объект JavaScript пустым, если под пустым мы подразумеваем отсутствие собственных свойств.
скрипт работает на ES6.
Если jQuery и веб-браузер недоступны, в подчеркивании также есть функция isEmpty.js.
кроме того, он не предполагает, что входной параметр является объектом. Для списка или строки или undefined он также превратит правильный ответ.
в дополнение к Thevs ответ:
это jquery + jquery.в JSON
нюанс! Остерегайтесь limitiations в JSON,.
сахар.JS предоставляет расширенные объекты для этой цели. Код чистый и простой:
сделать расширенный объекта:
проверьте его размер:
Другой альтернативой является использование есть.js (14kB) в отличие от в jQuery (32 КБ), лодашь (50kB), или подчеркивание (16.4 КБ). есть.js оказалась самой быстрой библиотекой среди вышеупомянутых библиотек, которая может использоваться для определения пустоты объекта.
очевидно, что все эти библиотеки не совсем то же самое, так что если вы нужно легко манипулировать DOM тогда в jQuery все еще может быть хорошим выбором, или если вам нужно больше, чем просто проверка типа потом лодашь или подчеркивание может быть хорошо. Что касается есть.js, вот синтаксис:
под капотом эта библиотека использует Object.getOwnPropertyNames что похоже к Object.keys но Object.getOwnPropertyNames является более тщательным, так как он вернет перечисляемые и не перечисляемые свойства, как описано здесь.
если вы не хотите вводить библиотеку (что понятно), и вы знаете, что вы проверяете только объекты (не массивы или строки), то следующая функция должна соответствовать вашим потребностям.
это только немного быстрее, чем есть.js, хотя только потому, что вы не проверяете, является ли это объект.
Я бы пошел проверить, есть ли у него хотя бы один ключ. Этого достаточно, чтобы понять, что она не пуста.
Методы объектов js: Как проверить объект Javascript на пустоту?
Проверить является ли объект пустым – одна из постоянно встречающихся задач в повседневной жизни Javascript разработчика.
Например, работая над очередной фичей в React приложении, требовалось делать активной кнопку “Подтвердить” только в том случае, когда объект const order = <> содержал свойства, то есть не был пустым.
В случае если бы переменная order содержала массив, то все было бы просто:
Рассмотрим 4 метода объектов js, которые помогут проверить объект на пустоту.
1. Object.keys()
Тоже самое можно записать так:
Далее прописываем переменную для свойства disabled нашей кнопки (делаем ее неактивной):
2. JSON.stringify()
Добавляем наше условие:
3. Цикл for..in
Данный способ интересен тем, что его поддерживают более старые версии браузеров. Ознакомиться с текущим состоянием браузерной совместимости цикла for..in можно здесь ).
4. isEmpty (метод в библиотеке Lodash)
В библиотеке Lodash есть специальный метод, который принимает на вход как массивы так и объекты:
Массив: перебирающие методы 2020 (11 примеров)
Javascript var, let и const (в чем отличие и когда использовать)?
Как проверить наличие пустого объекта JavaScript?
После запроса AJAX иногда мое приложение может возвращать пустой объект, например:
Как я могу проверить, является ли это случай?
ОТВЕТЫ
Ответ 1
Ответ 2
Там нет простого способа сделать это. Вы должны будете явно перекрыть свойства:
Если доступна поддержка ECMAScript 5, вы можете вместо этого использовать Object.keys() :
Ответ 3
Для тех из вас, кто имеет ту же проблему, но использует jQuery, вы можете использовать jQuery.isEmptyObject.
Ответ 4
Это мое предпочтительное решение:
Ответ 5
Вы можете использовать Underscore.js.
Ответ 6
Ответ 7
Как насчет использования JSON.stringify? Он доступен почти во всех современных браузерах.
Ответ 8
Ответ 9
Я столкнулся с подобной ситуацией. Я не хотел использовать JQuery и хотел сделать это, используя чистый Javascript.
И что я сделал, использовал следующее условие, и это сработало для меня.
Ответ 10
Существует простой способ, если вы находитесь в более новом браузере. Object.keys(obj).length == 0
Ответ 11
Вы можете проверить количество клавиш Object:
Ответ 12
Просто обходной путь. Может ли ваш сервер генерировать какое-то особое свойство в случае отсутствия данных?
Затем вы можете легко проверить его в коде обратного вызова AJAX.
Еще один способ проверить:
ИЗМЕНИТЬ: Если вы используете какую-либо библиотеку JSON (например, JSON.js), вы можете попробовать функцию JSON.encode() и проверить результат на пустую строку значений.
Ответ 13
Я создал полную функцию, чтобы определить, является ли объект пустым.
Он использует функциональные возможности Object.keys из ECMAScript 5 (ES5), если это возможно, для достижения максимальной производительности (см. Таблицу совместимости) и откат к наиболее совместимому подходу для более старых механизмов (браузеров).
Решение
А вот и JSFiddle с демонстрацией и простым тестом.
Надеюсь, это кому-нибудь поможет. Ура!
Ответ 14
Использование Object.keys(obj).length(как было предложено выше для ECMA 5+) в 10 раз медленнее для пустых объектов! придерживайтесь опции старой школы (для. in).
Протестировано под Node, Chrom, Firefox и IE 9, становится очевидным, что для большинства случаев использования:
Эффект нижней линии, используйте:
См. подробные результаты тестирования и тестовый код на Является ли объект пустым?
Ответ 15
Обновление
Вы можете использовать реализацию jQuery isEmptyObject
Ответ 16
В следующем примере показано, как проверить, является ли объект JavaScript пустым, если пустым мы не имеем никаких собственных свойств.
Скрипт работает на ES6.
Ответ 17
Ответ 18
Согласно спецификации ES2017 для Object.entries(), проверка проста с использованием любого современного browser—
Ответ 19
jQuery имеет специальную функцию isEmptyObject() для этого случая:
Ответ 20
Под капотом все пустые методы проверки во всех библиотеках используют логику проверки ключей объекта. Это странный способ сделать его понятным, который вы можете добавить в метод, описанный здесь.
Или, если вы используете Lodash (вы должны быть), то.
Ответ 21
Я бы пошел для проверки, если у него есть хотя бы один ключ. Этого было бы достаточно, чтобы сказать мне, что он не пустой.
Ответ 22
вы можете использовать этот простой код, который не использовал jQuery или другие библиотеки
Класс JSON и его функции (parse и stringify) очень полезны, но есть некоторые проблемы с IE7, которые вы можете исправить с помощью этого простой код http://www.json.org/js.html.
Другой простой способ (простейший способ):
вы можете использовать этот способ без использования jQuery или объекта JSON.
Ответ 23
Лучший способ, которым я нашел:
Ответ 24
Просто, я не думаю, что все браузеры реализуют Object.keys() в настоящее время.
Ответ 25
Если jQuery и веб-браузер недоступны, в underscore.js также есть функция isEmpty.
Кроме того, он не предполагает, что входным параметром является объект. Для списка или строки или undefined он также вернет правильный ответ.
Ответ 26
Протест! Остерегайтесь ограничений JSON.
Ответ 27
Как мне проверить наличие пустого объекта JavaScript?
После AJAX-запроса иногда мое приложение может возвращать пустой объект, например:
Как я могу проверить, так ли это?
28 ответов
Обратите внимание, что это создает ненужный массив (возвращаемое значение keys ).
В следующем примере показано, как проверить, является ли объект JavaScript пустым, если мы подразумеваем, что под пустым у него нет собственных свойств.
Скрипт работает на ES6.
Как насчет использования JSON.stringify? Это почти доступно во всех современных браузерах.
Существует простой способ, если вы используете более новый браузер. Object.keys(obj).length == 0
Sugar.JS предоставляет расширенные объекты для этой цели. Код прост и понятен:
Сделайте расширенный объект:
Проверьте его размер:
Нет простого способа сделать это. Вы должны будете зациклить свойства явно:
Если поддержка ECMAScript 5 есть доступно, вы можете использовать Object.keys() вместо:
Если jQuery и веб-браузер недоступны, в underscore.js также есть функция isEmpty.
Кроме того, он не предполагает, что входной параметр является объектом. Для списка, или строки, или неопределенного, это также приведет к правильному ответу.
В дополнение к ответу Thevs:
Это jquery + jquery.json
Под капотом все пустые методы проверки во всех библиотеках используют логику проверки ключей объекта. Это странный способ сделать его понятным, который вы можете добавить в метод, описанный здесь.
Или, если вы используете Lodash (вы должны быть), тогда.
Для тех из вас, кто сталкивается с той же проблемой, но использует jQuery, вы можете использовать jQuery.isEmptyObject.
Лучший способ, который я нашел:
Согласно спецификации ES2017 в Object.entries () , проверка просто используя любой современный браузер
Я просто столкнулся с подобной ситуацией. Я не хотел использовать JQuery, и хотел сделать это, используя чистый Javascript.
И то, что я сделал, использовало следующее условие, и оно сработало для меня.
Производительность
Сегодня 2020.01.17 я выполняю тесты на MacO HighSierra 10.13.6 на Chrome v79.0, Safari v13.0.4 и Firefox v72.0 для выбранных решений.
Детали
Ниже во фрагменте представлены 15 решений. Если вы хотите запустить тест производительности на своем компьютере, нажмите ЗДЕСЬ.
Вы можете использовать Underscore.js.
JQuery имеет специальную функцию isEmptyObject() для этого случая:
Я бы пошел на проверку, если у него есть хотя бы один ключ. Этого было бы достаточно, чтобы сказать мне, что это не пусто.
Это мое предпочтительное решение:
Вы можете использовать этот простой код, который не использовал jQuery или другие библиотеки
Предостережение! Остерегайтесь ограничений JSON.
Я создал полную функцию, чтобы определить, является ли объект пустым.
Решение
Вот Gist для этого кода.
А вот и JSFiddle с демонстрацией и простым тестом.
Вы можете использовать реализацию jQuery isEmptyObject
Вы можете проверить количество ключей объекта: