Метод Object.values()

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

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

Теорія

TL;DR

Повертає масив значень властивостей об'єкта.
Тільки власні властивості, нічого з прототипу.
Тільки перелічувані (enumerable) властивості.
Порядок значень точно відповідає порядку ключів у Object.keys().
Числові ключі сортуються за зростанням, тому значення можуть іти не в порядку запису.
Разом з Object.keys() і Object.entries() утворює трійку методів для роботи з об'єктом як з колекцією.

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

javascript

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

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

Повернулися тільки значення властивостей об'єкта, без їхніх імен.

Синтаксис

javascript

Object.values(obj)

obj, об'єкт, з якого потрібно отримати значення.
Повертає масив значень у тому самому порядку, що й Object.keys().

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

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

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

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

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

javascript
Object.keys(obj); // ['visible'] Object.values(obj); // [10]

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

Приклад з числовими ключами

javascript

const fruits = { 3: 'апельсин', 1: 'яблуко', 2: 'банан' };

console.log(Object.values(fruits));
// ['яблуко', 'банан', 'апельсин'], сортується за числовими ключами

Цілочисельні ключі рушій завжди впорядковує за зростанням, тому значення виходять не в тому порядку, у якому їх записали в літералі. Якщо порядок критичний, беріть масив або Map.

Перебір значень

javascript

const product = { name: 'Сорочка', price: 2500, inStock: true };

Object.values(product).forEach(value => console.log(value));

Виведе:

javascript

Сорочка
2500
true

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

javascript

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

const total = Object.values(cart).reduce((sum, price) => sum + price, 0);
console.log(total); // 245

Трійка Object.keys, Object.values і Object.entries

Метод	Що повертає
`Object.keys(obj)`	масив ключів
`Object.values(obj)`	масив значень
`Object.entries(obj)`	масив пар `[ключ, значення]`

Підсумок по самому методу:

Що робить	Повертає	Враховує прототип	Тип даних
Отримує всі значення властивостей	Масив значень	Ні	`Array`

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

Очікувати успадковані значення. Усе, що лежить у прототипі, у результат не входить, як і у Object.keys().
Розраховувати на порядок оголошення при числових ключах. Ключі 1, 2, 3 завжди сортуються за зростанням, і значення йдуть за ними.
Шукати значення за індексом. Object.values(obj)[0], це не «перша додана властивість», а перший ключ у порядку, який визначає рушій. Надійніше звертатися за іменем: obj.name.
Плутати з Object.entries(). values втрачає імена властивостей, тому, якщо ключ потрібен у циклі, беріть entries.
Передавати null або undefined. Object.values(null) кине TypeError. Для рядка результатом будуть окремі символи: Object.values('ab') поверне ['a', 'b'].
Вважати результат копією даних. Значення-об'єкти копіюються за посиланням, тому зміна такого елемента масиву змінить і вихідний об'єкт.

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

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

Premium

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