Полное руководство по клонированию объектов JavaScript

Создание независимой копии JavaScript-объекта

Создание независимой копии JavaScript-объекта требует использования правильных техник глубокого копирования, чтобы убедиться, что изменения в клонированном объекте не влияют на оригинал. Для пользовательских объектов, созданных с помощью литералов, современный подход заключается в использовании метода structuredClone(), который создает настоящее глубокое копирование, корректно обрабатывая вложенные объекты, циклические ссылки и специальные типы JavaScript.

Содержание

• Понимание поверхностного и глубокого копирования
• Современное решение: structuredClone()
• Альтернативные методы глубокого копирования
• Методы поверхностного копирования
• Практические примеры и лучшие практики
• Вопросы производительности

Понимание поверхностного и глубокого копирования

Фундаментальное различие между поверхностным и глубоким копированием заключается в том, как они обрабатывают вложенные объекты и ссылки.

Поверхностное копирование создает новый объект и копирует все перечисляемые собственные свойства из исходного объекта в новый объект. Однако для вложенных объектов или массивов оно копирует только ссылки, а не фактические значения. Это означает, что при изменении вложенного свойства в скопированном объекте это затрагивает и исходный объект источник.

Глубокое копирование, с другой стороны, рекурсивно клонирует все вложенные объекты и массивы, создавая полностью независимые копии на каждом уровне. Это гарантирует, что изменения в любой части клонированного объекта не повлияют на оригинал источник.

Ключевое замечание: При работе с пользовательскими объектами, созданными с помощью литералов и содержащими вложенные свойства, всегда требуется глубокое копирование для достижения истинной независимости между исходным и клонированным объектами.

Современное решение: structuredClone()

Функция structuredClone(), представленная в 2022 году, является современным и рекомендуемым способом создания глубоких копий JavaScript-объектов. Этот метод обеспечивает настоящее глубокое копирование, автоматически обрабатывая сложные сценарии, такие как циклические ссылки и специальные типы JavaScript.

const original = {
  name: "John",
  age: 30,
  address: {
    city: "New York",
    zip: "10001"
  },
  hobbies: ["reading", "coding"]
};

// Создаем глубокую копию с помощью structuredClone()
const deepCopy = structuredClone(original);

// Изменяем копию
deepCopy.address.city = "Boston";
deepCopy.hobbies.push("swimming");

// Исходный объект остается без изменений
console.log(original.address.city); // "New York"
console.log(original.hobbies); // ["reading", "coding"]

Ключевые преимущества structuredClone():

• Автоматическая обработка циклических ссылок: В отличие от методов JSON, может обрабатывать объекты, ссылающиеся на самих себя
• Сохранение специальных типов: Поддерживает Date, Map, Set, RegExp и другие встроенные типы
• Передаваемые объекты: Поддерживает клонирование объектов, которые могут быть переданы между разными контекстами, такими как Web Workers источник
• Нативная реализация: Не требуются внешние библиотеки

// Пример с циклической ссылкой
const circularObj = {};
circularObj.self = circularObj;

// Это работает с structuredClone()
const clone = structuredClone(circularObj);
console.log(clone.self === clone); // true (сохраняет циклическую ссылку)

// Это не сработало бы с методами JSON
try {
  JSON.parse(JSON.stringify(circularObj)); // Выбрасывает TypeError
} catch (error) {
  console.log("Ошибка метода JSON:", error.message);
}

Альтернативные методы глубокого копирования

Хотя structuredClone() рекомендуется, существуют и другие методы глубокого копирования, с которыми вы можете столкнуться или которые могут понадобиться в определенных сценариях.

JSON.stringify() + JSON.parse()

Это распространенный обходной путь для глубокого копирования, но у него есть значительные ограничения:

const original = { name: "John", details: { age: 30 } };
const deepCopy = JSON.parse(JSON.stringify(original));

Ограничения:

• ❌ Не работает с циклическими ссылками (выбрасывает TypeError)
• ❌ Теряет специальные типы, такие как Date, Map, Set, RegExp (преобразует их в обычные объекты)
• ❌ Игнорирует значения undefined, функции и символы
• ❌ Может быть значительно медленнее, чем structuredClone() источник

Lodash cloneDeep()

Для проектов, уже использующих Lodash, метод cloneDeep() предоставляет надежное решение для глубокого копирования:

const _ = require('lodash');
const deepCopy = _.cloneDeep(original);

Преимущества:

• ✅ Обрабатывает циклические ссылки
• ✅ Сохраняет специальные типы и функции
• ✅ Хорошо протестирован и широко используется
• ✅ Работает во всех JavaScript-окружениях

