Podstawy•LEKCJA 19 / 32

Destrukturyzacja obiektów

Kurs JavaScript · Wyjaśnienie, przykłady, oczekiwany wynik i ćwiczenie.

Możesz pobrać wybrane pola obiektu bez wielokrotnego pisania user.name.

Cel lekcji

Poznać zagadnienie „Destrukturyzacja obiektów”, zrozumieć przykład i umieć zastosować podobny zapis we własnym programie.

Wyjaśnienie krok po kroku

Nazwy w nawiasach klamrowych muszą odpowiadać właściwościom obiektu.

Najpierw przeanalizuj kod bez uruchamiania. Zwróć uwagę, jakie dane wykorzystuje program, co z nimi robi i skąd bierze się wynik pokazany pod przykładem.

Praktyczny przykład

Gdzie zobaczysz efekt: Konsola przeglądarki lub Node.js

const user = { name: "Ada", age: 21 };
const { name, age } = user;
console.log(name, age);

Przeczytaj kod linijka po linijce

  1. const user = { name: "Ada", age: 21 };Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
  2. const { name, age } = user;Tworzymy lub aktualizujemy zmienną, pole albo przypisanie.
  3. console.log(name, age);Wyświetlamy wartość, aby sprawdzić efekt działania programu.
Oczekiwany wynik / efektpo uruchomieniu przykładu
Ada 21

Jak utrwalić tę umiejętność?

Przepisz kod samodzielnie. Następnie zmień jedną wartość lub jedną instrukcję i spróbuj przewidzieć efekt. Dopiero potem uruchom zmienioną wersję. Jeśli wynik jest inny niż oczekiwany, porównaj kolejne linie.

Spróbuj samodzielnie

Pobierz pole city z obiektu opisującego miasto.

To już koniec tej lekcji.

Jeśli rozumiesz przykład, oznacz lekcję jako ukończoną i przejdź dalej.