Метод Object.keys()

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

Object.keys(), це вбудований метод JavaScript, який повертає масив усіх власних (не успадкованих) імен властивостей об'єкта у вигляді рядків. Це найпростіший спосіб перетворити об'єкт на масив, який далі можна перебрати, відфільтрувати або порахувати.

Теорія

TL;DR

Повертає масив рядків з іменами властивостей.
Тільки власні властивості, успадковані через prototype не враховуються.
Тільки перелічувані (enumerable) властивості, ключі з enumerable: false не потрапляють у результат.
Символьні ключі (Symbol) метод теж пропускає, для них є Object.getOwnPropertySymbols().
Порядок: спочатку цілочисельні ключі за зростанням, далі решта в порядку додавання.
Працює в парі з Object.values() та Object.entries().

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

javascript

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

console.log(Object.keys(user));
// ['name', 'age', 'city']

Усі власні перелічувані ключі об'єкта повертаються одним масивом.

Синтаксис

javascript

Object.keys(obj)

obj, об'єкт, з якого потрібно отримати список ключів.
Повертає масив рядків.

Для порожнього об'єкта результат теж порожній:

javascript

console.log(Object.keys({})); // []
console.log(Object.keys({}).length); // 0

Саме на цьому будують найпоширенішу перевірку «чи порожній об'єкт»: Object.keys(obj).length === 0.

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

Тільки «власні» властивості, не ті, що успадковані через prototype:

javascript
const person = { species: 'human' }; const user = Object.create(person); user.name = 'Maria'; console.log(Object.keys(user)); // ['name']

Ключ species живе у прототипі, тому в масив він не входить, хоча 'species' in user поверне true.
Тільки перелічувані властивості. Якщо властивість створена з enumerable: false, у списку її не буде:

javascript
const config = {}; Object.defineProperty(config, 'secret', { value: 42, enumerable: false }); config.visible = 1; console.log(Object.keys(config)); // ['visible']
Символьні ключі не враховуються. Для них є окремий метод:

javascript
const id = Symbol('id'); const user = { name: 'Maria', [id]: 1 }; console.log(Object.keys(user)); // ['name'] console.log(Object.getOwnPropertySymbols(user)); // [Symbol(id)]

Порядок ключів

Для звичайних рядкових ключів порядок збігається з порядком їх додавання в об'єкт:

javascript

const o = {};
o.b = 1;
o.a = 2;

console.log(Object.keys(o)); // ['b', 'a']

Виняток, це ключі, схожі на цілі числа: вони завжди йдуть першими і сортуються за зростанням.

javascript

const mixed = { b: 1, 2: 'two', a: 3, 1: 'one' };

console.log(Object.keys(mixed)); // ['1', '2', 'b', 'a']

Зверніть увагу: числові ключі повертаються як рядки, бо ключі звичайного об'єкта завжди рядкові.

Сусідні методи: Object.values і Object.entries

Отримати список значень:

javascript

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

Object.values(user); // ['Maria', 25, 'Kyiv']

Отримати масив пар ключ-значення:

javascript

Object.entries(user);
// [['name', 'Maria'], ['age', 25], ['city', 'Kyiv']]

Усі три методи мають однакові правила відбору: власні перелічувані нессимвольні властивості.

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

Перебір ключів на практиці

javascript

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

Object.keys(user).forEach(key => {
  console.log(`${key}: ${user[key]}`);
});

Вивід:

javascript

name: Maria
age: 25
city: Kyiv

Оскільки результат, це звичайний масив, до нього застосовні всі методи масивів:

javascript

// скільки всього властивостей
Object.keys(user).length; // 3

// відібрати тільки рядкові значення
Object.keys(user).filter(key => typeof user[key] === 'string'); // ['name', 'city']

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

Очікувати успадковані властивості. Object.keys() не показує нічого з прототипу. Якщо потрібні й успадковані ключі, беріть цикл for...in або оператор in.
Плутати з for...in. Цикл for...in перебирає і власні, і успадковані перелічувані властивості, тому всередині нього часто потрібна перевірка Object.hasOwn(obj, key). У Object.keys() така перевірка вже вбудована.
Шукати в результаті символьні або неперелічувані ключі. Їх там не буде ніколи, для повного списку рядкових ключів є Object.getOwnPropertyNames().
Розраховувати на суворий порядок додавання. Цілочисельні ключі завжди піднімаються нагору і сортуються за зростанням, тому для гарантованого порядку беріть Map або масив.
Забувати, що ключі, це рядки. Object.keys({ 1: 'one' }) поверне ['1'], а не [1], тому порівняння з числом провалиться.
Передавати null або undefined. Object.keys(null) кине TypeError. Примітиви від ES2015 не кидають помилку, але дають майже завжди порожній масив: Object.keys(42) поверне [].

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

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

Premium

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