Вычисление ключей объекта JS в массив: более короткие пути

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

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

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

Анализ Object.keys()

Работа с вложенными объектами

Если ваша задача связана с вложенными объектами, например таким:

const user = {
  name: 'Alice',
  attributes: { height: 65, age: 30 }
};

то вы можете получить ключи, находящиеся на разных уровнях вложенности, применив рекурсивный подход:

function getNestedKeys(obj) {
  let keys = [];
  for (let key in obj) {
    keys.push(key);
    if (typeof obj[key] === 'object') {
      keys = keys.concat(getNestedKeys(obj[key]));
    }
  }
  return keys;
}

Так, вы получите все ключи, включая те, что находятся во вложенных объектах.

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

Проблема поддержки старых браузеров

В старых браузерах, не поддерживающих Object.keys(), можно использовать полифил, как, например, ES5-shim. Если же в вашем проекте используется jQuery, вы можете воспользоваться методом $.map:

const keys = $.map(user, (value, key) => key);

Когда у объектов присутствует наследование

Метод Object.keys() возвращает только собственные свойства объекта. Если вам нужно получить также и унаследованные свойства, используйте следующий подход:

for (let key in object) {
  if (object.hasOwnProperty(key)) {
    console.log(key);
  }
}

Не только ключи, а и пары ключ-значение

В некоторых случаях может потребоваться получить не только ключи, но и пары ключ-значение. Для этого в ES6 предусмотрен метод Object.entries():

const entries = Object.entries({ a: 1, b: 2, c: 3 });
// [["a", 1], ["b", 2], ["c", 3]]

Это удобно для используемых с методом reduce() более сложных задач.

Детали обработки ключей

Помните, что все ключи являются уникальными и рассматриваются как строки. Будьте особо внимательны при работе с числовыми ключами.

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

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

const cabinet = { 'socks': 10, 'shirts': 3, 'pants': 4 };

Хотите посмотреть, что лежит в каждом отделении? Просто используйте Object.keys():

Object.keys(cabinet); // Здесь будут перечислены 'pants', 'shirts', 'socks'

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

Порядок с сортировкой

Порядок ключей может не зависеть от вас, так как он определяется движком JavaScript. Если вам требуются отсортированные ключи, сделайте следующее:

const sortedKeys = Object.keys(cabinet).sort();
// ["pants", "shirts", "socks"] — теперь все ключи упорядочены!

Возможности использования Object.keys()

С помощью Object.keys() можно реализовывать разные идеи. Например, следующие:

• Фильтрация объектов по значениям свойств:

  JS

  Скопировать код

  const highInventory = Object.keys(cabinet).filter((key) => cabinet[key] > 5);
  // В итоге получаем ["socks", "pants"]

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

• Создание нового представления на основе ключей:

  JS

  Скопировать код

  const labelTags = Object.keys(cabinet).map((key) => `<label>${key}</label>`);
  // Получаем массив меток

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

• Суммирование значений свойств объекта:

  JS

  Скопировать код

  const totalItems = Object.keys(cabinet).reduce((total, key) => total + cabinet[key], 0);
  // 17 — сумма составляет 17 предметов одежды.

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

  Если что-то подтвердило неопределённость...

Если в процессе работы возникли проблемы, убедитесь, что:

• Вы передаете объект в качестве аргумента Object.keys().
• Свойства объекта являются перечисляемыми.
• Вы не работаете с хост-объектами, вроде элементов DOM, которые могут нарушить работу кода.

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

1. Object.keys() – JavaScript | MDN.
2. ECMAScript Language Specification – ECMA-262 Edition 5.1.
3. Как перечислить свойства JavaScript объекта? – Stack Overflow.
4. Объекты – JavaScript.Info.
5. Новые возможности ES6: Обзор и сравнение.
6. Руководство по стилю JavaScript от Airbnb.