Obiekty w JavaScript: tworzenie, odczyt, modyfikacja i iteracja

W poprzednim rozdziale funkcje pozwoliły nam grupować instrukcje. Obiekty grupują dane: użytkownik, produkt czy odpowiedź API to obiekty. To struktura, z którą będziesz pracować w JavaScripcie najczęściej, a ten rozdział omawia ją w całości, od utworzenia po kopiowanie.

Czym jest obiekt w JavaScripcie?

Obiekt to zbiór właściwości, z których każda składa się z klucza (nazwy) i wartości. Wartość może być dowolnego typu: łańcuchem znaków, liczbą, wartością logiczną, tablicą, innym obiektem albo funkcją. Jeśli znasz słowniki z Pythona lub tablice asocjacyjne z PHP, zasada jest ta sama.

const personne = {
  nom: 'Jean',
  age: 30,
  ville: 'Lille',
  actif: true,
  langues: ['français', 'anglais'],
};

Nawiasy klamrowe wyznaczają obiekt, każdą właściwość zapisujemy jako clé: valeur, a właściwości oddzielamy przecinkami. Przecinek po ostatniej właściwości jest dozwolony i ułatwia dopisywanie kolejnych.

Tworzenie obiektu

Zapis literałowy

Tak wygląda przykład powyżej i w zdecydowanej większości przypadków to właśnie ta forma jest właściwa. Pusty obiekt zapisujemy jako {} i wypełniamy go później:

const telephone = {};
telephone.marque = 'Sony';
telephone.prix = 400;
telephone.stock = 200;

console.log(telephone); // { marque: 'Sony', prix: 400, stock: 200 }

Funkcja konstruktora

Gdy trzeba utworzyć kilka obiektów o tym samym kształcie, produkuje je funkcja wywołana z new. W jej wnętrzu this wskazuje na powstający właśnie obiekt.

function Telephone(marque, prix, stock) {
  this.marque = marque;
  this.prix = prix;
  this.stock = stock;
  this.enStock = function () {
    return this.stock > 0;
  };
}

const motoZ = new Telephone('Motorola', 400, 200);
const miMax = new Telephone('Xiaomi', 200, 0);

console.log(motoZ.enStock()); // true
console.log(miMax.enStock()); // false

Ten zapis to przodek klas, które poznasz później: class Telephone { constructor(marque, prix, stock) { … } } robi to samo w czytelniejszej składni. Funkcje konstruktora wciąż spotkasz w istniejącym kodzie.

Pusty obiekt tworzy również new Object(), ale nie daje nic ponad {}: dziś się tego nie stosuje.

Odczyt właściwości

Dwie składnie, w prostym przypadku równoważne:

console.log(personne.nom);     // 'Jean'   : zapis z kropką
console.log(personne['nom']);  // 'Jean'   : zapis z nawiasami

Nawiasy kwadratowe stają się niezbędne w dwóch sytuacjach: gdy klucz siedzi w zmiennej i gdy zawiera znaki, których nie da się zapisać po kropce.

const cle = 'age';
console.log(personne[cle]);            // 30 : klucz pochodzi ze zmiennej

const fiche = { 'prénom complet': 'Jean Dupont' };
console.log(fiche['prénom complet']);  // 'Jean Dupont' : spacja w kluczu

Odczyt nieistniejącej właściwości nie kończy się błędem: wynikiem jest undefined.

console.log(personne.pays);   // undefined

Natomiast odczyt właściwości z brakującej właściwości wywala program: personne.adresse.ville zgłasza „Cannot read properties of undefined”. Opcjonalne łańcuchowanie ?. chroni przed tym błędem:

console.log(personne.adresse?.ville);   // undefined, bez błędu

Zmiana i dodawanie

To samo przypisanie zmienia istniejącą właściwość albo tworzy nową:

personne.age = 31;            // zmiana
personne.pays = 'France';     // dodanie: tej właściwości nie było
personne['ville'] = 'Lyon';   // zmiana, zapis z nawiasami

console.log(personne.age, personne.pays, personne.ville);   // 31 'France' 'Lyon'

Uwaga na const: zabrania podstawienia pod zmienną personne innego obiektu, ale nie zabrania modyfikowania samego obiektu. Tak ma być i tak jest wygodnie. Żeby zablokować wszelkie zmiany, Object.freeze(personne) zamraża obiekt (przypisania są wtedy pomijane poza trybem strict, a w trybie strict zgłaszają błąd).

Usuwanie właściwości i sprawdzanie, czy istnieje

delete personne.pays;

console.log(personne.pays);                 // undefined
console.log('pays' in personne);            // false : klucza już nie ma
console.log(Object.hasOwn(personne, 'nom')); // true  : klucz istnieje, własny dla obiektu

