Learn JavaScript

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

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

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

Синтаксис

Object.values(obj)

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

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

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

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

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

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

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

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

console.log(result); // [1, 2]
console.log(Array.isArray(result)); // true

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

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

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

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

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

person.name = "Anna";

console.log(Object.values(person)); // ["Anna"]

Значение "user" здесь не попало в результат, потому что оно находится в прототипе.

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

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

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

const user = { name: "Anna" };

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

console.log(Object.values(user)); // ["Anna"]

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

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

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

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

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

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

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

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

Частый сценарий - получить значения и пройтись по ним через методы массива.

const scores = {
  math: 90,
  english: 85,
  physics: 95,
};

const total = Object.values(scores).reduce((acc, value) => acc + value, 0);

console.log(total); // 270

Это один из самых удобных сценариев использования метода.

Object.values(), Object.keys() и 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.values(obj)); // [1, 2, 3]

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

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

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

console.log(Object.values(arr)); // ["a", "b", "c"]

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

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

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

console.log(Object.values("hi")); // ["h", "i"]

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

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

А вот null и undefined вызовут ошибку:

// Object.values(null);      // TypeError
// Object.values(undefined); // TypeError

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

Object.values() работает только со строковыми перечисляемыми ключами.

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

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

console.log(Object.values(user)); // ["Anna"]

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

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

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

Пример:

const prices = {
  phone: 500,
  laptop: 1500,
  mouse: 50,
};

const total = Object.values(prices).reduce((acc, price) => acc + price, 0);

console.log(total); // 2050

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

Думать, что Object.values() возвращает ключи

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

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

Это значения, а не "name" и "age".

Путать Object.values() и Object.entries()

const user = { name: "Anna" };

console.log(Object.values(user)); // ["Anna"]

Если нужны и ключ, и значение вместе, нужен Object.entries().

Забывать, что свойства из прототипа не попадают в результат

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

person.name = "Anna";

console.log(Object.values(person)); // ["Anna"]

Наследуемые значения сюда не входят.

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

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

Коротко

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