Перебирання обʼєкта

Об'єкт - це неітерабельна сутність і його не можна перебрати циклами for або for...of. Для перебору обʼєктів використовують інші підходи.

Цикл for...in

Цикл for...in використовують для перебору ключів об'єкта. Цей цикл дозволяє пройтися по всіх перераховуваних властивостях об'єкта, включаючи його власні властивості та властивості, які знаходяться в ланцюжку прототипів.

for (key in object) {
  // інструкції
}

На кожній ітерації цього циклу береться ключ однієї властивості. Утім знаючи ключ використовуючи синтаксис квадратних дужок можна отримати і значення властивості.

let user = {
  name: "Alex",
  age: 30,
  hobby: ["electronics", "programming", "gym"],
};

for (let key in user) {
  console.log(key); // На кожній ітерації виведе: name, age, hobby
  console.log(user[key]); // На кожній ітерації виведе: "Alex", 30, ["electronics", "programming", "gym"]
}

Метод Object.create()

Метод Object.create() використовують для створення нового об'єкта з вказаним прототипом та властивостями.

Припустимо у нас є обʼєкт car, в якому описана властивість кількості коліс - 4. На його основі ми можемо створити новий обʼєкт myCar, який у прототипі успадкує властивості обʼєкту car.

В наступному прикладі обʼєкт myCar - має властивість model. Але якщо звернутися до його властивості wheels - нам покаже 4. Це відбувається тому, що не знайшовши власну таку властивість JavaScript шукатиме таку властивість у прототипі обʼєкта і якщо знайде, то поверне це значення. якщо не знайде, то шукатиме у прототипі прототипа і так далі. Якщо і в прототипах не знайде такої властивості, то поверне undefined.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

console.log("car", car);
console.log("myCar", myCar);
console.log("myCar.wheels", myCar.wheels);

Як бачимо, обʼєкт може мати власні властивості, а може мати властивості прототипа.

Якщо потрібно створити об'єкт без додаткових властивостей прототипа. Це може бути корисним в деяких випадках, коли необхідно створити об'єкт без будь-яких унаслідованих властивостей:

let emptyObject = Object.create(null);

Метод hasOwnProperty()

Давайте вищезазначений обʼєкт myCar спробуємо перебрати циклом for...in.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

for (let key in myCar) {
  console.log(key); // На кожній ітерації виведе: model, wheels
  console.log(myCar[key]); // На кожній ітерації виведе: "Audi", 4
}

Як бачимо цикл for...in перебирає як власні властивості, так і властивості свого прототипу і не бачить між ними різниці. Але у більшості випадків потрібно перебирати саме власні вдастивості обʼєкта.

Щоб дізнатись, чи містить об'єкт власну властивість, використовують метод hasOwnProperty(key), який повертає true або false.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

console.log("Has own property model: ", myCar.hasOwnProperty("model")); //true
console.log("Has own property wheels: ", myCar.hasOwnProperty("wheels")); //false

Використовуючи цей метод, щоб вибрати тільки власні властивості обʼєкта - на кожній ітерації потрібно проводити перевірку чи це є власною властивістю.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";

for (let key in myCar) {
  if (myCar.hasOwnProperty(key)) {
    console.log(key); // На ітерації виведе: model
    console.log(myCar[key]); // На ітерації виведе: "Audi"
  }
}

Метод Object.keys()​

Метод Object.keys() використовують для отримання масиву зі всіма власними перераховуваними властивостями об'єкта, які мають строкові ключі. Цей метод повертає масив із ключами властивостей об'єкта, які можна перерахувати. Якщо власних властивостей нема - повернеться порожній масив.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

console.log(Object.keys(myCar)); // ['model', 'color']

Отримавши масив ключів власних властивостей, тепер можна перебрати обʼєкт використовуючи цикл for...of не роблячи перевірку чи це власна властивість на кожній ітерації.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

const keys = Object.keys(myCar);
console.log(keys);

for (const key of keys) {
  console.log(key);
  console.log(myCar[key]);
}

Метод Object.values()

Метод Object.values() використовують для отримання масиву зі всіма значеннями перераховуваних вдасних властивостей об'єкта. Якщо вдастивостей немає, то повернеться порожній массив.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

const values = Object.values(myCar);
console.log(values); // ['Audi', 'red']

Масив значень властивостей також можна перебрати циклом for...of, наприклад, для отримання загальної суми числових значень.

const cars = {
  audi: 3,
  ford: 5,
  bmw: 2,
  toyota: 6,
};

const values = Object.values(cars); //[3, 5, 2, 6]

let total = 0;

for (let value of values) {
  total += value;
}

console.log("total: ", total); // total: 16

Метод Object.entries()

Метод Object.entries() використовують для отримання масиву зі всіма записами (парами ключ-значення) перераховуваних властивостей об'єкта. Цей метод повертає масив, в якому кожен елемент сам є масивом, що містить ключ та відповідне йому значення.

const car = {
  wheels: 4,
};

const myCar = Object.create(car);
myCar.model = "Audi";
myCar.color = "red";

const result = Object.entries(myCar);
console.log(result); // [['model', 'Audi'], ['color', 'red']]

На практиці метод Object.entries() використовують рідко, тільки для якихось дуже специфічних завдань.