Destrukturyzacja obiektów i spread
Proszę wyodrębniać właściwości obiektów za pomocą destrukturyzacji, klonować i scalać obiekty operatorem spread oraz używać parametrów rest w sygnaturach funkcji.
Destrukturyzacja obiektów i spread to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 2 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Czym jest destrukturyzacja?
Destrukturyzacja wyodrębnia wartości z obiektów i tablic do nazwanych zmiennych. Jest skróconym zapisem wielu instrukcji dostępu do właściwości — sprawia, że kod jest zwięzły i jasno komunikuje, z których właściwości korzysta.
Podstawy destrukturyzacji obiektów
Użyj nawiasów klamrowych po lewej stronie przypisania, aby wyodrębnić nazwane właściwości.
const user = { name: 'Alice', age: 30, role: 'admin' };
// Without destructuring:
const name = user.name;
const age = user.age;
// With destructuring:
const { name, age, role } = user;
console.log(name); // 'Alice'
console.log(age); // 30Zmiana nazw zmiennych podczas destrukturyzacji
Użyj składni property: newName, aby zmienić nazwę właściwości podczas destrukturyzacji. Jest to przydatne, gdy nazwa właściwości koliduje z istniejącą zmienną lub nie jest wystarczająco opisowa.
const { name: userName, age: userAge } = user;
console.log(userName); // 'Alice'Wartości domyślne podczas destrukturyzacji
Jeśli właściwość ma wartość undefined, używana jest wartość domyślna. Można połączyć tę składnię ze zmianą nazwy.
const { name, role = 'viewer', theme = 'light' } = user;
// role is 'admin' (from object)
// theme is 'light' (default — not in object)Zagnieżdżona destrukturyzacja obiektów
Destrukturyzuj zagnieżdżone obiekty, podając zagnieżdżone wzorce.
const order = {
id: 42,
customer: { name: 'Bob', email: 'bob@example.com' },
total: 99.99
};
const { id, customer: { name, email }, total } = order;
console.log(name); // 'Bob'Destrukturyzacja tablic
Użyj nawiasów kwadratowych, aby destrukturyzować tablice według pozycji. Pomijaj elementy za pomocą przecinków.
const [first, second, , fourth] = [10, 20, 30, 40];
console.log(first); // 10
console.log(second); // 20
console.log(fourth); // 40
// Swap variables:
let a = 1, b = 2;
[a, b] = [b, a];
console.log(a, b); // 2 1Destrukturyzacja parametrów funkcji
Destrukturyzuj wartości bezpośrednio w parametrach funkcji, aby tworzyć czytelniejsze API i kod, który dokumentuje się sam. Jest to bardzo częste w funkcjach komponentów React.
function greet({ name, greeting = 'Hello' }) {
return `${greeting}, ${name}!`;
}
greet({ name: 'Alice' }); // 'Hello, Alice!'
greet({ name: 'Bob', greeting: 'Hi' }); // 'Hi, Bob!'Operator spread dla obiektów
Operator spread { ...obj } tworzy płytką kopię obiektu i może służyć do scalania obiektów. W przypadku kolizji kluczy późniejsze klucze zastępują wcześniejsze.
const defaults = { theme: 'light', lang: 'en', debug: false };
const userPrefs = { theme: 'dark', lang: 'fr' };
const settings = { ...defaults, ...userPrefs };
// { theme: 'dark', lang: 'fr', debug: false }Operator spread dla tablic
[...arr] tworzy płytką kopię tablicy. Używaj spread do łączenia tablic oraz niemutowalnego dodawania elementów na początku lub na końcu.
const base = [1, 2, 3];
const extended = [...base, 4, 5]; // [1, 2, 3, 4, 5]
const prepended = [0, ...base]; // [0, 1, 2, 3]
const combined = [...base, ...extended]; // [1, 2, 3, 1, 2, 3, 4, 5]Składnia rest podczas destrukturyzacji
Składnia rest gromadzi pozostałe właściwości lub elementy w nowym obiekcie albo tablicy. Rest musi być ostatnim wzorcem.
const { name, ...rest } = { name: 'Alice', age: 30, role: 'admin' };
console.log(name); // 'Alice'
console.log(rest); // { age: 30, role: 'admin' }
const [head, ...tail] = [1, 2, 3, 4];
console.log(head); // 1
console.log(tail); // [2, 3, 4]Kopia płytka a kopia głęboka
Zarówno spread, jak i destrukturyzacja tworzą płytkie kopie. Zagnieżdżone obiekty i tablice nadal pozostają współdzielonymi referencjami. Głęboką kopię można utworzyć za pomocą structuredClone(obj) (nowoczesne rozwiązanie) lub JSON.parse(JSON.stringify(obj)) (starsze rozwiązanie).
const a = { x: 1, nested: { y: 2 } };
const b = { ...a };
b.x = 99; // a.x is still 1 (shallow copy OK)
b.nested.y = 99; // a.nested.y is now 99! (reference shared)Szybkie sprawdzenie
Co robi const { a, ...rest } = obj?
Podsumowanie: destrukturyzacja i spread
Destrukturyzacja obiektów wyodrębnia nazwane właściwości. Destrukturyzacja tablic wyodrębnia elementy według pozycji. Zmieniaj nazwy za pomocą dwukropka, a wartości domyślne ustawiaj za pomocą =. Używaj zagnieżdżonych wzorców w przypadku głęboko zagnieżdżonych obiektów. Spread tworzy płytkie kopie i scala obiekty lub tablice. Rest gromadzi pozostałe właściwości lub elementy.
Często zadawane pytania
Czy lekcja „Destrukturyzacja obiektów i spread” jest bezpłatna?
Tak — pełny tekst „Destrukturyzacja obiektów i spread” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Destrukturyzacja obiektów i spread”?
Proszę wyodrębniać właściwości obiektów za pomocą destrukturyzacji, klonować i scalać obiekty operatorem spread oraz używać parametrów rest w sygnaturach funkcji. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?
Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 2 z 4.
Ile czasu zajmuje lekcja „Destrukturyzacja obiektów i spread”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?
Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Metody tablic: map, filter, reduce, find
- Destrukturyzacja obiektów i spread
- Literały szablonowe i optional chaining
- Moduły: import i export