Głęboka kopia obiektu w JavaScript przy użyciu structuredClone

Jeśli tu jesteś, założę się, że używałeś sztuczki JSON.parse()+ JSON.stringify()setki razy, aby stworzyć głęboką kopię obiektu w JavaScript. Już tego nie potrzebujesz, tubylec structuredClone()jest tutaj, aby ci pomóc.

Płytka kopia kontra głęboka kopia

Przede wszystkim pamiętajmy, jaka jest różnica między płytką kopią a głęboką kopią:

• Płytka kopia: oznacza, że ​​kopiowany jest tylko pierwszy poziom obiektu . Wspomniane są głębsze poziomy. Możesz to osiągnąć w JavaScript używając operatora Spread ( …) lub używając Object.assign().
• Głęboka kopia: oznacza, że ​​kopiowane są wszystkie poziomy obiektu . Jest to wierna kopia obiektu. Możesz to zrobić za pomocą JSON.parse()+ JSON.stringify(), a teraz możesz to również zrobić za pomocą natywnego structuredClone().

Głębokie kopiowanie przy użyciu structuredClone

Metoda globalna structuredClone()tworzy głęboką kopię danej wartości przy użyciu ustrukturyzowanego algorytmu klonowania .

Jak widać w tym fragmencie kodu:

• Po zaktualizowaniu właściwości na pierwszym poziomie sklonowanych obiektów oryginalna właściwość nie jest aktualizowana .
• Po zaktualizowaniu właściwości na głębszym poziomie pierwotna właściwość nie jest aktualizowana . Dzieje się tak, ponieważ w tym przypadku kopiowane są również głębsze poziomy.

Szczęśliwego kodowania!