Как получить список ключей из объекта в JavaScript

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

Чтобы извлечь все ключи из объекта в JavaScript, можно воспользоваться методом Object.keys().

Пример:

const myObj = { a: 1, b: 2 };
console.log(Object.keys(myObj)); // ["a", "b"]

Особенности объектов в JavaScript

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

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

При использовании цикла for...in для перебора ключей объекта включаются не только собственные свойства объекта, но и свойства из цепочки прототипов. Чтобы исключить их, полезно применять метод hasOwnProperty.

const objectWithProto = Object.create({ stuffFromDad: 'inherited' });
objectWithProto.myStuff = 'own';

for (const key in objectWithProto) {
  if (objectWithProto.hasOwnProperty(key)) {
    console.log(key); // Будет выведено только "myStuff"
  }
}

С использованием Object.keys() можно не беспокоиться о свойствах прототипа, так как они автоматически исключаются из результата.

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

Сохранение порядка ключей

В отличие от цикла for...in, метод Object.keys() возвращает ключи в том порядке, в котором они были добавлены в объект. Это соответствует стандарту ECMAScript 2015 (ES6).

Поддержка Object.keys()

Метод Object.keys() поддерживается практически во всех современных средах выполнения JavaScript. Однако если вы столкнулись с необходимостью поддержать Internet Explorer 8 или более ранние версии, проверьте совместимость.

Особенности применения

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

Если метод Object.keys() недоступен

При необходимости поддержки браузеров, не поддерживающих Object.keys(), можно написать полифил:

if (!Object.keys) {
  // Данный "ремонт" актуален для старых сред.
  Object.keys = function(obj) { ... }
  // Подробности реализации полифила смотрите в источниках.
}

Библиотеки, меняющие правила игры

Библиотеки, такие как jQuery или Prototype.js, могут добавлять дополнительные методы к объектам. Важно изучить документацию по таким библиотекам.

Например, jQuery предлагает метод $.each():

$.each(myObj, function(key, value) {
    // Дает возможность работать с ключами и значениями.
});

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

Представьте, что ключи в объекте — это пометки на карте сокровищ:

let myTreasure = { 'x': 'gold', 'y': 'silver', 'z': 'rubies' };
// X, Y и Z обозначают места на карте.

При помощи Object.keys(), мы можем найти все эти пометки:

Обнаружены пометки: ['x', 'y', 'z']
// Приключение начинается!

Правильная работа с объектами

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

Будьте осторожны с прототипами

Следует проявлять осторожность при использовании for...in в сочетании с библиотеками, манипулирующими прототипами. Использование метода hasOwnProperty() поможет избежать лишнего кода.

Выбор подходящих инструментов

Используйте Object.keys(obj) для извлечения списка ключей объекта. Этот метод включает в себя только собственные свойства объектов в соответствии со стандартами ES5+.

Используйте объект Map при необходимости

Если требуется сохранять порядок ключей и работать с парами ключ-значение, используйте объект Map.

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

1. Object.keys() — JavaScript | MDN — детальная инструкция по работе с методом Object.keys().
2. JavaScript Object Reference — информация об объектах JavaScript, их свойствах и методах.
3. Understanding ECMAScript 6 | Leanpub — введение в ES6 и улучшения в работе с объектами.
4. for...in — JavaScript | MDN — особенности использования цикла for...in.
5. Map — JavaScript | MDN — об использовании объекта Map.
6. How to iterate over object properties in JavaScript — рекомендации по перебору свойств объектов в JavaScript.