Learn JavaScript

Object.keys, Object.values, Object.entries

У объекта нет встроенного “цикла по свойствам” как у массива, но есть методы, которые превращают структуру “ключ - значение” в массивы:

  • Object.keys(obj) - массив ключей
  • Object.values(obj) - массив значений
  • Object.entries(obj) - массив пар [key, value]

Дальше эти массивы удобно перебирать через for...of, forEach, map, filter и другие методы массивов.

1) Object.keys: получить ключи

const user = { name: "Sam", age: 20, isActive: true };

const keys = Object.keys(user);

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

Ключи всегда строки.

2) Object.values: получить значения

const user = { name: "Sam", age: 20, isActive: true };

const values = Object.values(user);

console.log(values); // ["Sam", 20, true]

3) Object.entries: пары ключ-значение

const user = { name: "Sam", age: 20, isActive: true };

const entries = Object.entries(user);

console.log(entries);
// [["name", "Sam"], ["age", 20], ["isActive", true]]

4) Перебор ключей

const user = { name: "Sam", age: 20 };

for (const key of Object.keys(user)) {
  console.log(key, user[key]);
}
// name Sam
// age 20

Здесь user[key] - обязательны квадратные скобки, потому что key - переменная.

5) Перебор значений

const scores = { a: 10, b: 20, c: 15 };

let sum = 0;

for (const value of Object.values(scores)) {
  sum += value;
}

console.log(sum); // 45

6) Перебор пар через entries и деструктуризацию

entries часто самый удобный вариант, потому что сразу дает ключ и значение.

const user = { name: "Sam", age: 20 };

for (const [key, value] of Object.entries(user)) {
  console.log(key, value);
}
// name Sam
// age 20

7) Преобразования: сделать новый объект из entries

Иногда нужно изменить значения и собрать обратно объект. Удобный путь:

  • Object.entries -> map -> Object.fromEntries
const prices = { apple: 10, banana: 20 };

const doubled = Object.fromEntries(
  Object.entries(prices).map(([key, value]) => [key, value * 2])
);

console.log(doubled); // { apple: 20, banana: 40 }

8) Что считается “своими” свойствами

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

const obj = { a: 1 };
Object.defineProperty(obj, "hidden", { value: 2, enumerable: false });

console.log(Object.keys(obj)); // ["a"]

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

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

1) Пытаться вызвать keys на массиве как метод

Это статические методы Object, они вызываются так:

const obj = { a: 1 };
console.log(Object.keys(obj));

А не так:

const obj = { a: 1 };
console.log(obj.keys);

2) Использовать точку вместо скобок при переборе ключей

const user = { name: "Sam" };
const key = "name";

console.log(user.key);  // undefined
console.log(user[key]); // "Sam"

Что стоит запомнить

  • Object.keys возвращает массив ключей.
  • Object.values возвращает массив значений.
  • Object.entries возвращает массив пар [key, value].
  • Эти методы упрощают перебор объекта через привычные инструменты массивов.
  • При переборе по ключам обращение к значению делают через obj[key].