Learn JavaScript

Object.keys() - метод для получения ключей объекта в JavaScript

Object.keys() возвращает массив ключей объекта.

Это один из самых частых способов быстро получить список свойств объекта и потом пройтись по ним через forEach(), map() или другой метод массива.

Синтаксис

Object.keys(obj)

obj - объект, у которого нужно получить ключи.

Что делает Object.keys()

Метод берёт объект и возвращает массив его ключей.

const user = {
  name: "Anna",
  age: 25,
};

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

Что возвращает Object.keys()

Object.keys() всегда возвращает массив строк.

const result = Object.keys({ a: 1, b: 2 });

console.log(result);        // ["a", "b"]
console.log(Array.isArray(result)); // true

Это главное, что важно запомнить: результатом будет именно массив, а не объект и не итератор.

Только собственные свойства

Object.keys() возвращает только собственные свойства объекта.

Свойства из прототипа в результат не попадают.

const base = { role: "user" };
const person = Object.create(base);

person.name = "Anna";

console.log(Object.keys(person)); // ["name"]

Ключ role здесь не попал в результат, потому что он находится в прототипе.

Только перечисляемые свойства

Метод возвращает только перечисляемые свойства.

Если свойство сделано неперечисляемым, в результат оно не попадёт.

const user = { name: "Anna" };

Object.defineProperty(user, "secret", {
  value: "123",
  enumerable: false,
});

console.log(Object.keys(user)); // ["name"]

Пустой объект

Если у объекта нет своих перечисляемых свойств, метод вернёт пустой массив.

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

Object.keys() не меняет объект

Метод только читает ключи и не изменяет сам объект.

const user = { name: "Anna", age: 25 };
const keys = Object.keys(user);

console.log(user); // { name: "Anna", age: 25 }
console.log(keys); // ["name", "age"]

Перебор объекта через Object.keys()

Частый сценарий - получить ключи, а потом пройтись по ним циклом.

const user = {
  name: "Anna",
  age: 25,
};

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

Это удобный способ перебора объекта, особенно когда дальше хочется использовать методы массива.

Object.keys() и for…in

Эти способы часто путают.

const base = { role: "user" };
const person = Object.create(base);

person.name = "Anna";

for (const key in person) {
  console.log(key);
}

for...in проходит и по перечисляемым свойствам из прототипа.

Object.keys() возвращает только собственные ключи объекта.

Из-за этого Object.keys() часто безопаснее и предсказуемее.

Object.keys(), Object.values() и Object.entries()

Это три близких метода, но возвращают они разное:

  • Object.keys() - ключи
  • Object.values() - значения
  • Object.entries() - пары [ключ, значение]

Пример:

const user = {
  name: "Anna",
  age: 25,
};

console.log(Object.keys(user));    // ["name", "age"]
console.log(Object.values(user));  // ["Anna", 25]
console.log(Object.entries(user)); // [["name", "Anna"], ["age", 25]]

Порядок ключей

Обычно ключи возвращаются в том порядке, в котором свойства хранятся в объекте.

const obj = {
  first: 1,
  second: 2,
  third: 3,
};

console.log(Object.keys(obj)); // ["first", "second", "third"]

Но главное здесь не сам порядок, а то, что результат приходит в виде массива.

Массивы и Object.keys()

Массив тоже является объектом, поэтому метод работает и с ним.

const arr = ["a", "b", "c"];

console.log(Object.keys(arr)); // ["0", "1", "2"]

Важно помнить, что это строки, а не числа.

Строка как аргумент

Если передать строку, JavaScript обернёт её в объект и вернёт индексы символов.

console.log(Object.keys("hi")); // ["0", "1"]

Для других примитивов результат обычно будет пустым массивом:

console.log(Object.keys(123));   // []
console.log(Object.keys(true));  // []

Символы не попадают в результат

Object.keys() возвращает только строковые ключи.

Свойства с ключами-символами сюда не входят.

const id = Symbol("id");
const user = {
  name: "Anna",
  [id]: 1,
};

console.log(Object.keys(user)); // ["name"]

Когда это полезно

Object.keys() удобно использовать, когда:

  • нужно получить список ключей объекта
  • нужно пройтись по объекту через методы массива
  • важно работать только с собственными свойствами

Пример:

const settings = {
  theme: "dark",
  lang: "ru",
};

const keys = Object.keys(settings);

console.log(keys); // ["theme", "lang"]

Частые ошибки

Думать, что Object.keys() возвращает значения

const user = { name: "Anna", age: 25 };

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

Это ключи, а не "Anna" и 25.

Путать Object.keys() и for…in

const base = { role: "user" };
const person = Object.create(base);

person.name = "Anna";

console.log(Object.keys(person)); // ["name"]

Свойства из прототипа сюда не входят.

Забывать, что индексы массива приходят строками

const arr = ["a", "b"];

console.log(Object.keys(arr)); // ["0", "1"]

Это строки, а не числа 0 и 1.

Быстрая памятка

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

Коротко

Object.keys() - это стандартный способ получить ключи объекта в JavaScript. Главное, что стоит запомнить: метод возвращает массив собственных перечисляемых строковых ключей и не затрагивает свойства из прототипа.