4 ОБ’ЄКТИ
Об'єкти JavaScript дуже схожі на масиви, але для доступу до елементів об'єктів використовуються рядки, а не числа. Ці рядки називають ключами, або властивостями, а елементи, які їм відповідають, – значеннями. Разом ці фрагменти інформації утворюють пари «ключ-значення». Причому якщо масиви використовуються головним чином як списки, що зберігають безліч елементів, то об'єкти часто застосовують як поодинокі сутності з безліччю характеристик, або атрибутів.
Наприклад, в третьому розділі ми створили кілька масивів, що зберігають назви різних тварин. Але що якщо потрібно зберігати набір різних відомостей про одне конкретне тварину?
Створення об'єктів
Для зберігання різноманітної інформації про одну тварину підійде JavaScript-об'єкт. Ось приклад об'єкта, де зберігаються відомості про триногу кішку на ім'я Гармонія.
Ми створили змінну під назвою cat і присвоїли їй об'єкт з трьома парами «ключ-значення» (лапи, ім'я, окрас). При створенні об'єкта використовуються фігурні дужки {} замість квадратних, до яких ми звикли, створюючи масиви. Усередині фігурних дужок можна вводити пари «ключ-значення», а разом дужки і пари значень називаються літералом об'єкта. Літерал об'єкта – це швидкий спосіб створення об'єкта разом з його вмістом.
При створенні об'єкта ключ записується перед двокрапкою (:), а значення – після. Це двокрапка нагадує знак «дорівнює», оскільки значенням, що стоять зліва, присвоюються імена (ключам), що стоять праворуч, що схоже на створення змінних зі значеннями. Всі пари «ключ-значення» повинні бути розділені комами – в нашому прикладі ці коми стоять в кінці рядків. І зверніть увагу, що після завершальної пари «ключ-значення» ("color": "Черепаховий") кому ставити не потрібно – слідом за цією парою ставиться фігурна дужка.
Ключі без лапок
Створюючи перший об'єкт, ми писали імена ключів в лапках, проте це не обов'язково. Наступний запис теж є допустимим літералом об'єкта
Пам'ятайте, що, хоча ключ завжди є рядковим (в лапках він записаний або без), значення, відповідне цьому ключу, може бути будь-якого типу – навіть змінною, в якій зберігаються дані.
Крім того, весь об'єкт можна записати одним рядком, хоча читати таку програму буде, мабуть, не дуже зручно:
Доступ до значень всередині об'єктів
Значення, що зберігаються в об'єктах можна отримати за допомогою квадратних дужок – так само, як елементи масиву. Єдина відмінність в тому, що замість індексу (число) використовується ключ (рядок).
Точно так же, як необов'язкові лапки при записі літерала об'єкта, їх можна опускати і при доступі до значень по ключу. Однак в цьому випадку код буде трохи іншим:
Такий запис називають точковою нотацією. Замість того щоб писати ім'я ключа в лапках всередині квадратних дужок, ми просто ставимо крапку, після якої пишемо ім'я ключа, без лапок. І, аналогічно ключам без лапок при записі літерала, такий прийом спрацює, тільки якщо ключ не містить спеціальних символів – наприклад, пробілів.
Тепер припустимо, що ви хочете дізнатися, які взагалі ключі є у даного об'єкта. Для цього в JavaScript є зручний засіб – команда Object.keys ():
Object.keys (anyObject) повертає масив, що містить всі ключі об'єкта anyObject.
Додавання елементів об'єкта
Порожній об'єкт схожий на порожній масив, тільки замість квадратних дужок при його створенні використовуються фігурні
Додавати елементи об'єкта можна так само, як елементи масиву, – але використовуючи рядки замість чисел:
Ми почали з пустого об'єкта під назвою cat, а потім по черзі додали до нього три пари «ключ-значення». Потім ми ввели cat;, і браузер відобразив вміст об'єкта.
У масивах елементи розташовані строго один за одним: індекс 0 перед індексом 1, індекс 3 після індексу 2; проте в разі об'єктів не зрозуміло, як розташувати елементи один щодо одного. Чи повинен ключ color стояти перед legs або після? «Правильної» відповіді на це питання немає, тому об'єкти зберігають свої ключі без конкретної черги, в результаті чого різні браузери показують ключі в різному порядку. Так що ніколи не покладайтеся в своїх програмах на той чи інший порядок ключів.
Додавання ключів через точку
Нові ключі також можна додавати через точкову нотацію. Давайте перепишемо цим способом попередній приклад, тобто створимо порожній об'єкт і заповнимо його даними:
Якщо звернутися до неіснуючої властивості об'єкта, JavaScript поверне спеціальне значення undefined, повідомляючи таким чином: «тут нічого немає». наприклад:
Масиви об'єктів
До цього моменту ми розглядали тільки масиви і об'єкти, в яких містяться дані простих типів, такі як числа і рядки. Однак ніщо не заважає зробити елементом масиву або об'єкта інший масив або об'єкт. Наприклад, так може виглядати масив з об'єктами, що описують динозаврів:
Отримати відомості про першого динозавра можна вже відомим нам способом - вказавши індекс в квадратних дужках:
А якщо потрібна тільки назва першого динозавра, досить вказати ключ об'єкта в ще одних квадратних дужках
Інший варіант – скористатися точковою нотацією:
Масив друзів
Давайте розглянемо більш складний приклад – масив об'єктів з відомостями про друзів, де в кожен з об'єктів вкладено по ще одному масиву. Спочатку створимо об'єкти, а потім помістимо їх в масив.
Ми створили три об'єкти, зберігши їх у змінних anna, dave і kate. У кожного з цих об'єктів є по три властивості: name, age і luckyNumbers. Кожному ключу name відповідає строкове значення, ключу age – числове, а ключу luckyNumbers – масив, що містить кілька чисел.
Тепер створимо масив друзів:
Отже, в змінній friends знаходиться масив з трьома елементами: anna, dave і kate (кожен з них є об'єктом). Ми можемо отримати будь-який з об'єктів по його індексу в масиві:
Також ми можемо отримати значення, що зберігається в об'єкті, вказавши індекс об'єкта в квадратних дужках, поставивши крапку і написавши відповідний ключ:
Цей код запитує елемент за індексом 2 (що відповідає змінній kate), а потім - властивість цього об'єкта, що зберігається по ключу "name" (це "Кейт"). Можна навіть отримати значення з масиву, що знаходиться в об'єкті, який, в свою чергу, знаходиться в масиві friends
Дослідження об'єктів в консолі
Chrome дозволяє вивчати вміст об'єктів, показаних в консолі.
Наприклад, якщо ви введете
Chrome відобразить наступне
Розкривши об’єкт можна побачити наступний набір властивостей:
Зверніть увагу, що крім елементів масиву інтерпретатор показує його властивість length. Також ви можете переглянути масив friends цілком і розкрити кожен його елемент
Що корисного можна зробити з об'єктами
Тепер, коли вам відомі різні способи створення об'єктів і Додавання до них властивостей, давайте застосуємо ці знання на практиці, ввівши кілька простих програм.
Облік боргів
Припустимо, ви вирішили відкрити банк. Ви позичили друзям грошей і тепер думаєте, як вести облік того, хто і скільки вам винен.
Можна використовувати об'єкт як спосіб зв'язати рядок з числом. Рядком в нашому випадку буде ім'я друга, а числом – сума, яку вам винні:
Спочатку ми створили порожній масив owedMoney. Потім ми присвоїли ключу "Джиммі" значення 5, а далі присвоїли значення 7 ключу "Анна".
Далі, запросивши значення, пов'язане з ключем "Джиммі", ми отримали 5. Потім, намагаючись дізнатися значення, пов'язане з ключем "Еліс", ми отримали відповідь undefined, оскільки такий ключ не заданий.
Тепер уявімо, що Джиммі зайняв у вас ще трохи грошей (скажімо, 3 долари). Пора оновити дані в нашому об'єкті, додавши 3 до боргу Джиммі - використовуємо для цього оператор «Плюс дорівнює» (+ =).
Також можна подивитися на об'єкт цілком, щоб з'ясувати, скільки грошей заборгував кожен з друзів
Зберігання інформації про фільми
Припустимо, у вас велика колекція кіно на DVD і Blu-ray. Правда було б здорово зберігати інформацію про ці фільми на комп'ютері, щоб в разі чого швидко знайти відомості про той чи інший фільм?
Для цього можна створити об'єкт, кожен ключ в якому - це назва фільму, а кожне значення - інший об'єкт, в якому міститься інформація про цей фільм. Так, що в об'єкті значення теж можуть бути об'єктами!
Напевно, ви помітили, що назви фільмів (ключі зовнішнього об'єкта) в лапках, але ключі внутрішніх об'єктів записав без лапок. Справа в тому, що в назвах потрібні пробіли - інакше довелося б писати щось на зразок ЗоряніВійниЕпізодVIПоверненняДжедая, а це вже зовсім безглуздо. Для ключів вкладених об'єктів лапки необов'язкові. Код виглядає акуратніше, коли в ньому немає зайвих знаків пунктуації.
Тепер, якщо ви захочете щось дізнатися про фільм, це легко зробити:
Ми зберегли відомості про фільм «В пошуках Немо» в змінній findingNemo. Тепер достатньо звернутися до властивостей цього об'єкта (таким як duration і format), щоб отримати цікаву для нас інформацію.
Крім того, в колекцію легко додати нові фільми:
Тут ми створили новий об'єкт з відомостями про мультфільмі "Тачки" (Cars), а потім додали його в об'єкт movies з ключем "Тачки".
Колекція зростає, і вам може знадобитися простий спосіб переглянути назви всіх своїх фільмів. Для цього підійде Object.keys:
