Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js
21.6K subscribers
2.9K photos
208 videos
48 files
5.2K links
Все самое полезное для фронтенда в одном канале.

По рекламе: @proglib_adv

Учиться у нас: https://proglib.io/w/77178ed4

Для обратной связи: @proglibrary_feeedback_bot

РКН: https://gosuslugi.ru/snet/67a5b6884689c2151c820bb4
Download Telegram
🔥 Deep Clone — глубокое копирование объектов

Когда копируете объект через {...obj}, вложенные структуры остаются по ссылке. Меняете копию → меняется оригинал.

🔤 Два способа глубокого копирования:

Ограниченный, но быстрый для простых структур


const clone = (obj) => JSON.parse(JSON.stringify(obj));


Современный универсальный API (Chrome 98+, Firefox 94+, Node 17+, Safari 15+)


const clone = (obj) => structuredClone(obj);


🔤 Пример в React:


const addItem = (newItem) => {
const clonedState = structuredClone(state);
clonedState.items.push(newItem);
setState(clonedState);
};


⚠️ Глубокое копирование — дорогая операция. В React его используют точечно, а не для всего состояния. В крупных приложениях лучше использовать immer или нормализованные структуры данных.

🔤 Когда deep clone действительно нужен:

— Копирование вложенных объектов и графов
— Redux / Zustand, когда нельзя мутировать state
— Снимки данных перед трансформациями
— Копирование конфигураций, где нет функций и методов

🔹 Курс «Алгоритмы и структуры данных»
🔹 Получить консультацию менеджера
🔹 Сайт Академии 🔹 Сайт Proglib

🐸 Библиотека фронтендера

#readme #js #react
Please open Telegram to view this post
VIEW IN TELEGRAM
6👍2🥰2