35. Клонирование объектов (shallow vs deep)

JavaScript: Мозги. Урок: Клонирование объектов (shallow vs deep)

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

Что такое клонирование?

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

Поверхностное клонирование (Shallow Copy)

Поверхностное клонирование создает новый объект, копируя значения свойств из исходного объекта. Если свойство является примитивным типом (число, строка, boolean), то копируется его значение. Если же свойство является объектом (массив, другой объект), то копируется ссылка на этот объект.

Пример:

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York'
  }
};

// Поверхностное клонирование с использованием оператора spread
const shallowCopy = { ...originalObject };

// Изменяем свойство в клоне
shallowCopy.name = 'Jane';
shallowCopy.address.city = 'Los Angeles';

console.log(originalObject.name); // John
console.log(originalObject.address.city); // Los Angeles - Вот тут проблема!
console.log(shallowCopy.name); // Jane
console.log(shallowCopy.address.city); // Los Angeles

В этом примере изменение shallowCopy.name не повлияло на originalObject.name, потому что name - это примитивный тип. Однако изменение shallowCopy.address.city повлияло на originalObject.address.city, потому что address - это объект, и была скопирована только ссылка на него.

Другие способы поверхностного клонирования:

• Object.assign({}, originalObject)

Глубокое клонирование (Deep Copy)

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

Пример:

const originalObject = {
  name: 'John',
  age: 30,
  address: {
    city: 'New York'
  }
};

// Глубокое клонирование с использованием JSON.stringify и JSON.parse
const deepCopy = JSON.parse(JSON.stringify(originalObject));

// Изменяем свойство в клоне
deepCopy.name = 'Jane';
deepCopy.address.city = 'Los Angeles';

console.log(originalObject.name); // John
console.log(originalObject.address.city); // New York - Все хорошо!
console.log(deepCopy.name); // Jane
console.log(deepCopy.address.city); // Los Angeles

Этот метод работает, преобразуя объект в строку JSON, а затем обратно в объект. Важно отметить, что этот метод не работает с функциями и циклическими ссылками.

Другие способы глубокого клонирования:

• Использование библиотек, например Lodash (_.cloneDeep(originalObject))
• Рекурсивная функция клонирования (более сложный подход, но позволяет контролировать процесс)

Жизненный пример

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

Например, при работе с массивом объектов в React:

const [items, setItems] = React.useState([
  { id: 1, name: 'Apple' },
  { id: 2, name: 'Banana' }
]);

const updateItemName = (id, newName) => {
  // Создаем копию массива
  const newItems = items.map(item =>
    item.id === id ? { ...item, name: newName } : item
  );
  setItems(newItems);
};

Здесь используется поверхностное клонирование ({ ...item, name: newName }) для обновления одного элемента массива. Важно создавать новые объекты, чтобы React корректно отслеживал изменения.

Ключевые моменты

• Объекты в JavaScript передаются по ссылке.
• Поверхностное клонирование копирует значения примитивных типов и ссылки на объекты.
• Глубокое клонирование копирует все свойства, включая вложенные объекты.
• JSON.stringify и JSON.parse – простой способ глубокого клонирования, но он не работает с функциями и циклическими ссылками.
• Библиотеки, такие как Lodash, предоставляют удобные функции для глубокого клонирования.
• Клонирование важно для работы с состоянием в React и других фреймворках.

Интерактивный пример