0Pricing
JavaScript Academy · Lekcja

structuredClone do głębokiego kopiowania

Proszę bezpiecznie klonować złożone obiekty.

structuredClone do głębokiego kopiowania to bezpłatna lekcja JavaScript Academy na CoddyKit. To lekcja 4 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 JavaScript Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs JavaScript Academy zawiera 4 lekcji w sumie.

Problem głębokiej kopii

Operator spread i Object.assign tworzą płytkie kopie: zagnieżdżone obiekty są współdzielone przez referencję. Aby w pełni skopiować zagnieżdżoną strukturę, potrzebujesz głębokiej kopii.

structuredClone to wbudowane rozwiązanie.

Dlaczego spread to za mało

Kopia utworzona za pomocą spread współdzieli zagnieżdżone obiekty. Modyfikowanie zagnieżdżonej części kopii wpływa również na oryginał.

const original = { user: { name: 'Ada' } };
const shallow = { ...original };

shallow.user.name = 'Grace';
console.log(original.user.name);

structuredClone na ratunek

structuredClone rekurencyjnie kopiuje całą strukturę. Zmiany w klonie nigdy nie wpływają na oryginał.

const original = { user: { name: 'Ada' } };
const deep = structuredClone(original);

deep.user.name = 'Grace';
console.log(original.user.name);
console.log(deep.user.name);

Niezależne zagnieżdżone obiekty

Po sklonowaniu każdy zagnieżdżony obiekt jest odrębną referencją, więc porównanie tożsamości zwraca false na każdym poziomie.

const original = { a: { b: { c: 1 } } };
const clone = structuredClone(original);

console.log(original === clone);
console.log(original.a === clone.a);
console.log(original.a.b === clone.a.b);

Klonowanie tablic

Tablice, w tym tablice zagnieżdżone, również są klonowane głęboko. Dodanie elementu do zagnieżdżonej tablicy klonu nie zmienia źródła.

const original = { tags: ['a', 'b'], meta: { nested: [1] } };
const clone = structuredClone(original);

clone.meta.nested.push(2);
console.log(original.meta.nested);
console.log(clone.meta.nested);

Obsługa map i zbiorów

W przeciwieństwie do JSON.parse(JSON.stringify(...)), structuredClone obsługuje wiele wbudowanych typów, w tym Map, Set i Date.

const original = { items: new Set([1, 2, 3]), when: new Date(0) };
const clone = structuredClone(original);

clone.items.add(4);
console.log([...original.items]);
console.log([...clone.items]);
console.log(clone.when instanceof Date);

Obsługa cyklicznych referencji

Obiekt odwołujący się do samego siebie powoduje błąd sztuczki z JSON-em, ale można go bez problemu sklonować za pomocą structuredClone.

const node = { name: 'root' };
node.self = node;

const clone = structuredClone(node);
console.log(clone.name);
console.log(clone.self === clone);

Czego nie można sklonować

structuredClone nie może kopiować funkcji ani węzłów DOM — zgłasza błąd DataCloneError. Usuwa również łańcuchy prototypów, zwracając zwykłe obiekty.

try {
  structuredClone({ fn: () => 1 });
} catch (e) {
  console.log(e.name);
}

Prototypy nie są zachowywane

Sklonowana instancja klasy staje się zwykłym obiektem: dane są kopiowane, ale metody i prototyp zostają utracone.

class Point {
  constructor(x) { this.x = x; }
  show() { return this.x; }
}
const p = new Point(5);
const clone = structuredClone(p);

console.log(clone.x);
console.log(clone instanceof Point);

structuredClone a sztuczka z JSON-em

Stara metoda JSON.parse(JSON.stringify(x)) gubi wartości undefined, zamienia daty na ciągi znaków i nie radzi sobie z cyklami. structuredClone eliminuje te problemy w przypadku danych możliwych do serializacji.

const data = { when: new Date(0), missing: undefined, n: 5 };
const viaJson = JSON.parse(JSON.stringify(data));
const viaClone = structuredClone(data);

console.log(typeof viaJson.when);
console.log(viaClone.when instanceof Date);

Dlaczego to ma znaczenie

structuredClone zapewnia niezawodną, wbudowaną głęboką kopię zwykłych danych, zastępując podatne na błędy kopie tworzone ręcznie. Używaj go, gdy potrzebujesz w pełni niezależnej kopii zagnieżdżonego stanu, pamiętając, że usuwa funkcje i prototypy.

const state = { list: [{ id: 1 }], settings: { theme: 'dark' } };
const snapshot = structuredClone(state);
snapshot.list[0].id = 99;
console.log(state.list[0].id);
console.log(snapshot.list[0].id);

Szybkie sprawdzenie

Dlaczego w przypadku zagnieżdżonych danych należy użyć structuredClone zamiast operatora spread?

Podsumowanie: structuredClone

Dowiedziałeś się, jak niezawodnie tworzyć głębokie kopie:

  • Spread tworzy kopię płytką, a structuredClone kopiuje dane głęboko.
  • Obsługuje Map, Set, Date i cykliczne referencje.
  • Nie może klonować funkcji ani węzłów DOM i usuwa prototypy.
  • Jest bezpieczniejszym zamiennikiem sztuczki JSON.parse(JSON.stringify()).

Często zadawane pytania

Czy lekcja „structuredClone do głębokiego kopiowania” jest bezpłatna?

Tak — pełny tekst „structuredClone do głębokiego kopiowania” 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 4 lekcji w sumie.

Co nauczysz się w „structuredClone do głębokiego kopiowania”?

Proszę bezpiecznie klonować złożone obiekty. Ć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 4 z 4.

Ile czasu zajmuje lekcja „structuredClone do głębokiego kopiowania”?

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

  1. Object.freeze i seal
  2. Płytkie a głębokie zamrażanie
  3. Wzorce niezmiennych aktualizacji
  4. structuredClone do głębokiego kopiowania
← Powrót do JavaScript Academy