Пошук уроків, статей та іншого контенту
Перебиратимете властивості через Object.keys, Object.values, Object.entries і цикл for...in.
Об’єкт у JavaScript складається з властивостей. Кожна властивість має:
ключ — назву властивості;
значення — дані, які зберігаються за цим ключем.
const user = {
name: "Олена",
age: 25,
isStudent: true
};У цьому прикладі:
name, age та isStudent — ключі;
"Олена", 25 та true — значення.
Щоб перебрати властивості об’єкта, JavaScript має кілька зручних інструментів:
Object.keys();
Object.values();
Object.entries();
цикл for...in.
Метод Object.keys(object) повертає масив ключів об’єкта.
const user = {
name: "Олена",
age: 25,
city: "Львів"
};
const keys = Object.keys(user);
console.log(keys);Результат:
[ 'name', 'age', 'city' ]Після отримання масиву ключів його можна перебрати за допомогою for...of або звичайного циклу.
const user = {
name: "Олена",
age: 25,
city: "Львів"
};
for (const key of Object.keys(user)) {
console.log(key);
}Результат:
name
age
cityЩоб отримати значення за ключем, використовуйте квадратні дужки:
const user = {
name: "Олена",
age: 25,
city: "Львів"
};
for (const key of Object.keys(user)) {
console.log(`${key}: ${user[key]}`);
}Результат:
name: Олена
age: 25
city: ЛьвівЗверніть увагу: key — це змінна, у якій зберігається назва ключа. Тому для доступу до значення потрібно писати user[key], а не user.key.
Метод Object.values(object) повертає масив значень властивостей об’єкта.
const product = {
name: "Клавіатура",
price: 1200,
inStock: true
};
const values = Object.values(product);
console.log(values);Результат:
[ 'Клавіатура', 1200, true ]Значення можна перебирати без доступу до ключів:
const scores = {
math: 90,
physics: 85,
english: 95
};
for (const score of Object.values(scores)) {
console.log(score);
}Результат:
90
85
95Наприклад, за допомогою Object.values() можна обчислити суму числових значень:
const expenses = {
food: 500,
transport: 200,
books: 800
};
const total = Object.values(expenses).reduce(
(sum, expense) => sum + expense,
0
);
console.log(total); // 1500Метод Object.entries(object) повертає масив пар. Кожна пара — це масив із двох елементів:
ключ;
значення.
const user = {
name: "Олена",
age: 25
};
const entries = Object.entries(user);
console.log(entries);Результат:
[ [ 'name', 'Олена' ], [ 'age', 25 ] ]Метод зручно використовувати разом із for...of та деструктуризацією:
const user = {
name: "Олена",
age: 25,
city: "Львів"
};
for (const [key, value] of Object.entries(user)) {
console.log(`${key}: ${value}`);
}Результат:
name: Олена
age: 25
city: ЛьвівУ цьому циклі:
for (const [key, value] of Object.entries(user))кожна пара автоматично розкладається на дві змінні:
key отримує ключ;
value отримує значення.
Без деструктуризації код виглядав би так:
const user = {
name: "Олена",
age: 25
};
for (const entry of Object.entries(user)) {
const key = entry[0];
const value = entry[1];
console.log(`${key}: ${value}`);
}Object.entries() зручно використовувати для фільтрації або перетворення властивостей.
const prices = {
bread: 40,
milk: 35,
coffee: 180
};
const expensiveProducts = Object.fromEntries(
Object.entries(prices).filter(([, price]) => price > 50)
);
console.log(expensiveProducts);Результат:
{ coffee: 180 }Метод Object.fromEntries() створює новий об’єкт із масиву пар [ключ, значення].
Цикл for...in перебирає ключі властивостей об’єкта.
const car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
for (const key in car) {
console.log(key);
}Результат:
brand
model
yearЩоб отримати значення, використовуйте квадратні дужки:
const car = {
brand: "Toyota",
model: "Corolla",
year: 2020
};
for (const key in car) {
console.log(`${key}: ${car[key]}`);
}Цикл for...in перебирає ключі, тому в ньому доступне значення змінної key.
Об’єкти можуть отримувати властивості не лише безпосередньо під час створення, а й через прототип.
const animal = {
eats: true
};
const dog = Object.create(animal);
dog.name = "Бровко";
for (const key in dog) {
console.log(key);
}Результат:
name
eatsВластивість name є власною властивістю dog, а eats успадкована від об’єкта animal.
Якщо потрібно перебирати лише власні властивості, використовуйте Object.keys(), Object.values() або Object.entries():
const animal = {
eats: true
};
const dog = Object.create(animal);
dog.name = "Бровко";
console.log(Object.keys(dog));Результат:
[ 'name' ]У циклі for...in можна перевіряти, чи є властивість власною:
const animal = {
eats: true
};
const dog = Object.create(animal);
dog.name = "Бровко";
for (const key in dog) {
if (Object.hasOwn(dog, key)) {
console.log(key);
}
}Результат:
nameObject.hasOwn(object, key) повертає true, якщо ключ належить саме цьому об’єкту, а не його прототипу.
Object.keys()Використовуйте, коли потрібні лише ключі:
const keys = Object.keys(object);Object.values()Використовуйте, коли потрібні лише значення:
const values = Object.values(object);Object.entries()Використовуйте, коли потрібні і ключі, і значення:
const entries = Object.entries(object);for...inВикористовуйте, коли потрібно перебрати ключі в циклі. Пам’ятайте, що цикл може бачити успадковані властивості.
for (const key in object) {
// робота з key та object[key]
}У наступному прикладі різні способи перебору використовуються для роботи з товаром:
const product = {
name: "Навушники",
price: 2500,
category: "Електроніка",
available: true
};
console.log("Ключі:");
for (const key of Object.keys(product)) {
console.log(key);
}
console.log("Значення:");
for (const value of Object.values(product)) {
console.log(value);
}
console.log("Ключі та значення:");
for (const [key, value] of Object.entries(product)) {
console.log(`${key}: ${value}`);
}
console.log("Перебір через for...in:");
for (const key in product) {
if (Object.hasOwn(product, key)) {
console.log(`${key}: ${product[key]}`);
}
}У більшості практичних випадків Object.keys(), Object.values(), Object.entries() і for...in перебирають властивості в одному й тому самому порядку.
Для звичайних рядкових ключів порядок відповідає порядку їх додавання:
const user = {};
user.name = "Олена";
user.age = 25;
user.city = "Львів";
console.log(Object.keys(user));Результат:
[ 'name', 'age', 'city' ]Ключі, які виглядають як невід’ємні цілі числа, мають особливе правило сортування:
const numbers = {
2: "два",
10: "десять",
1: "один"
};
console.log(Object.keys(numbers));Результат:
[ '1', '2', '10' ]Не покладайтеся на порядок властивостей, якщо логіка програми вимагає чіткої послідовності. Для впорядкованих даних краще використовувати масив.
Неправильно:
const user = {
name: "Олена"
};
for (const key of Object.keys(user)) {
console.log(user.key);
}user.key шукає властивість із буквальним ім’ям key.
Правильно:
for (const key of Object.keys(user)) {
console.log(user[key]);
}for...of без масивуfor...of перебирає ітеровані значення, наприклад елементи масиву. Звичайний об’єкт не можна безпосередньо перебрати через for...of.
Неправильно:
const user = {
name: "Олена",
age: 25
};
for (const value of user) {
console.log(value);
}Правильно:
for (const value of Object.values(user)) {
console.log(value);
}Object.keys()Object.keys() повертає ключі, а не значення:
const user = {
name: "Олена",
age: 25
};
console.log(Object.keys(user));
// [ 'name', 'age' ]
console.log(Object.values(user));
// [ 'Олена', 25 ]for...inЦикл for...in може перебрати властивості прототипу. Якщо потрібні лише власні властивості, перевіряйте ключ через Object.hasOwn() або використовуйте Object.keys(), Object.values() чи Object.entries().
Не варто без потреби додавати або видаляти властивості об’єкта прямо під час перебору. Це може зробити поведінку коду складнішою для розуміння. Краще спочатку отримати потрібні дані, а потім змінити об’єкт.
Створіть об’єкт student із такими властивостями:
name;
age;
course;
isActive.
Потім:
виведіть усі ключі за допомогою Object.keys();
виведіть усі значення за допомогою Object.values();
виведіть ключі та значення за допомогою Object.entries();
повторіть останню операцію за допомогою for...in;
виведіть лише власні властивості об’єкта.
Приклад розв’язання:
const student = {
name: "Андрій",
age: 21,
course: 3,
isActive: true
};
console.log("Ключі:", Object.keys(student));
console.log("Значення:", Object.values(student));
console.log("Пари ключ-значення:");
for (const [key, value] of Object.entries(student)) {
console.log(`${key}: ${value}`);
}
console.log("Перебір через for...in:");
for (const key in student) {
if (Object.hasOwn(student, key)) {
console.log(`${key}: ${student[key]}`);
}
}Object.keys(object) повертає масив власних ключів об’єкта.
Object.values(object) повертає масив власних значень об’єкта.
Object.entries(object) повертає масив пар [ключ, значення].
for...in перебирає ключі об’єкта та може включати успадковані властивості.
Для динамічного доступу до властивості використовуйте object[key].
Object.hasOwn(object, key) допомагає перевірити, чи належить ключ саме цьому об’єкту.
for...of зручно використовувати разом із Object.keys(), Object.values() або Object.entries().