как узнать длину объекта js
Длина объекта JavaScript
Если у меня есть объект JavaScript, скажем
есть ли встроенный или принятый лучший способ получить длину этого объекта?
30 ответов
самый надежный ответ (т. е. который отражает намерение того, что вы пытаетесь сделать, вызывая наименьшее количество ошибок) будет:
в JavaScript есть своего рода соглашение, которое вы не добавляйте вещи в объект.прототип, потому что он может нарушать перечисления в различных библиотеках. Однако добавление методов в Object обычно безопасно.
вот обновление с 2016 года и широкое развертывание ES5 и за. для IE9+ и всех других современных браузеров с поддержкой ES5+ вы можете использовать Object.keys() Так что приведенный выше код просто становится:
это не должно изменять любой существующий прототип с Object.keys() теперь встроен.
редактировать: объекты могут иметь символические свойства, которые не могут быть возвращены через объект.ключевой метод. Так что ответ был бы неполным без упоминания о них.
тип символа был добавлен к языку для создания уникального идентификаторы свойств объекта. Главное преимущество символьного типа-предотвращение перезаписи.
Если вы знаете, что вам не нужно беспокоиться о hasOwnProperty проверяет, вы можете сделать это очень просто:
Обновлено если вы используете подчеркивания.js (рекомендуется, это легкий!), то вы можете просто сделать
, Если не, и вы не хотите возиться со свойствами объекта по какой-либо причине и уже используете jQuery, плагин одинаково доступен:
Используйте что-то простое, как:
это не должно быть сложно и определенно не требует выполнения другой функции.
вот самое кросс-браузерное решение.
Это лучше, чем принято ответ, потому что он использует собственный объект.ключи, если они существуют. Таким образом, это самый быстрый для всех современных браузеров.
Я не эксперт по JavaScript, но похоже, вам придется перебирать элементы и подсчитывать их, так как у объекта нет метода длины:
@palmsey: справедливости ради OP, документация JavaScript фактически явно ссылается на использование переменных типа Object таким образом как «ассоциативные массивы».
этот метод получает все имена свойств вашего объекта в массиве, поэтому вы можете получить длину этого массива, равную длине ключей вашего объекта.
чтобы не связываться с прототипом или другим кодом, вы можете создать и расширить свой собственный объект:
Если вы всегда используете метод add, свойство length будет правильным. Если вы беспокоитесь, что вы или другие забываете об использовании его, вы можете добавить счетчик свойств, который другие разместили в метод length.
конечно, вы всегда можете заменить методы. Но даже если вы это сделаете, ваш код, вероятно, заметно потерпит неудачу, что облегчит отлаживать. 😉
вот как и не забудьте проверить, что свойство не находится в цепочке прототипов:
вот совершенно другое решение, которое будет работать только в более современных браузерах (IE9+, Chrome, Firefox 4+, Opera 11.60+, Safari 5.1+)
настройка ассоциативного класса массива
теперь вы можете использовать этот код следующим образом.
в некоторых случаях лучше всего хранить в отдельной переменной. Особенно, если вы добавляете в массив один элемент в одном месте и можете легко увеличить размер. Очевидно, работают намного быстрее, если вам нужно часто проверять размер.
Длина объекта в JavaScript
Возможно многие удивятся, но определить длину Object просто вызвав length а объекте — невозможно! Убедитесь сами:
На пути к определению длины
В отличие от массивов, получить длину объекта всегда было сложно. Object.keys() возвращает enumerated массив всех ключей свойств объекта, а после этого можно просто использовать length и получить его длину.
Как правило, когда мы хотим добавить свойство к объекту, мы можем это сделать с помощью точки:
Автоматическое опредиление
Давайте вернемся к нашему примеру свойств объекта, которые мы установили с помощью точки. Почему они отображался автоматически? Это происходит потому, что когда мы указываем свойство, атрибут enumerable автоматически устанавливается как значение true.
Таким образом, атрибут enumerable используется для сокрытия свойств, не следует повторять. Это стало причиной введения переличуваности в ECMAScript 1.
Дополнительные возможности
Но при таких условиях как Object.keys так и Object.getOwnPropertyNames не будут работать так, как от них требуется.
Как видим, символьный ключ отсутствует в обоих массивах. Решений этой проблемы будет использование Object.getOwnPropertySymbols :
Таким образом мы получили массив только из имен ключей свойств типа symbol. И теперь для получения length нам необходимо просто скомбинировать оба метода:
Сроки реализации проектов могут варьироваться от нескольких дней до нескольких лет. И если в первом случае необходимо быстро включится в работу и решить поставленные задачи, то во втором случае важно не выгореть преждевременно. В новой статье нашего блога вы из первых уст узнаете, каково это быть разработчиком на одном и том же проекте на протяжении длительного времени, и как при этом не потерять интерес к нему.
Функционал отслеживания цен пользователями в интернет-магазине повышает продаваемость. И пока такого готового инструмента нет в 1С-Битрикс: Управление сайтом, его можно быстро создать кастомно. Наш опытный разработчик делиться своими наработками в данном направлении и с радостью создаст отслеживание цен для Вашего интернет-магазина.
Пять примеров того, что категорически не нужно делать при создании интернет-магазинов от опытного разработчика.
Разбираемся с объектами в 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 DOM
getBoundingClientRect – это часть JavaScript DOM, которая предоставляет важные данные о размере и расположении HTML-элемента.
Читайте также: Основы DOM
В этом мануале вы научитесь использовать getBoundingClientRect, чтобы получить размер и положение необходимого вам элемента.
Требования
Чтобы выполнить это руководство, вы должны ознакомиться со следующими статьями:
Как работает getBoundingClientRect()
Чтобы использовать метод getBoundingClientRect, сначала выберите HTML-элемент, а затем вызовите getBoundingClientRect для этого элемента:
Метод getBoundingClientRect возвращает объект с несколькими парами ключ-значение, которые предоставляют информацию о размере и расположении элемента на веб-странице. Вывод выглядит так:
<
top: 450,
left: 400,
right: 825,
bottom: 500,
x: 400,
y: 450,
width: 425,
height: 50
>
Значения x и y будут отвечать значениям left и top. Поэтому некоторые браузеры пропускают x и y и выдают только left и top.
Еще одна вещь, на которую следует обратить внимание, – это то, что значения right/bottom могут отличаться от того, что вы привыкли видеть при позиционировании CSS (например, при использовании position: absolute).
Теперь, когда вы ознакомлены с выводом getBoundingClientRect(), давайте попробуем выполнить один пример, чтобы разобраться со всем на практике.
Метод getBoundingClientRect в приложении
Чтобы использовать getBoundingClientRect в своем коде, вам понадобится HTML-документ с элементом, который вы хотите запросить.
Создайте в текстовом редакторе новый HTML-файл по имени boundingbox.html:
В этом файле создайте HTML-документ, содержащий тег
Длина объекта JavaScript
У меня есть объект JavaScript, есть ли встроенный или общепринятый способ получения длины этого объекта?
30 ответов
Самый надежный ответ (то есть, который отражает намерение того, что вы пытаетесь сделать, вызывая при этом наименьшее количество ошибок), был бы:
В JavaScript есть своего рода соглашение, согласно которому вы не добавляете что-либо в Object.prototype, потому что он может нарушать перечисления в различных библиотеках. Однако добавление методов в Object обычно безопасно.
Вот обновление от 2016 года и широкое распространение ES5 и далее. Для IE9 + и всех других современных браузеров с поддержкой ES5 + вы можете использовать Object.keys() поэтому приведенный выше код просто становится:
Это не должно изменять любой существующий прототип, так как Object.keys() теперь встроен.
Тип символа был добавлен в язык для создания уникальных идентификаторов для свойств объекта. Основным преимуществом типа Symbol является предотвращение перезаписи.
Если у нас есть хэш
Мы можем получить длину, используя длину ключей, которая является длиной хеша:
@palmsey: в отличие от OP, документы javascript на самом деле явно ссылаются на использование переменных типа Object таким образом, как «ассоциативные массивы».
Но в соответствии с этим, не является ли принятый ответ самой плохой практикой?
Укажите функцию прототипа size () для объекта
Я не думаю, что ответ должен быть принят, так как ему нельзя доверять, если у вас есть другой код, работающий в том же контексте выполнения. Безусловно, чтобы сделать это надежным способом, вам нужно определить метод size в myArray и проверять тип членов при их итерации.
Чтобы не связываться с прототипом или другим кодом, вы можете создать и расширить свой собственный объект:
Если вы всегда используете метод add, свойство length будет правильным. Если вы беспокоитесь о том, что вы или другие забыли об его использовании, вы можете добавить счетчик свойств, который другие опубликовали, также в методе length.
Конечно, вы всегда можете переписать методы. Но даже если вы это сделаете, ваш код, вероятно, заметно потерпит неудачу, упрощая отладку. ; )
Это совершенно другое решение, которое будет работать только в более современных браузерах (IE9 +, Chrome, Firefox 4+, Opera 11.60+, Safari 5.1+).
Настройте свой ассоциативный класс Array
Просто используйте это, чтобы получить length :
Мы можем найти длину объекта с помощью:
Вот другая версия ответа Джеймса Когана. Вместо передачи аргумента просто создайте прототип класса Object и сделайте код чище.
Ниже приведена версия ответа Джеймса Коглана в CoffeeScript для тех, кто отказался от прямого JavaScript 🙂
И вы можете просто использовать его так:
В некоторых случаях лучше просто сохранить размер в отдельной переменной. Особенно, если вы добавляете в массив по одному элементу в одном месте и можете легко увеличивать размер. Очевидно, это будет работать намного быстрее, если вам нужно часто проверять размер.
Если вам не нужна поддержка Internet Explorer 8 или ниже, вы можете легко получить количество свойств в объекте, выполнив следующие два шага:
Если вам нужно сделать это более одного раза, вы можете заключить эту логику в функцию:
Как использовать эту функцию:
Если вы используете AngularJS 1.x, вы можете делать это с помощью AngularJS, создав фильтр и используя код из любого другого примера, такого как следующий:
В вашем контроллере:
Или по вашему мнению:
Самый простой способ такой
Вот как и не забудьте проверить, что свойство не входит в цепочку прототипов:
Это работает для меня:
Если вам нужна ассоциативная структура данных, которая показывает ее размер, лучше использовать карту вместо объекта.
Этот метод получает все имена свойств вашего объекта в массиве, поэтому вы можете получить длину этого массива, равную длине ключей вашего объекта.
Вариация некоторых из вышеперечисленных:
Это немного более элегантный способ интеграции hasOwnProp.
Вы можете просто использовать Object.keys(obj).length для любого объекта, чтобы получить его длину. Object.keys возвращает массив, содержащий все ключи (свойства) объекта, которые могут пригодиться для определения длины этого объекта по длине соответствующего массива. Вы даже можете написать функцию для этого. Давайте возьмем creative и напишем для него также метод (вместе с более удобным свойством getter):
Я не эксперт по JavaScript, но похоже, что вам придется циклически проходить по элементам и считать их, поскольку у Object нет метода length:
@palmsey: справедливо для OP, документация JavaScript фактически явно ссылается на использование переменных типа Object таким образом, как «ассоциативные массивы».