delete usuwa właściwość. Obecność klucza lepiej sprawdzać przez in albo Object.hasOwn() niż testem na undefined: właściwość może istnieć i mieć wartość undefined.

Metody: funkcje wewnątrz obiektu

Właściwość, której wartością jest funkcja, nazywamy metodą. W metodzie this wskazuje na obiekt, który ją zawiera.

const personne = {
  nom: 'Ana',
  naissance: 1996,
  saluer() {
    return `Salut, je suis ${this.nom}`;
  },
  age() {
    return 2026 - this.naissance;
  },
};

console.log(personne.saluer()); // 'Salut, je suis Ana'
console.log(personne.age());    // 30

Przechodzenie po obiekcie

Trzy metody statyczne zwracają zawartość obiektu w postaci tablicy, dzięki czemu można wykorzystać wszystko, co już wiesz o pętlach:

const produit = { nom: 'Clavier', prix: 49.9, stock: 12 };

console.log(Object.keys(produit));    // ['nom', 'prix', 'stock']
console.log(Object.values(produit));  // ['Clavier', 49.9, 12]
console.log(Object.entries(produit)); // [['nom', 'Clavier'], ['prix', 49.9], ['stock', 12]]

for (const [cle, valeur] of Object.entries(produit)) {
  console.log(`${cle} : ${valeur}`);
}
// nom : Clavier
// prix : 49.9
// stock : 12

console.log(Object.keys(produit).length);   // 3 : „liczba właściwości”

Istnieje też pętla for…in, która przechodzi wprost po kluczach. Wyciąga jednak także właściwości odziedziczone z prototypu, co zaskakuje przy obiektach pochodzących z bibliotek: domyślnym wyborem jest Object.keys() z for…of.

for (const cle in produit) {
  console.log(cle);   // nom, prix, stock
}

Operację odwrotną, czyli zbudowanie obiektu z par, wykonuje Object.fromEntries():

Object.fromEntries([['a', 1], ['b', 2]]);   // { a: 1, b: 2 }

Obiekty zagnieżdżone i tablice obiektów

Wartością może być obiekt — tak właśnie odwzorowuje się strukturę danych. A tablica obiektów to najczęstsza postać danych pobranych z API.

const commande = {
  numero: 1042,
  client: {
    nom: 'Jean',
    adresse: { ville: 'Lille', codePostal: '59000' },
  },
  lignes: [
    { produit: 'Clavier', prix: 49.9, quantite: 1 },
    { produit: 'Souris', prix: 19.5, quantite: 2 },
  ],
};

console.log(commande.client.adresse.ville);   // 'Lille'
console.log(commande.lignes[1].produit);      // 'Souris'

let total = 0;
for (const ligne of commande.lignes) {
  total += ligne.prix * ligne.quantite;
}
console.log(total);   // 88.9

Dane z serwera przychodzą jako tekst JSON, którego składnia jest składnią literałów obiektowych: JSON.parse(texte) zamienia go w obiekt, JSON.stringify(objet) robi rzecz odwrotną.

Kopiowanie obiektu bez niespodzianek

Przypisanie obiektu do innej zmiennej nie kopiuje go: obie zmienne wskazują na ten sam obiekt w pamięci.

const original = { nom: 'Jean', adresse: { ville: 'Paris' } };

const alias = original;
alias.nom = 'Paul';
console.log(original.nom);   // 'Paul' : to nie była kopia

Operator spread kopiuje pierwszy poziom, ale obiekty zagnieżdżone pozostają wspólne:

const copie = { ...original };
copie.nom = 'Marie';
copie.adresse.ville = 'Lyon';

console.log(original.nom);            // 'Paul'  : pierwszy poziom faktycznie skopiowany
console.log(original.adresse.ville);  // 'Lyon'  : obiekt zagnieżdżony jest wspólny

Do pełnej kopii, niezależnej na każdym poziomie, służy structuredClone():

const clone = structuredClone(original);
clone.adresse.ville = 'Nice';

console.log(original.adresse.ville);  // 'Lyon' : oryginał się nie zmienił

structuredClone nie kopiuje metod: stosuj go do obiektów z danymi. Z kolei Object.assign(cible, source) scala obiekty, z taką samą płytką kopią jak spread.

Ściągawka

W stronę programowania obiektowego

Gdy wiele obiektów ma ten sam kształt i te same metody, opisujemy je raz w klasie i tworzymy jej instancje przez new. To naturalny ciąg dalszy tego rozdziału: Klasy w JavaScripcie oraz Wprowadzenie do klas i obiektów (ES6). Na razie następny rozdział przedstawia obiekt wbudowany w język, Math, i jego metody.