Недостатки:

• ❌ Добавляет внешнюю зависимость в ваш проект
• ❌ Большой размер бандла по сравнению с нативными решениями

Пользовательская функция глубокого копирования

Для конкретных случаев использования вы можете реализовать пользовательскую функцию глубокого копирования:

function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') return obj;
  if (obj instanceof Date) return new Date(obj);
  if (obj instanceof Array) return obj.map(item => deepClone(item));
  
  const cloned = {};
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      cloned[key] = deepClone(obj[key]);
    }
  }
  return cloned;
}

Методы поверхностного копирования

Для полноты картины, вот распространенные методы поверхностного копирования, хотя они не подходят для создания по-настоящему независимых копий, когда задействованы вложенные объекты:

Оператор spread

const shallowCopy = { ...original };

Object.assign()

const shallowCopy = Object.assign({}, original);

Методы массивов (для массивов)

const shallowCopy = original.slice();
const shallowCopy2 = [...original];

Важно: Эти методы создают только поверхностные копии. Если ваш объект содержит вложенные объекты или массивы, изменение этих вложенных свойств в копии затронет и исходный объект источник.

Практические примеры и лучшие практики

Простое глубокое копирование объекта

const user = {
  id: 1,
  profile: {
    name: "Alice",
    preferences: {
      theme: "dark",
      notifications: true
    }
  },
  settings: {
    language: "en-US",
    timezone: "UTC"
  }
};

// Лучшая практика: Используем structuredClone()
const userClone = structuredClone(user);

// Теперь можно безопасно изменять клон
userClone.profile.preferences.theme = "light";
userClone.settings.language = "es-ES";

// Исходный объект остается нетронутым
console.log(user.profile.preferences.theme); // "dark"
console.log(user.settings.language); // "en-US"

Работа со сложными объектами

const complexObj = {
  date: new Date(),
  map: new Map([['key', 'value']]),
  set: new Set([1, 2, 3]),
  regex: /test/g,
  circular: null
};

// Создаем циклическую ссылку
complexObj.circular = complexObj;

// structuredClone корректно обрабатывает все это
const clone = structuredClone(complexObj);

console.log(clone.date instanceof Date); // true
console.log(clone.map instanceof Map); // true
console.log(clone.set instanceof Set); // true
console.log(clone.regex instanceof RegExp); // true
console.log(clone.circular === clone); // true (циклическая ссылка сохранена)

Сравнение производительности

Вот быстрое сравнение производительности для разных методов глубокого копирования:

Вопросы производительности

При работе с большими или глубоко вложенными объектами производительность становится важным фактором:

• structuredClone() обычно является самым быстрым нативным методом для глубокого копирования
• Для очень больших объектов подумайте, действительно ли вам нужно полное глубокое копирование или будет достаточно выборочного копирования
• Метод structuredClone() оптимизирован JavaScript-движками и обычно превосходит JSON-подходы на 10-20% источник

Источники

1. Глубокое копирование - MDN Web Docs
2. Глубокое копирование vs поверхностное копирование в JavaScript - Mastering JS
3. Метод Window: structuredClone() - Web APIs | MDN
4. 3 способа копирования объектов в JavaScript, поверхностное vs глубокое копирование - JavaScript Tutorial
5. Сила structuredClone(): Всеобъемлющее руководство по глубокому клонированию в JavaScript
6. Глубокое клонирование в JavaScript: Современный способ. Используйте structuredClone
7. Какой самый эффективный способ глубоко клонировать объект в JavaScript? - Stack Overflow
8. Глубокое копирование в JavaScript с использованием structuredClone - web.dev

Заключение

• Используйте structuredClone() для современного глубокого копирования в JavaScript - это наиболее надежное, эффективное и всеобъемлющее решение, представленное в 2022 году
• Избегайте поверхностного копирования, когда вам нужны независимые копии вложенных объектов и массивов
• Рассматривайте альтернативы, такие как cloneDeep() из Lodash, только если вы уже используете Lodash или вам нужна совместимость со старыми браузерами
• Тестируйте свои копии, чтобы убедиться, что они действительно независимы, изменяя вложенные свойства и проверяя, что исходный объект остается без изменений
• Помните о производительности при работе с большими объектами - structuredClone() оптимизирован и обычно является самым быстрым нативным вариантом

Для вашего случая использования с пользовательскими объектами, созданными с помощью литералов, structuredClone() обеспечивает идеальный баланс простоты, надежности и производительности для создания по-настоящему независимых копий объектов.