Klonowanie strukturalne i URLSearchParams
Głębokie kopiowanie danych za pomocą structuredClone (z zachowaniem Dates/Maps/Sets) oraz parsowanie i tworzenie parametrów zapytań za pomocą URLSearchParams
Klonowanie strukturalne i URLSearchParams to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 2 z 3. 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 3 lekcji w sumie.
Po co te narzędzia?
Cel: bezpiecznie kopiować i serializować dane URL.
- structuredClone tworzy głębokie kopie danych
- Zachowuje Date/Map/Set
- URLSearchParams analizuje i tworzy zapytania
- Wzorce przyjazne dla początkujących
Głęboka kopia zachowująca typy
structuredClone tworzy głęboką kopię i zachowuje obiekty Date bez zmian.
// Deep copy with structuredClone (Node 17+/modern browsers)
const original = { n: 1, list: [1, 2], when: new Date("2024-01-01") };
const copy = structuredClone(original);
copy.n = 2;
copy.list.push(3);
console.log("original.n:", original.n);
console.log("copy.n:", copy.n);
console.log("dates equal type?", copy.when instanceof Date);
JSON traci informacje o typach
JSON zawiera wyłącznie dane; Date/Map/Set są zamieniane na zwykłe wartości lub tracone.
// JSON round-trip loses special types (e.g., Date becomes string)
const obj = { when: new Date("2024-01-01"), ok: true };
const round = JSON.parse(JSON.stringify(obj));
console.log("after JSON:", typeof round.when, round.when);
console.log("is Date?", round.when instanceof Date);
Map/Set są zachowywane
Map i Set są prawidłowo zachowywane podczas klonowania za pomocą structuredClone.
// structuredClone preserves Map and Set
const m1 = new Map([["a", 1]]);
const s1 = new Set([1, 2]);
const cloned = structuredClone({ m1, s1 });
console.log("map has a?", cloned.m1.has("a"));
console.log("set has 2?", cloned.s1.has(2));
Analizowanie ciągów zapytań
URLSearchParams odczytuje ciągi zapytań; w razie potrzeby można używać get, getAll, has oraz iterowania.
// Parse a query string with URLSearchParams
const qs = "q=shoes&color=red&color=blue&page=2";
const params = new URLSearchParams(qs);
console.log("q:", params.get("q"));
console.log("first color:", params.get("color"));
console.log("all colors:", params.getAll("color"));
console.log("page:", params.get("page"));
Tworzenie ciągów zapytań
Należy użyć set/append, a następnie toString(), aby utworzyć bezpieczne ciągi zapytań.
// Build a query string from key/value pairs
const build = new URLSearchParams();
build.set("q", "shoes");
build.append("color", "red");
build.append("color", "blue");
build.set("page", String(2));
console.log("query:", build.toString());
// Example full URL
const url = "https://example.com/search?" + build.toString();
console.log("url:", url);
Quiz: structuredClone kontra JSON
Szybkie sprawdzenie: głęboka kopia zachowująca typy.
Podsumowanie
Podsumowanie: należy używać structuredClone do tworzenia głębokich kopii zachowujących typy takie jak Date/Map/Set. URLSearchParams służy do bezpiecznego analizowania i tworzenia ciągów zapytań.
Często zadawane pytania
Czy lekcja „Klonowanie strukturalne i URLSearchParams” jest bezpłatna?
Tak — pełny tekst „Klonowanie strukturalne i URLSearchParams” 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 3 lekcji w sumie.
Co nauczysz się w „Klonowanie strukturalne i URLSearchParams”?
Głębokie kopiowanie danych za pomocą structuredClone (z zachowaniem Dates/Maps/Sets) oraz parsowanie i tworzenie parametrów zapytań za pomocą URLSearchParams Ć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 3.
Ile czasu zajmuje lekcja „Klonowanie strukturalne i URLSearchParams”?
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 JSON.parse i JSON.stringify
- Klonowanie strukturalne i URLSearchParams
- Strategie bezpiecznego parsowania JSON