Rest i spread — idiomatyczne tablice i obiekty
Zbieranie pozostałych wartości i właściwości, klonowanie i scalanie za pomocą spread oraz unikanie ukrytych mutacji dzięki prostym wzorcom
Rest i spread — idiomatyczne tablice i obiekty to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 2. 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 2 lekcji w sumie.
Wprowadzenie
Cel: Używać rest do zbierania nadmiarowych elementów oraz spread do kopiowania i scalania.
- Spread tablic i obiektów
- Rest tablic (początek i koniec)
- Rest obiektów (wykluczanie wybranych kluczy)
- Modyfikowanie a kopiowanie
Podstawy spread tablic
[...arr] kopiuje tablicę, a tablice można łączyć, rozpraszając je w nowej tablicy.
// Array spread creates a shallow copy and merges arrays
const a = [1, 2];
const b = [3, 4];
const clone = [...a];
const merged = [...a, ...b];
console.log("a:", a);
console.log("clone:", clone);
console.log("merged:", merged);
Wzorzec rest tablicy
Element rest (…tail) zbiera pozostałe elementy do nowej tablicy.
// Array rest collects the remaining items
const nums = [10, 20, 30, 40];
const [head, ...tail] = nums;
console.log("head:", head);
console.log("tail:", tail);
Podstawy spread obiektów
Scalanie obiektów zależy od kolejności: późniejsze elementy spread nadpisują wcześniejsze klucze.
// Object spread copies and merges; later keys win
const base = { theme: "light", compact: false };
const override = { compact: true };
const copy = { ...base };
const merged = { ...base, ...override };
console.log("copy:", copy);
console.log("merged:", merged);
Wzorzec rest obiektu
Proszę używać { a, ...rest }, aby pobrać kilka właściwości i zachować pozostałe razem.
// Object rest collects remaining properties
const user = { id: 7, name: "Ayla", role: "admin" };
const { id, ...publicInfo } = user;
console.log("id:", id);
console.log("publicInfo:", publicInfo);
Unikanie modyfikowania przez kopiowanie
Podczas zmieniania wartości należy utworzyć nowy obiekt; jest to czytelniejsze i bezpieczniejsze niż modyfikowanie współdzielonych danych.
// Copy instead of mutating original data
const settings = { sound: true, volume: 5 };
// Mutating version (avoid in shared state)
// settings.volume = 6;
// Non-mutating: create an updated copy
const updated = { ...settings, volume: 6 };
console.log("settings:", settings);
console.log("updated:", updated);
Quiz: rest obiektu
Szybkie sprawdzenie: rest obiektu.
Podsumowanie
Podsumowanie: Spread kopiuje i scala tablice oraz obiekty, a rest zbiera pozostałe elementy. Aby zmiany były jawne, należy preferować kopiowanie zamiast modyfikowania.
Często zadawane pytania
Czy lekcja „Rest i spread — idiomatyczne tablice i obiekty” jest bezpłatna?
Tak — pełny tekst „Rest i spread — idiomatyczne tablice i obiekty” 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 JavaScript Academy, przejdź na CoddyKit PRO. Kurs JavaScript Academy zawiera 2 lekcji w sumie.
Co nauczysz się w „Rest i spread — idiomatyczne tablice i obiekty”?
Zbieranie pozostałych wartości i właściwości, klonowanie i scalanie za pomocą spread oraz unikanie ukrytych mutacji dzięki prostym wzorcom Ćwiczysz JavaScript 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ąć JavaScript Academy?
Nie wymagamy żadnego doświadczenia. JavaScript 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 2.
Ile czasu zajmuje lekcja „Rest i spread — idiomatyczne tablice i obiekty”?
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 JavaScript Academy?
Tak. Każda lekcja JavaScript 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
- Podstawy destrukturyzacji tablic i obiektów
- Rest i spread — idiomatyczne tablice i obiekty