Различия

Показаны различия между двумя версиями страницы.

--- objavlenie_obekta [2023/11/11 18:17]
tro
+++ objavlenie_obekta [2023/12/14 20:17] (текущий)
tro
@@ Строка 2: / Строка 2: @@
 ===== Обявление объекта =====
 ==== Обявление объекта рекомендация (но можно и через LET) ====
 <code>
 const sd={
@@ Строка 36: / Строка 35: @@
 myCity.cityGreeting('Grettering')
 </code>
+<code>
+const bookShelf = {
+  books: ["The Last Kingdom"],
+  getBooks() {
+    return this.books;
+  },
+  addBook(bookName) {
+    this.books.push(bookName);
+  }
+};
+</code>
+==== Массив обїектов ====
+<code>
+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,
+  }
+];
+</code>
+<code>
+const bookShelf = {
+  books: [
+		{ title: "The Last Kingdom", rating: 8 },
+		{ title: "The Mist", rating: 6 }
+	],
+	getBooks() {
+		return this.books;
+	}
+};
+</code>
 ===== Обращение к єлементам объекта =====
 ==== через точку ====
@@ Строка 116: / Строка 160: @@
 book.pageCount = 836;
 </code>
-===== Обхід властивостей обїека =====
+===== Обхід обїекта =====
 ==== через for..in ====
 <code>
 const book = {
@@ Строка 131: / Строка 174: @@
   console.log(book[keyOfObject]);  // Значення властивості з таким ключем
 }
+</code>
+==== Через Object.keys() ====
+приймає об'єкт і повертає масив ключів його властивостей. Якщо в об'єкті немає властивостей, метод поверне порожній масив.
+<code>
+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']
+</code>
+==== Через Object.values() ====
+повертає масив значень його властивостей
+<code>
+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]
+</code>
+==== Через Object.entries() ====
+Повертає масив власних перелічуваних пар властивостей ключ-значення з рядковими ключами.
+==== обход массива обїектов ====
+<code>
+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
+</code>
+===== Поиск в обїекте =====
+==== Поиск в масиве обїектов ====
+<code>
+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)
+	}
+}
+</code>
+===== Модели (обїект данние + методи) =====
+Об'єкти, які пов'язують дані та методи для роботи з цими даними, можна назвати «моделями».
+  * Метод — це звичайна функція, оголошена як властивість об'єкта (див. приклад вище), а не як окрема змінна (див. перший приклад у розділі).
+  * Для звернення до методу об'єкта використовується стандартний синтаксис із крапкою.
+<code>
+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"
+</code>
+==== Доступ до властивостей об'єкта ====
+Для доступу до об'єкта в методі використовується не ім'я змінної цього об’єкта, наприклад bookShelf, а ключове слово **this**.
+<code>
+const bookShelf = {
+  books: ["The Last Kingdom", "The Mist"],
+  getBooks() {
+    console.log(this);
+  },
+};
+bookShelf.getBooks(); // {books: ["The Last Kingdom", "The Mist"], getBooks: f}
+</code>
+===== Обїединение обїектов =====
+==== ...spread ====
+(...spread) дозволяє розпилити властивості довільної кількості об'єктів в один новий.
+Порядок розподілу має значення. Імена властивостей об'єкта — унікальні, тому властивості об'єкта, що розпиляються, можуть перезаписати значення вже існуючої властивості, якщо їх імена збігаються.
+<code>
+const first = { propA: 5, propB: 10 };
+const second = { propC: 15 };
+const third = { ...first, ...second };
+console.log(third); // { propA: 5, propB: 10, propC: 15 }
+</code>
+===== Деструктурізація =====
+<code>
+'use strict';
+let options = {
+  title: "Меню",
+  width: 100,
+  height: 200
+};
+let {title, width, height} = options;
+alert(title);  // Меню
+alert(width);  // 100
+alert(height); // 200
 </code>