JavaScript Object.keys, values, entries

Итерация по объектам в JavaScript

Обычные объекты — основная структура JavaScript для хранения данных в формате «ключ — значение», однако, в отличие от массивов, объекты не поддерживают прямую итерацию: их нельзя обойти циклом for...of и передать напрямую в такие методы массивов, как map или filter. Чтобы устранить этот недостаток, JavaScript предоставляет три вспомогательных метода, которые преобразуют собственные свойства объекта в обычный массив:

• Object.keys(obj) — массив имён свойств.
• Object.values(obj) — массив значений свойств.
• Object.entries(obj) — массив пар [key, value].

Как только список свойств становится массивом, становятся доступны все инструменты работы с массивами. Четвёртый метод, Object.fromEntries, выполняет обратное преобразование — восстанавливает объект из списка пар. На этой странице рассматривается каждый метод, чистая итерация с помощью for...of и деструктуризации, правила определения порядка свойств, а также отличия этих методов от аналогов на Map.

Все три метода возвращают только собственные (не унаследованные) и перечисляемые свойства с ключами-строками. Унаследованные свойства прототипа и ключи типа Symbol пропускаются.

Метод Object.keys

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

Пример использования Object.keys

---

Метод Object.values

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

Пример использования Object.values

---

Метод Object.entries

Object.entries(obj) возвращает массив пар [key, value] собственных перечисляемых свойств данного объекта с ключами-строками. Это наиболее гибкий из трёх методов, поскольку каждый элемент содержит оба фрагмента информации.

Пример использования Object.entries

---

Итерация с помощью for...of и деструктуризации

Поскольку Object.entries возвращает массив, его можно обойти циклом for...of и распаковать каждую пару с помощью деструктуризации. Это самый чистый и читаемый способ пройтись по свойствам объекта:

---

Можно также перебирать только ключи или только значения:

---

Совет: for...of по Object.entries предпочтительнее обычного цикла for...in, потому что for...in также обходит унаследованные перечисляемые свойства из цепочки прототипов, тогда как Object.entries этого не делает.

Преобразование объектов с помощью Object.fromEntries

Object.fromEntries выполняет обратную операцию относительно Object.entries: принимает список пар [key, value] и строит из них объект. Вместе они образуют круговой маршрут — преобразуй объект в пары, трансформируй пары методами массива, затем преобразуй обратно в объект.

Пример: Круговое преобразование

---

Object.fromEntries также принимает любой итерируемый список пар — в том числе Map — что делает его быстрым способом конвертации Map в обычный object. Подробнее о Map см. в разделе Map и Set. Метод обеспечивает бесшовное преобразование между структурами array и object, делая работу с данными более гибкой.

Правила порядка свойств

Порядок ключей, возвращаемых этими методами, не произволен — JavaScript следует определённым правилам:

1. Целочисленные ключи (ключи, похожие на неотрицательные целые числа, например "1", "42") идут первыми и сортируются в порядке возрастания чисел.
2. Строковые ключи следуют за ними в порядке добавления.
3. Ключи-символы идут последними (однако, как было сказано, данные методы символы игнорируют).

Такое поведение — «целочисленные ключи сортируются» — нередко удивляет разработчиков:

---

Если нужно сохранить порядок добавления для числовых ключей, сделайте их нецелочисленными — например, добавив префикс +, чтобы они перестали выглядеть как целые числа:

---

Отличие от методов Map

У Map тоже есть методы keys(), values() и entries(), однако они отличаются от статических методов Object.* в двух важных аспектах:

• Синтаксис: методы Map вызываются на экземпляре — map.keys() — тогда как методы object являются статическими и принимают объект в качестве аргумента — Object.keys(obj).
• Тип возвращаемого значения: методы Map возвращают итератор (его можно обойти for...of, но это не массив). Методы Object.* всегда возвращают настоящий массив, поэтому методы массивов — map, filter, reduce — работают с ним сразу.

---

Map также сохраняет порядок добавления для всех ключей (включая числовые) и допускает ключи любого типа, тогда как обычные object приводят ключи к строкам и сортируют целочисленные. Если важен порядок итерации или требуются нестроковые ключи, предпочтите Map.

Продвинутые техники работы с объектами

Фильтрация свойств объекта

Сочетание методов массива с Object.entries и Object.fromEntries открывает возможности для мощных преобразований — например, оставить только свойства, прошедшие проверку.

Пример фильтрации

---

Преобразование свойств объекта

Аналогично, сочетание Object.entries с map позволяет преобразовать каждое значение (или ключ) и перестроить объект.

Пример преобразования

---

Заключение

Object.keys, Object.values и Object.entries — это мост между обычными объектами и богатым набором инструментов для работы с массивами в JavaScript, а Object.fromEntries замыкает цикл, преобразуя пары обратно в object. В сочетании с for...of и деструктуризацией они делают итерацию, фильтрацию и трансформацию данных объекта чистой и читаемой. Помните о правилах порядка свойств и используйте Map, когда нужен гарантированный порядок добавления или нестроковые ключи.

Практика