1. Об'єкти. Як створити об'єкт в JavaScript. Доброго дня! На цьому уроці ми з вами розглянемо об'єкти...
2. Як створити об'єкт.
3. Операції з об'єктами
4. Доступ до об'єкту через квадратні дужки
5. Доступ до властивості об'єкта через змінну
6. Оголошення об'єкта з властивостями
7. Разом
8. завдання

Об'єкти. Як створити об'єкт в JavaScript.

Доброго дня! На цьому уроці ми з вами розглянемо об'єкти в JavaScript. Об'єкти в JavaScript дуже схожі на масиви і нагадують асоціативні масиви.

Асоціативні масиви зберігають дані будь-якого типу і вдають із себе елементи, що складаються з пар ключ-значення.

асоціативні масиви

асоціативний масив - це структура даних, в якій можна зберігати дані у форматі ключ-значення.

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

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

Як створити об'єкт.

Об'єкт в JavaScript можна створити 2 способами:

1. var obj = new Object (); 2. var obj = {}; // порожні фігурні дужки

Як правило використовується 2-й спосіб, тому що він коротше.

Операції з об'єктами

Будь-який об'єкт може містити в собі властивості, які будуть доступні по ключу або через оператор «.»

Давайте для прикладу створимо об'єкт employee, який буде зберігати дані про співробітника:

var emp = {}; // поки порожній

До основних операцій з об'єктами - відносяться створення, отримання та видалення різних властивостей.
Ось приклад як отримати властивість об'єкта:

// при присвоєнні властивості в об'єкті автоматично створюється "ящик" // з ім'ям "name" і в нього записується вміст 'Вася' emp.name = 'Петя'; emp.age = 35; // запишемо ще одна властивість: з ім'ям 'age' і значенням 25

У прикладі ми додали до нашого об'єкту нові властивості, щоб їх отримати теж використовується оператор «.»

alert (emp.name + ':' + emp.age); // "Петя: 35"

Для того щоб видалити властивість використовується оператор delete:

delete emp.age;

В результаті залишиться тільки властивість name:
Для перевірки, чи є в об'єкті властивість з потрібним ключем.
Для цієї мети служить оператор: «in».
Його синтаксис в загальному вигляді: «prop» in obj, причому ім'я властивості - в вигляді рядка, тобто його треба брати в лапки:

if ( "name" in emp) {alert ( "Є така властивість!"); }

Доступ до об'єкту через квадратні дужки

Також існує й альтернативний синтаксис для отримання доступу до властивості, який використовує квадратні дужки об'єкт [ 'властивість'] ось приклад:

var personа = {}; personа [ 'name'] = 'Вася'; // то ж що і personа.name = 'Вася'

Записи personа [ 'name'] і personа.name аналогічні, але квадратні дужки дають можливість використовувати в якості імені властивості будь-який рядок:

var personа = {}; personа [ 'улюблений стиль музики'] = 'Джаз';

Таке привласнення якби ми використовували «точку», призвело б до помилки, оскільки інтерпретатор відразу ж після першого пробілу подумає, що властивість закінчилося:

persona.любімий стиль музики = 'Джаз'; // ??? буде помилка

В обох випадках, ім'я властивості має бути рядком. Якщо використано значення іншого типу - JavaScript призведе його до рядка автоматично.

Доступ до властивості об'єкта через змінну

Квадратні дужки також ще дозволяють звернутися до властивості, ім'я якого міститься в змінної:

var persona = {}; persona.age = 25; var key1 = 'age'; alert (persona [key1]); // виведе persona [ 'age']

У разі, якщо ім'я властивості зберігати в змінної (var key1 = «age»), то до нього можна звернутися через квадратні дужки - person [key].
Слід зазначити, що доступ через точку використовується тоді, коли ім'я властивості відомо заздалегідь, а якщо немає то використовуються квадратні дужки.

Оголошення об'єкта з властивостями

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

var menu = {width: 400, height: 300, title: "My Menu"}; // те ж саме, що: var menu = {}; menu.width = 400; menu.height = 300; menu.title = 'My Menu';

Назви властивостей ви можете перераховувати як в лапках, так і без, оних.
наприклад:

var menu = {width: 400, 'height': 500, "тато мив двері": true};

Як значення ви можете вказати і інший об'єкт:

var emp = {name: "Alex", age: 35, size: {top: 100, middle: 50, bottom: 80}} alert (emp.name) // "Alex" alert (emp.size.top) / / 90

У прикладі значенням властивості size виступає об'єкт {top: 90, middle: 60, bottom: 90}.

Разом

Об'єкти - являють собою асоціативні масиви з розширеними можливостями:

• Доступ до елементів об'єкта здійснюється:
  • Безпосередньо по ключу obj.proper = 5
  • Через змінну, яка містить ключ: var key1 = "prop"; obj [key1] = 5

• Видалення ключів: delete obj1.name.

завдання

перший об'єкт

Міні-завдання на синтаксис об'єктів.

1. Створити порожній об'єкт emp.
2. Додати властивість name зі значенням Петя.
3. Додати властивість surname зі значенням Васін.
4. Поміняти значення name на Андрій.
5. Видалити властивість name з об'єкта.

І на закінчення дивіться відео по об'єктах в JavaScript.

Якщо ви знайшли помилку, будь ласка, виділіть фрагмент тексту і натисніть Ctrl + Enter.

також читайте