Как правильно клонировать объект в JavaScript

Одной из распространенных проблем, с которой сталкиваются программисты на JavaScript, является необходимость клонировать объекты. Рассмотрим пример: есть объект person со свойствами name и age. Задача – создать новый объект clonePerson, который будет содержать те же свойства и значения, что и объект person. Но при этом любые изменения в clonePerson не должны отражаться на объекте person.

let person = {
  name: "Иван",
  age: 30
};

Простое присваивание

Самый очевидный способ – просто присвоить значение объекта person новому объекту clonePerson:

let clonePerson = person;

Однако, это приведет к тому, что clonePerson и person будут ссылаться на одно и то же место в памяти. То есть, изменяя clonePerson, мы будем изменять и person.

Поверхностное копирование

Другой подход – использовать методы Object.assign() или {...person} для создания поверхностной копии:

let clonePerson = Object.assign({}, person);
// или
let clonePerson = {...person};

Теперь clonePerson – это новый объект с теми же свойствами, что и person. Изменения clonePerson не влияют на person. Однако, если свойства объекта также являются объектами, то они будут скопированы по ссылке. Это может привести к неожиданным результатам.

Глубокое копирование

Для глубокого копирования объекта, когда необходимо скопировать все уровни вложенности, можно использовать метод JSON.parse(JSON.stringify(person)):

let clonePerson = JSON.parse(JSON.stringify(person));

Теперь clonePerson – это полностью независимый клон person. Все изменения clonePerson никак не затронут person. Однако, этот метод имеет свои ограничения и не подходит для всех типов данных.

В итоге, выбор подхода зависит от конкретной ситуации и требований к программе.