Home

JS Обєкти

Зміст

  1. Створення об'єкта. Обчислювальні властивості
  2. Методи об'єкта
  3. Перебирання об'єкта for...in
  4. Object.keys() Object.values()
  5. Масив об'єктів
  6. Синтаксис spread і rest
  7. Деструктуризація об'єктів
  8. Зміна імені змінної
  9. Об'єкт параметрів

  • Створення об'єкта

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

    Під час створення об'єкта можна додати властивості, кожна з яких описується парами ключ:значення. Властивості розділяються комою. Синтаксис «через крапку» використовується у більшості випадків і доречний тоді, коли ми заздалегідь знаємо ім'я (ключ) властивості, до якої хочемо отримати доступ. Якщо об'єкт не містить властивості з таким ім'ям, на місці звернення повернеться undefined. 

                                const bookTitle = book.title; // 'The Last Kingdom'
                            const bookAuthor = book.author; // 'Bernard Cornwell'

  • Другий спосіб отримати доступ до властивості об'єкта - це синтаксис об'єкт["ім'я властивості"]. в дужках вказується не індекс елемента, а ім'я властивості у вигляді рядка. використовується, у разі, коли ім'я властивості заздалегідь невідоме або зберігається у змінній 

                                    const bookTitle = book["title"];  // 'The Last Kingdom'
                                const bookGenres = book["genres"]; // ['historical prose', 'adventurs']

  • Зміна значення властивості

                                book.rating = 9;
                            book.isPublic = false;
                            book.genres.push("драма");

  • Додавання властивостей

    Якщо під час запису значення за ім'ям, така властивість в об'єкті відсутня, вона буде створена. 

                                book.translations = ["ua", "ru"];
                            console.log(book.translations); // ['ua', 'ru']

  • Короткі властивості

                                const user = {
                                name: name,
                                age: age,
                            };

                            const user = {
                                name,
                                age,
                            };

  • Обчислювальні властивості

    Бувають ситуації, коли під час оголошення об'єкта необхідно додати властивість з ім'ям, яке ми заздалегідь не знаємо 

                                const propName = "name";
                            const user = {
                                age: 25,
                            };
                            user[propName] = "Генрі Сибола";
                            або
                            [propName]: "Генрі Сибола";

Методи об'єкта

                    const bookShelf = {
                        books: ["The Last Kingdom", "Dream Guardian"],
                        // Це метод об'єкта
                        getBooks() {
                          console.log("Цей метод буде повертати всі книги - властивість books");
                        },
                        // Це метод об'єкта
                        addBook(bookName) {
                          console.log("Цей метод буде додавати нову книгу у властивість books");
                        },
                      };
                      
                      // Виклики методів
                      bookShelf.getBooks();
                      bookShelf.addBook("Нова книга");

Для того, щоб отримати доступ до властивостей об'єкта в методах, ми звертаємось до нього через this і далі, стандартно - «через крапку» до властивостей. 

                    const bookShelf = {
                        books: ["The Last Kingdom"],
                        getBooks() {
                          return this.books;
                        },
                        addBook(bookName) {
                          this.books.push(bookName);
                        },
                        removeBook(bookName) {
                          const bookIndex = this.books.indexOf(bookName);
                          this.books.splice(bookIndex, 1);
                        },
                      };
                      
                      bookShelf.addBook("The Mist");
                      bookShelf.addBook("Dream Guardian");
                      bookShelf.removeBook("The Mist");

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

