💡 Освоение дублирования объектов: поверхностное и глубокое копирование в JavaScript 🔍

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

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

let originalObject = { name: 'John', age: 30 };
let shallowCopy = originalObject;
shallowCopy.name = 'Jane';
console.log(originalObject.name); // Output: Jane

В этом коде исходный объект присваивается переменной shallowCopy. Поскольку shallowCopy — это только ссылка на исходный объект, изменение значения shallowCopy.name также меняет значение originalObject.name.

С другой стороны, глубокая копия — это копия объекта, в которой копируется сам объект, а не только ссылка. Это означает, что изменения, внесенные в исходный объект, не будут отражены в глубокой копии. Чтобы создать глубокую копию, вы можете использовать ряд методов, включая преобразование в строку и анализ JSON, Object.assign() или оператор распространения.

Вот пример создания глубокой копии с помощью Object.assign(), этот метод можно использовать для создания глубокой копии объекта в JavaScript. Object.assign() — это метод конструктора объектов, который создает новый объект и копирует свойства одного или нескольких исходных объектов во вновь созданный объект.

let originalObject = { name: 'John', age: 30 };
let deepCopy = Object.assign({}, originalObject);
deepCopy.name = 'Jane';
console.log(originalObject.name); // Output: John

В этом примере Object.assign() принимает два аргумента: пустой объект {} и originalObject. Свойства originalObject копируются во вновь созданный объект, который присваивается переменной deepCopy. Как и в предыдущем примере, изменения, внесенные в deepCopy, не отразятся в originalObject.

Стоит отметить, что Object.assign() — метод поверхностного копирования. Это означает, что если исходный объект содержит вложенные объекты, будут скопированы ссылки на эти вложенные объекты, а не сами объекты. Чтобы создать глубокую копию объекта с вложенными объектами, вам также потребуется выполнить глубокую копию вложенных объектов. В каких случаях вы можете использовать JSON.stringify() и JSON.parse()

Вот пример создания «глубокой» глубокой копии с использованием JSON.stringify() и JSON.parse():

let originalObject = { name: 'John', age: 30 };
let deepCopy = JSON.parse(JSON.stringify(originalObject));
deepCopy.name = 'Jane';
console.log(originalObject.name); // Output: John

В этом коде JSON.stringify() используется для преобразования исходного объекта в строку, которая затем анализируется с использованием JSON.parse() для создания нового объекта, который присваивается переменной deepCopy. Поскольку deepCopy — это новый объект, внесенные в него изменения не отразятся на исходном объекте.

И JSON.parse(), и Object.assign() можно использовать для создания глубокой копии объекта в JavaScript. Однако в определенных ситуациях использование JSON.parse() по сравнению с Object.assign() имеет некоторые преимущества.

Одним из преимуществ использования JSON.parse() является то, что он создает настоящую глубокую копию объекта, а это означает, что все свойства и значения исходного объекта копируются в новый объект, включая любые вложенные объекты. Это особенно полезно при работе со сложными объектами, содержащими несколько вложенных объектов, поскольку гарантирует, что все вложенные объекты также будут скопированы, а любые изменения, внесенные во вложенные объекты в новом объекте, не отразятся в исходном объекте.

Еще одно преимущество JSON.parse() заключается в том, что он обеспечивает согласованный способ создания глубокой копии независимо от типа исходного объекта. Например, если исходный объект является массивом, числом, строкой или логическим значением, JSON.stringify() все еще можно использовать для создания глубокой копии, поскольку он автоматически преобразует объект в строку JSON, а затем можно использовать JSON.parse(). чтобы преобразовать его обратно в объект.

Для сравнения, Object.assign() работает только с объектами, и если исходный объект другого типа, он не будет работать. Кроме того, Object.assign() выполняет только поверхностное копирование, поэтому, если исходный объект содержит вложенные объекты, будут скопированы ссылки на эти вложенные объекты, а не сами объекты.

В заключение, JSON.parse() — это более гибкий и надежный метод создания глубокой копии объекта в JavaScript, особенно при работе со сложными объектами, содержащими несколько вложенных объектов. Хотя Object.assign() может быть полезным инструментом для создания поверхностной копии, важно знать о его ограничениях и выбирать подходящий метод для вашего конкретного случая использования.