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

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

const originalObject = { name: 'John', age: 25 };
const clonedObject = JSON.parse(JSON.stringify(originalObject));

Метод 2: использование оператора расширения
Оператор распространения (…) — это удобный и лаконичный способ создания поверхностной копии объекта. Однако, комбинируя его с вложенными операторами распространения, вы можете добиться глубокого клонирования. Вот пример:

const originalObject = { name: 'John', age: 25 };
const clonedObject = { ...originalObject, address: { city: 'New York', country: 'USA' } };

Метод 3: использование библиотеки Lodash
Lodash — это популярная служебная библиотека JavaScript, предоставляющая широкий спектр полезных функций. Одной из его особенностей является метод cloneDeep(), выполняющий глубокое клонирование объекта. Прежде чем использовать его, вам необходимо установить Lodash и импортировать его в свой проект. Вот пример:

const _ = require('lodash');
const originalObject = { name: 'John', age: 25 };
const clonedObject = _.cloneDeep(originalObject);

Метод 4. Использование метода Object.assign()
Метод Object.assign() обычно используется для копирования свойств из одного или нескольких исходных объектов в целевой объект. Передав пустой объект в качестве цели, вы можете добиться глубокого клонирования. Вот пример:

const originalObject = { name: 'John', age: 25 };
const clonedObject = Object.assign({}, originalObject);

Метод 5: использование пользовательской рекурсивной функции
Если вы предпочитаете более ручной подход, вы можете написать собственную рекурсивную функцию для глубокого клонирования объекта. Этот метод перебирает свойства объекта и клонирует их индивидуально, включая вложенные объекты и массивы. Вот пример:

function deepClone(obj) {
  if (typeof obj !== 'object' || obj === null) {
    return obj;
  }
  const clonedObject = Array.isArray(obj) ? [] : {};
  for (let key in obj) {
    if (Object.prototype.hasOwnProperty.call(obj, key)) {
      clonedObject[key] = deepClone(obj[key]);
    }
  }
  return clonedObject;
}
const originalObject = { name: 'John', age: 25 };
const clonedObject = deepClone(originalObject);

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