На відміну від масиву або рядка, об'єкт - це неітерабельна сутність, тобто його не можна перебрати циклами for або for...of.

  • Цикл for...in - перебирає ключі об'єкта​

    Змінна key доступна тільки в тілі циклу. На кожній ітерації в неї буде записано значення ключа (ім'я) властивості. Для того, щоб отримати значення властивості з таким ключем (ім'ям), використовується синтаксис квадратних дужок. 

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

  • Метод hasOwnProperty()

                                const animal = {
                                legs: 4,
                              };
                            const dog = Object.create(animal);
                            dog.name = "Манго";

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

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

                                // ❌ Повертає 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, необхідно на кожній ітерації додати перевірку власної властивості. 

                                for (const key in book) {
                                // Якщо це власна властивість - виконуємо тіло if
                                if (book.hasOwnProperty(key)) {
                                  console.log(key);
                                  console.log(book[key]);
                                }
                              }

  • Метод Object.keys()

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

                                const keys = Object.keys(book);
                            console.log(keys); // ['title', 'author', 'genres', 'rating']  
                            for (const key of keys) {
                                console.log(key); // Ключ
                                console.log(book[key]); // Значення властивості
                            }

  • Метод Object.values()​

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

                                const values = Object.values(book);
                            console.log(values); // ['The Last Kingdom', 'Bernard Cornwell', 8.38]

  • Метод Object.entries()

    Метод Object.entries(obj) повертає масив записів, кожен елемент якого, буде ще один масив з 2-х елементів: імені властивості і значення цієї властивості з об'єкта obj. На практиці метод Object.entries(obj) використовується рідко

Масив об'єктів

                const books = [
                    {
                        title: "The Last Kingdom",
                        author: "Bernard Cornwell",
                        rating: 8.38,
                    },
                    {
                        title: "Сон смішної людини",
                        author: "Федір Достоєвський",
                        rating: 7.75,
                    },
                ];

Для перебирання такого масиву використовується стандартний цикл for...of. 

                    for (const book of books) {
                        console.log(book);
                        console.log(book.title);
                        console.log(book.author);
                        console.log(book.rating);
                    }
                    const bookNames = [];

                    for (const book of books) {
                    bookNames.push(book.title);
                    }

Синтаксис spread і rest

