Получение длины объекта в JavaScript: методы без преобразования

Пройдите тест, узнайте какой профессии подходите

Я предпочитаю
0%
Работать самостоятельно и не зависеть от других
Работать в команде и рассчитывать на помощь коллег
Организовывать и контролировать процесс работы

Быстрый ответ

Для определения числа свойств в объекте можно использовать выражение Object.keys(obj).length, которое возвращает количество перечисляемых свойств объекта obj:

JS
Скопировать код
const obj = { a: 1, b: 2, c: 3 };
console.log(Object.keys(obj).length); // выводит: 3

Метод Object.keys() генерирует массив, ключами которого являются свойства объекта, и свойство length этого массива указывает на их количество.

Кинга Идем в IT: пошаговый план для смены профессии

Записка к коду

Рассмотрим подробнее некоторые моменты и альтернативные способы подсчета свойств в объектах:

Учитываем только собственные свойства

Если вы используете цикл for-in для подсчета свойств, обязательно проверяйте наличие свойства с помощью метода .hasOwnProperty, чтобы исключить унаследованные свойства:

JS
Скопировать код
let count = 0;
for (let prop in obj) {
  if (obj.hasOwnProperty(prop))
    count++;
}

Если Object.keys не подойдет

Object.keys() не работает в устаревших браузерах, например, в IE8 и более старых версиях. В таких ситуациях можем использовать альтернативное решение:

JS
Скопировать код
let count = 0;
for (let prop in obj) {
  if (Object.prototype.hasOwnProperty.call(obj, prop)) 
    count++; 
}

Учитываем также неперечислимые свойства

Чтобы учитывать все свойства объекта, включая неперечислимые, примените Object.getOwnPropertyNames(obj).length:

JS
Скопировать код
Object.getOwnPropertyNames(obj).length;

Визуализация

Представьте, что каждое свойство объекта – это вид рыбы 🐟 в аквариуме (объекте):

Markdown
Скопировать код
Aquarium: {
  "Золотая рыба": 🐠,
  "Скалярия": 🐠,
  "Гуппи": 🐠
}

Подсчитывая рыбок, мы узнаем общее количество видов рыб в аквариуме (3 вида):

Markdown
Скопировать код
let fishCount = Object.keys(Aquarium).length; 
// Вывод: "В аквариуме 3 вида рыбы".

Альтернативный подход: использование jQuery и underscore.js

Если в вашем проекте применяются библиотеки jQuery или underscore.js, с их помощью вы также можете определить длину объекта:

JS
Скопировать код
let length = $.map(obj, () => {}).length; // с использованием jQuery

let size = _.size(obj); // с использованием underscore.js

Вопросы производительности

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

Полезные материалы

  1. Object.keys() – MDN – подробнее о том, как получить ключи объекта и их количество.
  2. Length of a JavaScript object – Stack Overflow – обсуждение методов подсчета размера объекта.
  3. Object.entries() – JavaScript | MDN – другой метод для получения свойств объекта.
  4. Object.getOwnPropertyNames() – JavaScript | MDN – как учесть неперечислимые свойства при подсчете.
  5. Object.keys, values, entries – JavaScript.info – для глубокого понимания процесса перебора свойств объекта.
  6. How to get the size of a JavaScript object? – Stack Overflow – другие подходы к измерению размера объектов.
  7. Iterating over object in JavaScript | Zell Liew – различные методы перебора свойств объектов.