Метод Object.entries()

JavaScriptJunior~2 хв читання

Object.entries(), це вбудований метод JavaScript, який повертає масив пар [ключ, значення] для всіх власних (не успадкованих) перелічуваних властивостей об'єкта. Він об'єднує те, що окремо дають Object.keys() і Object.values(), і тому є основним інструментом для перебору об'єкта.

Теорія

TL;DR

Повертає масив масивів, де кожен внутрішній масив, це [ключ, значення].
Тільки власні і тільки перелічувані (enumerable) властивості.
Порядок збігається з Object.keys() та Object.values().
Ключ у парі завжди рядок, значення зберігає свій тип.
Ідеально лягає на for...of з деструктуризацією: for (const [key, value] of ...).
Зворотне перетворення: Object.fromEntries(). Конвертація в Map: new Map(Object.entries(obj)).

Швидкий приклад

javascript

const user = {
  name: 'Maria',
  age: 25,
  city: 'Kyiv'
};

console.log(Object.entries(user));

Результат:

javascript

[
  ['name', 'Maria'],
  ['age', 25],
  ['city', 'Kyiv']
]

Кожна пара [ключ, значення], це один елемент підсумкового масиву.

Синтаксис

javascript

Object.entries(obj)

obj, об'єкт, властивості якого потрібно перетворити на пари.
Повертає масив масивів, де кожен внутрішній масив, це [key, value].

Які властивості потрапляють у результат

Повертає тільки власні властивості:

javascript
const base = { type: 'human' }; const user = Object.create(base); user.name = 'Maria'; console.log(Object.entries(user)); // [['name', 'Maria']]
Повертає тільки перелічувані властивості (enumerable: true):

javascript
const obj = {}; Object.defineProperty(obj, 'hidden', { value: 42, enumerable: false }); obj.visible = 10; console.log(Object.entries(obj)); // [['visible', 10]]
Порядок збігається з Object.keys() і Object.values(): спочатку цілочисельні ключі за зростанням, потім решта в порядку додавання.

Символьні ключі метод не повертає, як і два його сусіди.

Перебір об'єкта

javascript

const user = { name: 'Maria', age: 25 };

for (const [key, value] of Object.entries(user)) {
  console.log(`${key}: ${value}`);
}

Виведе:

javascript

name: Maria
age: 25

Це найчитабельніший спосіб пройтися по об'єкту: на відміну від for...in, тут не потрібна перевірка на успадковані властивості, бо їх у масиві просто немає. Так само зручно фільтрувати та перетворювати об'єкт:

javascript

const prices = { apples: 120, bread: 45, milk: 80 };

const expensive = Object.entries(prices)
  .filter(([, price]) => price > 50)
  .map(([name]) => name);

console.log(expensive); // ['apples', 'milk']

Перетворення об'єкта на Map

javascript

const user = { name: 'Maria', age: 25 };
const userMap = new Map(Object.entries(user));

console.log(userMap.get('age')); // 25

Object.entries() зручно використовувати для конвертації між Object і Map, бо конструктор Map приймає саме масив пар. У зворотний бік працює Object.fromEntries(map).

Зворотне перетворення: Object.fromEntries

javascript

const entries = [
  ['name', 'Maria'],
  ['age', 25]
];

const user = Object.fromEntries(entries);
console.log(user); // { name: 'Maria', age: 25 }

Пара entries плюс fromEntries дає стандартний прийом «перебрати об'єкт і зібрати новий»:

javascript

const raw = { name: ' Maria ', city: ' Kyiv ' };

const trimmed = Object.fromEntries(
  Object.entries(raw).map(([key, value]) => [key, value.trim()])
);

console.log(trimmed); // { name: 'Maria', city: 'Kyiv' }

Підсумок по трьох методах

Метод	Що повертає	Враховує прототип	Тип даних
`Object.keys(obj)`	масив ключів	Ні	`Array<string>`
`Object.values(obj)`	масив значень	Ні	`Array<any>`
`Object.entries(obj)`	масив пар `[ключ, значення]`	Ні	`Array<[string, any]>`

Типові помилки

Забувати про дужки в деструктуризації. Правильно for (const [key, value] of Object.entries(obj)), а не for (const key, value of ...).
Очікувати об'єкт на виході. Метод повертає масив; щоб отримати назад об'єкт, потрібен Object.fromEntries().
Розраховувати на успадковані властивості. Того, що лежить у прототипі, у результаті не буде, як і неперелічуваних та символьних ключів.
Вважати ключ числом. Ключ у парі завжди рядок: Object.entries({ 1: 'a' }) поверне [['1', 'a']].
Використовувати на великих об'єктах у гарячому коді. Метод створює новий масив і масив на кожну пару, тому в циклі, що виконується часто, дешевше пройтися по Object.keys().
Плутати з entries() у масивів. array.entries() повертає ітератор пар [індекс, значення], а не масив.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.