spread: створення нового масиву

  • Операція ... (spread) дозволяє розподілити колекцію елементів (масив, рядок або об'єкт) в місце, в якому очікується набір окремих значень. розпакований масив 

                                const temps = [14, -4, 25, 8, 11];

                            console.log(Math.max(temps)); // ❌ Так не спрацює
                            console.log(...temps); // ✅ Так спрацює

  • ... створення нового масиву

    Операція ... (spread) дозволяє створити копію масиву або «склеїти» довільну кількість масивів в один новий. Раніше для цього використовували методи slice() і concat() 

                                const copyOfTemps = [...temps];
                            const allTemps = [...lastWeekTemps, ...currentWeekTemps];

  • ... створення нового об'єкта

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

                                const first = { propA: 5, propB: 10 };
                            const second = { propC: 15 };
                            const third = { ...first, ...second };
                            const third = { propB: 20, ...first, ...second };
                            const fourth = { ...first, ...second, propB: 20 };

rest: збирання всіх аргументів функції

  • Операція ... (rest) дозволяє зібрати групу незалежних елементів у нову колекцію. Синтаксично - це близнюк операції розподілу, але відрізнити їх просто - розподіл - коли ... знаходиться у правій частині операції присвоювання, а збирання - коли ... знаходиться в її лівій частині.
  • Отже, можна «зібрати» всі аргументи функції в один параметр, використовуючи операцію rest. Ім'я параметра може бути довільним. Найчастіше його називають args, restArgs або otherArgs - скорочено від arguments. 
  •                         function multiply(firstNumber, secondNumber, ...otherArgs) {
                            console.log(firstNumber); // Значення першого аргументу
                            console.log(secondNumber); // Значення другого аргументу
                            console.log(otherArgs); // Масив інших аргументів
                        }
                        
                        multiply(1, 2);
                        multiply(1, 2, 3);
                        multiply(1, 2, 3, 4);

Деструктуризація об'єктів

  • Під час розробки програм дані приходять, як правило, у вигляді масивів і об'єктів, значення яких необхідно записати у локальні змінні. Для того, щоб робити це максимально просто, в сучасному стандарті існує синтаксис деструктуризованого присвоювання.

  • Якщо ім'я змінної та ім'я властивості збігаються, відбувається присвоювання, в іншому випадку, їй буде присвоєно undefined. Порядок оголошення змінних у фігурних дужках - неважливий. 

                                const book = {
                                title: "The Last Kingdom",
                                author: "Bernard Cornwell",
                                genres: ["historical prose", "adventure"],
                                isPublic: true,
                                rating: 8.38,
                            };
                            
                            // Деструктуризуємо
                            const { title, author, isPublic, rating, coverImage } = book;
                            console.log(coverImage); // undefined
                            const accessType = isPublic ? "публічному" : "закритому";

  • Для того, щоб уникнути присвоєння undefined під час деструктуризації неіснуючих властивостей об'єкта, можна задати змінним значення за замовчуванням, які будуть присвоєні лише у тому випадку, якщо об'єкт не містить властивості з таким ім'ям. 

                                const book = {
                                title: "The Last Kingdom",
                                author: "Bernard Cornwell",
                              };
                              
                            // Додамо зображення обкладинки, якщо воно відсутнє в об'єкті книги
                            const {
                                title,
                                coverImage = "https://via.placeholder.com/640/480",
                                author,
                            } = book;

  • Зміна імені змінної

    Під час деструктуризації можна змінити ім'я змінної, в яку розпаковується значення властивості. Спочатку пишемо ім'я властивості, з якої хочемо отримати значення, після чого ставимо двокрапку і пишемо ім'я змінної, в яку необхідно помістити значення цієї властивості. 

                                const firstBook = {
                                title: "The Last Kingdom",
                                coverImage:
                                  "https://images-na.ssl-images-amazon.com/images/I/51b5YG6Y1rL.jpg",
                            };
                            
                            const {
                              title: firstTitle,
                              coverImage: firstCoverImage = "https://via.placeholder.com/640/480",
                            } = firstBook;

  • Деструктуризація в циклах

                                for (const book of books) {
                                console.log(book.title);
                                console.log(book.author);
                                console.log(book.rating);
                            }
                            // а краще так
                            for (const book of books) {
                                const { title, author, rating } = book;
                              
                                console.log(title);
                                console.log(author);
                                console.log(rating);
                            }
                            // або так
                            for (const { title, author, rating } of books) {
                                console.log(title);
                                console.log(author);
                                console.log(rating);
                            }

  • Глибока деструктуризація

                                const user = {
                                name: "Jacques Gluke",
                                tag: "jgluke",
                                stats: {
                                  followers: 5603,
                                  views: 4827,
                                  likes: 1308,
                                },
                            };
                              
                            const {
                                name,
                                tag,
                                stats: { followers, views: userViews, likes: userLikes = 0 },
                            } = user;

Об'єкт параметрів

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

                    function doStuffWithBook(book) {
                        // Робимо щось з властивостями об'єкта
                        console.log(book.title);
                        console.log(book.numberOfPages);
                        // І так далі
                      }

                      // ✅ Все зрозуміло
                    doStuffWithBook({
                        title: "The Last Kingdom",
                        numberOfPages: 736,
                        downloads: 10283,
                        rating: 8.38,
                        isPublic: true,
                    });

Ще один плюс у тому, що можна деструктуризувати об'єкт в параметрі book. Це можна зробити в тілі функції. 

                    function doStuffWithBook(book) {
                        const { title, numberOfPages, downloads, rating, isPublic } = book;
                        console.log(title);
                        console.log(numberOfPages);
                        // І так далі
                      }

Або відразу в сигнатурі (підписі) функції - немає різниці 

                    function doStuffWithBook({
                        title,
                        numberOfPages,
                        downloads,
                        rating,
                        isPublic,
                      }) {
                        console.log(title);
                        console.log(numberOfPages);
                        // І так далі
                      }