Модуль 3 · Урок 2 із 410/32 у курсі~10 min

Модульні уроки (2/4)

Об'єкти: карта ключ-значення

Об’єкт у JS — це невпорядкована колекція пар ключ → значення. Ключі – це рядки (або Symbol), значення – будь-що: числа, рядки, масиви, інші об'єкти, функції. Це найбільш використовувана структура даних у мова: кожен "запис" у вашому домені зазвичай буде об'єктом.

const utente = {
  nome: 'Anna',
  eta: 28,
  attivo: true,
  ruoli: ['admin', 'editor'],
};

Властивості читання: крапка чи дужка

Є два еквівалентних позначення:

utente.nome; // 'Anna'    (dot — the normal form)
utente['nome']; // 'Anna'    (bracket — equivalent)

// Brackets are MANDATORY when:
// 1) the key is not a valid identifier
const tag = { 'codice-fiscale': 'ABC123' };
tag['codice-fiscale']; // OK
// tag.codice-fiscale;      // syntax error

// 2) the key is computed (variable/expression)
const campo = 'eta';
utente[campo]; // 28

Відсутня властивість повертає undefined без помилок:

utente.telefono; // undefined

Додавання, зміна, видалення

const u = { nome: 'Anna' };
u.eta = 28; // adds
u.nome = 'Anna B.'; // modifies
delete u.eta; // removes the property

delete є ключовим словом. Це виявиться рідкісним випадком використання: більшість коли ви захочете створити новий об’єкт без цього ключа (ми побачимо це з поширенням).

Скорочення: ключі, названі як змінна

Якщо ім’я ключа збігається з ім’ям змінної, ви можете пропустити дублювання:

const nome = 'Anna';
const eta = 28;

const u1 = { nome: nome, eta: eta }; // explicit form
const u2 = { nome, eta }; // shorthand, equivalent

Перевірка наявності майна

Три варіанти в порядку переваги:

'nome' in utente; // true   ← in operator
utente.nome !== undefined; // true   ← works almost always
Object.hasOwn(utente, 'nome'); // true   ← modern, safe

Спробуйте

вправи#js.m3.l2.e1

Спроби: 0Завантаження…

Створіть об’єкт user = { name: 'Sara', age: 22 }, потім додайте властивість 'active' зі значенням true і поверніть об'єкт як останній вираз.

Завантаження редактора…

Показати підказку

Ви можете додавати властивості постфактум за допомогою крапкової нотації.

Рішення доступне після 3 спроб

Повторна вправа

вправи#js.m3.l2.e2