Объявление обьекта

Обявление объекта

Обявление объекта рекомендация (но можно и через LET)

const sd={
asdasd: "bnm"
}

Обявление вложенного обїекта

const user = {
name: "Jacques Gluke",
tag: "jgluke",
location: {
country: "Jamaica",
city: "Ocho Rios",
},
stats: {
followers: 5603,
views: 4827,
likes: 1308,
},
};

Обявление объекта с функцией внутри

const myCity = {
city: 'Kyiv',
cityGreeting: function(ad) {
console.log(ad)
}
}
myCity.cityGreeting('Grettering')

const bookShelf = {
books: ["The Last Kingdom"],
getBooks() {
return this.books;
},
addBook(bookName) {
this.books.push(bookName);
}
};

Массив обїектов

const books = [
{
title: "The Last Kingdom",
author: "Bernard Cornwell",
rating: 8.38,
},
{
title: "Beside Still Waters",
author: "Robert Sheckley",
rating: 8.51,
},
{
title: "The Dream of a Ridiculous Man",
author: "Fyodor Dostoevsky",
rating: 7.75,
}
];

const bookShelf = {
books: [
{ title: "The Last Kingdom", rating: 8 },
{ title: "The Mist", rating: 6 }
],
getBooks() {
return this.books;
}
};

Обращение к єлементам объекта

через точку

const user = {
name: "Jacques Gluke",
tag: "jgluke",
location: {
country: "Jamaica",
city: "Ocho Rios",
},
hobbies: ["swimming", "music", "sci-fi"],
};
const location = user.location;
console.log(location); // {country: "Jamaica", city: "Ocho Rios"}

через квадратние скобочки

const book = {
title: "The Last Kingdom",
author: "Bernard Cornwell",
genres: ["historical prose", "adventure"],
isPublic: true,
rating: 8.38,
};
console.log(book["title"]); // "The Last Kingdom"

Изменение значениий свойст обїекта

Указанием имени свойства

const book = {
title: "The Last Kingdom",
author: "Bernard Cornwell",
genres: ["historical prose", "adventure"],
isPublic: true,
rating: 8.38,
};
book.rating = 9;

через короткая запись изменение свойств

В свойство обїекта запишеться значеение по имени переменной віше

const name = "Henry Sibola";
const age = 25;
const user = {
name,
age,
};
console.log(user.name); // "Henry Sibola"
console.log(user.age); // 25

Вичисливаемие значения (computed properties)

const propName = "name";
const user = {
age: 25,
// ключ цієї властивості буде взято зі значення змінної propName
[propName]: "Henry Sibola",
};
console.log(user.name); // "Henry Sibola"

Добавление свойств обїекта

Операція додавання нової властивості після створення об'єкта нічим не відрізняється від зміни значення вже існуючої властивості.

const book = {
title: "The Last Kingdom",
author: "Bernard Cornwell",
genres: ["historical prose", "adventure"],
isPublic: true,
rating: 8.38,
};
book.pageCount = 836;

Обхід обїекта

через for..in

const book = {
title: "The Last Kingdom",
author: "Bernard Cornwell",
genres: ["historical prose", "adventure"],
rating: 8.38,
};
for (const keyOfObject in book) {
console.log(keyOfObject); // Ключ
console.log(book[keyOfObject]); // Значення властивості з таким ключем
}

Через Object.keys()

приймає об'єкт і повертає масив ключів його властивостей. Якщо в об'єкті немає властивостей, метод поверне порожній масив.

const book = {
title: "The Last Kingdom",
author: "Bernard Cornwell",
genres: ["historical prose", "adventure"],
rating: 8.38,
};
const keys = Object.keys(book);
console.log(keys); // ['title', 'author', 'genres', 'rating']

Через Object.values()

повертає масив значень його властивостей

const book = {
title: "The Last Kingdom",
author: "Bernard Cornwell",
rating: 8.38,
};
const values = Object.values(book);
console.log(values); // ["The Last Kingdom", "Bernard Cornwell", 8.38]

Через Object.entries()

Повертає масив власних перелічуваних пар властивостей ключ-значення з рядковими ключами.

обход массива обїектов

const books = [
{ title: "The Last Kingdom", author: "Bernard Cornwell", rating: 8.2 },
{ title: "Beside Still Waters", author: "Robert Sheckley", rating: 9 },
{ title: "The Dream of a Ridiculous Man", author: "Fyodor Dostoevsky", , rating: 6.8 }
];
let totalRating = 0;
for (const book of books) {
totalRating += book.rating;
}
const averageRating = totalRating / books.length;
console.log(averageRating); // 8

Поиск в обїекте

Поиск в масиве обїектов

const books = [
{ title: "The Last Kingdom", author: "Bernard Cornwell" },
{ title: "Beside Still Waters", author: "Robert Sheckley" },
{ title: "The Dream of a Ridiculous Man", author: "Fyodor Dostoevsky" }
];
const authorToSearchFor = "Robert Sheckley";
for (const book of books) {
if(book.author === authorToSearchFor) {
console.log(book);
console.log(book.title)
console.log(book.rating)
}
}

Модели (обїект данние + методи)

Об'єкти, які пов'язують дані та методи для роботи з цими даними, можна назвати «моделями».

Метод — це звичайна функція, оголошена як властивість об'єкта (див. приклад вище), а не як окрема змінна (див. перший приклад у розділі).

Для звернення до методу об'єкта використовується стандартний синтаксис із крапкою.

const bookShelf = {
books: ["The Last Kingdom", "Dream Guardian"],
// Це метод об'єкта
getBooks() {
return "Returning all books";
},
// Це метод об'єкта
addBook(bookName) {
return `Adding book ${bookName}`;
},
};
// Виклики методів
bookShelf.getBooks(); // поверне "Returning all books"
bookShelf.addBook("New book 1"); // поверне "Adding book New book 1"
bookShelf.addBook("New book 2"); // поверне "Adding book New book 2"

Доступ до властивостей об'єкта

Для доступу до об'єкта в методі використовується не ім'я змінної цього об’єкта, наприклад bookShelf, а ключове слово this.

const bookShelf = {
books: ["The Last Kingdom", "The Mist"],
getBooks() {
console.log(this);
},
};
bookShelf.getBooks(); // {books: ["The Last Kingdom", "The Mist"], getBooks: f}

Обїединение обїектов

...spread

(...spread) дозволяє розпилити властивості довільної кількості об'єктів в один новий. Порядок розподілу має значення. Імена властивостей об'єкта — унікальні, тому властивості об'єкта, що розпиляються, можуть перезаписати значення вже існуючої властивості, якщо їх імена збігаються.

const first = { propA: 5, propB: 10 };
const second = { propC: 15 };
const third = { ...first, ...second };
console.log(third); // { propA: 5, propB: 10, propC: 15 }

Деструктурізація

'use strict';
let options = {
title: "Меню",
width: 100,
height: 200
};
let {title, width, height} = options;
alert(title); // Меню
alert(width); // 100
alert(height); // 200