👩💻 Фишка: structuredClone() — глубокое копирование объектовМетод structuredClone() позволяет создавать глубокие копии объектов, включая вложенные структуры, даты, Map, Set, массивы и даже бинарные данные. Решает проблемы JSON.parse(JSON.stringify()) и ручного копирования.// Базовое копирование объектовconst original = {name: 'Анна',age: 28,hobbies: ['рисование', 'чтение'],address: {city: 'Москва',street: 'Тверская'}};const copy = structuredClone(original);copy.name = 'Мария';copy.hobbies.push('йога');copy.address.city = 'СПб';console.log(original.name); // → "Анна" (не изменилось)console.log(original.hobbies); // → ['рисование', 'чтение'] (не изменилось)console.log(original.address.city); // → "Москва" (не изменилось)// Копирование специальных типовconst complexData = {date: new Date('2024-03-15'),map: new Map([['key1', 'value1'], ['key2', 'value2']]),set: new Set([1, 2, 3, 4]),regex: /test/gi,typedArray: new Uint8Array([1, 2, 3]),error: new Error('Тестовая ошибка')};const complexCopy = structuredClone(complexData);console.log(complexCopy.date instanceof Date); // → true (сохранился тип)console.log(complexCopy.map instanceof Map); // → trueconsole.log(complexCopy.set instanceof Set); // → trueconsole.log(complexCopy.typedArray); // → Uint8Array [1, 2, 3]// Сравнение с JSON.stringifyconst data = {name: 'Иван',birth: new Date(1990, 1, 1),tags: ['js', 'dev']};// JSON метод (не сохраняет типы)const jsonCopy = JSON.parse(JSON.stringify(data));console.log(jsonCopy.birth); // → строка, а не Date!// structuredClone (сохраняет типы)const cloneCopy = structuredClone(data);console.log(cloneCopy.birth instanceof Date); // → true// Копирование циклических ссылок (ошибка!)const circular = { name: 'Объект' };circular.self = circular;// structuredClone(circular); // → TypeError: Maximum call stack size exceeded// Практический пример: история измененийclass HistoryManager {constructor(initialState) {this.history = [structuredClone(initialState)];this.currentIndex = 0;}push(state) { const newHistory = this.history.slice(0, this.currentIndex + 1); newHistory.push(structuredClone(state)); this.history = newHistory; this.currentIndex++;}undo() { if (this.currentIndex > 0) { this.currentIndex--; return structuredClone(this.history[this.currentIndex]); } return null;}redo() { if (this.currentIndex < this.history.length - 1) { this.currentIndex++; return structuredClone(this.history[this.currentIndex]); } return null;}}// Использованиеconst initialState = {user: { name: 'Анна', settings: { theme: 'dark' } },todos: ['купить хлеб']};const history = new HistoryManager(initialState);// Изменяем состояниеconst newState = structuredClone(initialState);newState.todos.push('позвонить маме');history.push(newState);// Возвращаемся назадconst previousState = history.undo();console.log(previousState.todos); // → ['купить хлеб']// Копирование для реактивных системconst appState = {users: [{ id: 1, name: 'Петр', profile: { age: 32 } },{ id: 2, name: 'Елена', profile: { age: 28 } }],meta: {lastUpdate: new Date(),version: '1.0.0'}};// Обновляем без мутацииfunction updateUserName(state, userId, newName) {const newState = structuredClone(state);const user = newState.users.find(u => u.id === userId);if (user) user.name = newName;newState.meta.lastUpdate = new Date();return newState;}const updatedState = updateUserName(appState, 1, 'Петр Петрович');console.log(appState.users[0].name); // → "Петр" (оригинал не изменился)console.log(updatedState.users[0].name); // → "Петр Петрович"📌 Преимущества:— Глубокое копирование любой сложности за одну операцию— Сохранение типов (Date, Map, Set, RegExp и др.)— Корректная обработка бинарных данных— Встроенный метод без зависимостей— Производительнее ручных решений— Идеально для работы с состоянием в React/Vue🧡 Ghostly Frontend | #фишки
