Получение списка ключей и их количества в объекте JavaScript

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

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

Пример:

// Задан объект 'obj'
const obj = { a: 1, b: 2, c: 3 };
// Извлекаем ключи объекта
const keys = Object.keys(obj); // ['a', 'b', 'c']

Этот метод активно применяется для итерации по свойствам объекта и анализа их структуры.

Определение количества ключей

Для того чтобы узнать количество ключей в объекте, используйте свойство length массива ключей:

// Используем ранее заданный объект 'obj'
const keyCount = Object.keys(obj).length; // 3

Таким образом, вы можете определить размер вашего объекта.

Погружение в цикл for...in

Цикл for...in пробегается по всем перечислимым свойствам объекта, включая те, что были унаследованы. Чтобы перебирать исключительно собственные свойства объекта, используйте hasOwnProperty():

// 'obj' – объект, который всем нравится!
for (var key in obj) {
    if (obj.hasOwnProperty(key)) {
        console.log(key + ": " + obj[key]); // Ключи тоже умеют "говорить". 🗣️
    }
}

Таким образом, вы избегаете внезапных эффектов из-за прототипной цепочки.

Альтернатива с библиотекой Underscore.js

JavaScript-библиотеки вроде Underscore.js значительно облегчают работу с объектами:

• _.keys(obj) – аналог Object.keys(obj).
• _.map(obj, fn): Эта функция создаёт массив, преобразуя значения, извлечённые для каждого ключа.

// 'obj' вновь в центре внимания
const values = _.map(obj, (value, key) => value * 2); // [2, 4, 6]
// 'obj' удваивает свои значения! 💪

Работа с объектами: методология и нюансы

Подсчёт количества ключей и операции над ключами

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

let localHero = { name: 'Алиса', age: 25, job: 'Разработчик' };
let localKeys = Object.keys(localHero); // ['name', 'age', 'job']
let keyCount = localKeys.length; // 3 – и это факт!

localKeys.forEach((key) => {
    console.log(`${key}: ${localHero[key]}`);
    // "name: Алиса", и так далее. Алиса на коне! 🥳
});

Подробнее об этом расскажет наш спикер на видео

Создание пользовательской функции для извлечения ключей

Очень удобно создать свою функцию для безопасной работы со всем миром ключей:

function getKeys(obj) {
  let keys = [];
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      keys.push(key);
    }
  }
  return keys;
}
// getKeys(obj) – ваш помощник 24/7! 🛎️

Работа с неперечисляемыми ключами

Есть ли неперечисляемые свойства объекта? В этом случае поможет Object.getOwnPropertyNames(obj), возвращающая полный список ключей:

const allKeys = Object.getOwnPropertyNames(myObject); // Получаем все ключи, ни одного исключения! 🌈

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

Представьте, что вы исследуете многоэтажное здание. Каждый этаж (ключ) открывает новое пространство офисов (значений):

 🏬  
Этаж 1: {"Продажи": 💼, "Маркетинг": 📈} 
Этаж 2: {"Разработка": 👩‍💻, "HR": 👥} 

Ключи: ["Этаж1", "Этаж2"]

Используя Object.keys():

let floors = Object.keys(building); // ["Этаж1", "Этаж2"]

Вы легко сможете раскрыть структуру здания. 🔓

Ожидаемые трудности и полезные заметки

Аргумент не является объектом

Object.keys() ожидает объект в качестве аргумента. Если передать что-то другое, вызов метода даст ошибку:

Object.keys(42); // TypeError: 42 не является объектом
// Даже глубокие истины имеют свои ограничения!

Неперечисляемые свойства

Object.keys() не включает неперечисляемые свойства объекта:

const myObject = {};
Object.defineProperty(myObject, 'nonEnumerable', {
  enumerable: false,
  value: 'скрытый секрет'
});
Object.keys(myObject); // []
// Некоторые тайны остаются невидимыми!

Совместимость со старыми версиями JavaScript

Учтите, что методы ES5, вроде, Object.keys(), могут не поддерживаться в старых версиях сред исполнения. В такой ситуации можно использовать полифилл:

if (!Object.keys) {
  Object.keys = function(obj) {
    var keys = [];
    for (var key in obj) {
      if (obj.hasOwnProperty(key)) {
        keys.push(key);
      }
    }
    return keys;
  };
}
// Теперь даже в браузере вашей бабушки будет работать получение ключей! 👵🔑

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

1. Object.keys() – JavaScript | MDN – Детальное описание метода Object.keys().
2. ECMAScript 2015 Language Specification – ECMA-262 6th Edition – Стандарт ECMAScript, описывающий Object.keys().
3. Object.keys, values, entries – Обзор ключей, значений и элементов объектов.
4. The traversal order of object properties in ES6 – Особенности перебора свойств объектов в ES6.
5. Using JSDoc – Форматирование документации с примером использования Object.keys().