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

Як перебрати об’єкт

Цикл for...in в JavaScript використовується для ітерації (проходження) через властивості об’єкта. Цей цикл дозволяє перебирати всі перераховувані властивості об’єкта, включаючи усі властивості, які знаходяться у самому об’єкті та тих, які успадковані через ланцюжок прототипів.

Ось приклад використання циклу for...in:

const person = {
  name: 'John',
  age: 30,
  city: 'New York'
};

for (let key in person) {
  console.log(key + ': ' + person[key]);
}

У цьому прикладі цикл for...in ітерується через об’єкт person. Кожен ключ (властивість) об’єкта person (у цьому випадку: name, age, city) стає значенням змінної key, і ми використовуємо цей ключ для отримання відповідного значення об’єкта person за допомогою person[key].

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

Метод hasOwnProperty()

Розберемо концепцію власних і невласних властивостей об’єкта і навчимося правильно використовувати цикл for...in.

const animal = {
  legs: 4,
};
const dog = Object.create(animal);
dog.name = "Duke";

console.log(dog);// {name: 'Duke'}
console.log(dog.name);// 'Duke'
console.log(dog.legs);// 4

Метод Object.create(animal) створює і повертає новий об’єкт, зв’язуючи його з об’єктом animal. Тому можна отримати значення властивості legs, звернувшись до нього як dog.legs, хоча він відсутній в об’єкті dog – це невласна властивість з об’єкта animal.

Оператор in, який використовується в циклі for...in, не робить різниці між власними та невласними властивостями об’єкта. Ця особливість заважає, оскільки ми завжди хочемо перебрати тільки власні властивості. Для того, щоб дізнатись, чи містить об’єкт власну властивість, використовується метод hasOwnProperty(key), який повертає true або false.

Метод `Object.create(animal)` створює і повертає новий об'єкт, зв'язуючи його з об'єктом `animal`. Тому можна отримати значення властивості `legs`, звернувшись до нього як `dog.legs`, хоча він відсутній в об'єкті `dog` - це невласна властивість з об'єкта `animal`.

Оператор `in`, який використовується в циклі `for...in`, не робить різниці між власними та невласними властивостями об'єкта. Ця особливість заважає, оскільки ми завжди хочемо перебрати тільки власні властивості. Для того, щоб дізнатись, чи містить об'єкт власну властивість, використовується метод `hasOwnProperty(key)`, який повертає `true` або `false`.

// Повертає true для всіх властивостей
console.log("name" in dog);// true
console.log("legs" in dog);// true

// Повертає true тільки для власних властивостей
console.log(dog.hasOwnProperty("name"));// true
console.log(dog.hasOwnProperty("legs"));// false

Тому, перебираючи циклом for…in, необхідно на кожній ітерації додати перевірку власної властивості. Навіть, якщо зараз ми впевнені у тому, що в об’єкті відсутні невласні властивості, це захистить від можливих помилок у майбутньому.Помилка

const animal = {
  legs: 4,
};
const dog = Object.create(animal);
dog.name = "Duke";

// Використання for...in для перебору ключів об'єкта dog
for (let key in dog) {
  // Перевіряємо, чи властивість належить самому об'єкту dog
  if (dog.hasOwnProperty(key)) {
    console.log(`Key: ${key}, Value: ${dog[key]}`);
  }
}

Метод Object.keys()

Цей метод повертає масив із ключів властивостей об’єкта.

const person = {
  name: "John",
  age: 30,
  isStudent: false
};

const keys = Object.keys(person);
console.log(keys); // ["name", "age", "isStudent"]

Метод Object.values()

Цей метод повертає масив із значень властивостей об’єкта.

const person = {
  name: "John",
  age: 30,
  isStudent: false
};

const values = Object.values(person);
console.log(values); // ["John", 30, false]

Метод Object.entries()

Цей метод повертає масив, де кожен елемент – це масив із ключа та відповідного значення властивості об’єкта.

const person = {
  name: "John",
  age: 30,
  isStudent: false
};

const entries = Object.entries(person);
console.log(entries);
// [["name", "John"], ["age", 30], ["isStudent", false]]

Ці методи допомагають легко отримати доступ до ключів, значень та пар ключ-значення об’єкта та подальше їх перебирання. Знання цих методів спростить вам роботу з об’єктами та дозволить ефективно обробляти дані.