Объявление обьекта
Обявление объекта
Обявление объекта рекомендация (но можно и через 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